如何优化网站的加载速度
2022-08-06 本文已影响0人
webmrxu
优化网站加载速度方式分类
- 减少http请求
- 提升http加载速度
- 使用CDN 内容分发网络
- TCP/IP 、HTTP优化提升http速度
- 减小网站加载资源的大小
- 使用缓存
- 代码优化
- style 放置到头部
- script 放置到body底部
- 减少使用内连style标签、script标签
- 用户体验优化
减少http请求
减少http请求是优化提高网站加载速度最核心指导方针，因为网络的不确定性导致网址加载速度不可控，每添加一个http请求，就增加一个不确定性，特别是核心的http请求，任意一个http请求都可能导致整个网站的奔溃。加上如今用户设备的升级、性能的提升，代码优化并不是最需要考虑，代码执行速度往往不是最影响网站加载一部分。
网站加载速度优化，考虑资源最小加载规则，非必要资源不加载或者延迟加载，减少http请求。然后再对这些最小必要的资源进行优化减小文件体积或者提高加载速度。 能少发就少发请求，去掉不必要的资源，任何请求都不如没有请求快。
减少http方式有如下几种方式：
- icon图片使用雪碧图，或者使用字体图标
- webpack代码合并
- 小图片转base64嵌入到html文件中。
注意：base64编码会导致文件增大33%，并会不缓存，img src图片是会缓存的，当文件需要重复使用时，建议使用src加载，而不是base64减少http请求
- 异步加载，非必要资源不要一次性加载
- 可以考虑把“稳定的核心”，比如框架和库，转移到独立的包中，利用缓存(可达到连请求都不发送的理想状态)。
- 接口合并，能合并的接口请求后端改逻辑合并请求，坚决拒绝前端循环发送http请求加载数据。
- 项目启动服务端渲染，vue项目服务端渲染，加快首屏渲染速度。理想状态，一个http请求就能加载渲染整个网站
提升http加载速度
提升http速度核心在与网络优化，TCP/IP 优化提升网站加载速度，这就需要对http协议，TCP/IP协议有一定的了解。措施如下：使用CDN 内容分发网络、TCP/IP 、HTTP优化提升http速度。
使用CDN 内容分发网络
- 静态资源使用CDN
- 可选择使用阿里云OSS服务，节省带宽
- 不要使用不稳定的CDN，例如直接从第三方库官网复制CDN连接，往往不稳定，不可控，推荐oss
TCP/IP 、HTTP优化提升http速度
- 重用TCP连接 http1.0 升级到 http1.1 或 http1.0 也可配置connection:keep-alive 启动持久连接
- request和response中同时加上connection：keep-alive请求头。浏览器会自动加上该请求头。
- 避免HTTP重定向，HTTP 重定向极其耗时，特别是把客户端定向到一个完全不同的域名的情况下，还会导致额外的 DNS 查询、TCP 连接延迟，等等
- 项目升级到 HTTP 2.0 以提升性能
- 利用HTTP管道, http请求并行发送
- 减少http中cookie的大小，非必要不传输cookie
- 不要CORS跨域，使用CORS跨域会导致多一次options请求， script src等静态资源不影响，但是接口跨域会导致多一个options请求，如果无法避免跨域，可选择配置中加长CORS的保持时间。
- 合理选择XHR、SSE（EventSource）、WebSockets、WebRTC。
- 采用域名分区，如果一次需要加载很多资源，而浏览器http请求有并发上线，以前是可以并发6个。这种情况可以采用多个域名来绕过并发上线限制。
- 提升带宽大小，但带宽大小并不少越大越快，只有当访问量达到一定数量时，才需要尽可能提升带宽。一般个人网站1M、2M带宽就够用了。据统计5M带宽能满足大部分网站需求。大于5M后，带宽的利用率并不理想。并且带宽的费用还高。
减小网站加载资源的大小
减小http请求资源的大小的核心在于对文件进行压缩，或者在可达到相同的效果中选择合适的资源（例如：图片中不需要透明度时，选择使用jpg或jpeg）
- 使用Gzip压缩，所有文本资源都应该使用 Gzip 压缩，然后再在客户端与服务器间传输。一般来说，Gzip 可以减少 60%~80% 的文件大小，也是一个相对简单（只要在服务器上配置一个选项），但优化效果较好的举措。一般在服务器中配置压缩，例如nginx启动压缩。
- 使用webpack 压缩插件压缩代码，压缩过程中去除不必要代码，例如：console日志，注释代码等
- 图片压缩，不要传输大图片。图片进行压缩，使用webp图片等，在可达到相同效果时尽可能使用压缩率大的突破类型。选择正确的图片格式，不需要透明度的图片不要使用png。
- 压缩好处节省带宽
使用缓存
- 浏览器缓存Cache-Control 首部用于指定缓存时间, max-age
- Cache-Control: max-age=1000; 不同于Expires，max-age 控制的是时间有效区间，例如配置有效期为一天或者一个月；注意http1.0不支持Cache-Control；当同时指定max-age和Expires 时，max-age优先级高，并重写Expires。
- Last-Modified 、 ETag 、Expires 首部提供验证机制
-
Last-Modified, 如果没有改变，http会响应状态吗304 NotModified ，response body 响应体不回返回 -
Expires： response header 中Expires明确指出浏览器缓存该资源，同时指定过期时间。加载的资源未过期，则浏览器不会进行http请求，直接使用缓存中的资源。需要注意客户端和服务端时间同步问题,每次调整都需要在服务端配置。
-
- nginx缓存
- 后端服务缓存
- H5缓存，localStorage,sessionStorage
- 前端数据库缓存 indexDB
- 最大限度利用浏览器缓存，不经常变动的资源（例如js库）合并到一个文件中
代码层面优化
- 优先加载css资源链接，link style 标签放到顶部
- css 文件中不使用@import，@import会延迟css文件延迟加载导致白屏。如果有webpack配置则不影响
- 把首次绘制所需的 CSS 单独拿出来，优先于其他 CSS 文件发送；
- script标签放置到页面底部，按需加载
- 非关键性 JavaScript 应该推迟，以避免阻塞 DOM 和 CSSOM 构建；
- 不经常变动的资源（例如js库）合并到一个文件中，利于浏览器缓存
- Doctype 文档声明使用标准模式，
<!DOCTYPE html> - js加载过程禁用document.write，阻塞页面加载
- 公共组件提取
- 公共方法提取
- 代码审核
- 打包优化
- happyPack 工具，多线程提升打包速度
- 生产环境取消 source-map 打包，提升打包速度、源码安全
- 合理的 exclude 和 include 配置
- 处理缓存，小需求的变动，不影响其他文件打包和内容，提升网站加载速度
- 项目文档整理（需求文档，组件文档，公共方法文档，交接文档，技术文档）
用户体验优化
- 执行推测性优化，尝试预测用户的下一次操作
- 加载动画，优化交互
