1.减少 HTTP 请求
一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等诸多过程，下载数据只是其中一部分。
建议将多个小文件合并为一个大文件，从而减少 HTTP 请求的次数。
2.使用 HTTP2。相比于HTTP 1.1 ：
解析速度快、多路复用（多个请求可以共用一个 TCP 连接）、首部压缩
可以设置请求的优先级
可以对不同的流的流量进行精确控制
除了对最初请求的响应外，服务器还可以额外向客户端推送资源，而无需客户端明确地请求。
3.使用服务端渲染
客户端渲染:获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
优点：首屏渲染快，SEO 好。
缺点：配置麻烦，增加了服务器的计算压力。
4.静态资源使用 CDN
内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。
使用 CDN 在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
5.将 CSS 放在文件头部，JS 文件放在底部
所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染，如果时间很久就会使页面空白，所以 JS 文件要放在底部，不影响用户的观感。
如果 JS 文件非要放在头部，只要给 script 标签加上 defer 属性，异步下载，延迟执行。
为了避免用户只看到 HTML 没有样式的情况，CSS 文件要放在头部。
6.使用字体图标 iconfont 代替图片图标
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性。
字体图标是矢量图，不会失真，而且生成文件特别小。
使用 fontmin-webpack 插件对字体文件进行压缩。
7.善用缓存，不重复加载相同的资源
8.优化图片
图片延迟加载：当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。
响应式图片：优点是浏览器能够根据屏幕大小自动加载合适的图片。
调整图片大小：一开始，只加载缩略图，当用户悬停在图片上时，才加载大图。
降低图片质量：通过压缩适当降低图片质量，基本看不出区别。
尽可能利用 CSS3 效果代替图片
使用 webp 格式的图片
9.通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码。
10.减少重绘重排
重排：当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树。
重绘：当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕。
网友评论