浅谈 Web 性能优化
source link: https://juejin.cn/post/7059689658053034020
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
浅谈 Web 性能优化
我们在获取资源时，浏览器需要发送 http 请求来通知服务端，就需要构建 tcp 连接，如果每个请求对应一个 tcp 连接，从服务器和时间上来说，都是不划算的，所以，第一点是复用 tcp 连接
- 开启 keep-alive 复用 tcp 连接
如果服务器要传给我们很多文件，意味着文件总量会很大，一个好的方法就是服务器把文件压缩进行发送，浏览器收到后再解压缩
- 服务端开启 gzip
当浏览器拿到文件时会开始渲染，通过解析 html，css，js，然后构造出渲染树，最后进行绘制，所以我们要保证 css 和 js 文件在 html 中的顺序，保证先加载 css，再解析 html，最后执行 js，这样能降低白屏时间，也能防止出现阻塞的问题，如果 js 放在前面的话，记得加上 defer
- 保证 css 文件和 js 文件的加载顺序，加快首屏渲染
页面上一定会有许多组件和静态资源，如果一开始全部加载的话，渲染速度较慢，对于用户没还有看见和使用的组件和图片，进行懒加载处理
- 对组件和图片进行懒加载
对于翻页组件的下一页进行预加载，防止用户点击出现卡顿
- 对特定资源进行预加载
我们在第二次访问一个网站时，就会快很多，这是因为一些文件设置了 http 缓存，比如设置了 Cache-control 为 max-age 的文件，我们下次访问时不需要重新请求，直接使用缓存即可
Cache-control 的优先级高于 Expires
- 对不常变化的资源，设置强缓存，减少不必要的请求
还有一需要常常更新的资源，比如 css 文件，如果我们后续发布了新的 css 文件，那么该如何更新呢，一个不错的办法就是设置协商缓存，在第一次响应资源时，服务器会给资源加上一个唯一标识符，是一串不可能重复的字符，每次请求头会带上相应的字段，如果和最新的标识符一致，则响应新的资源和标识符，否则返回 304，让浏览器使用本地缓存，不过如果强缓存命中的话，也就不存在这一步了
- 对于变化频率频繁的资源，设置协商缓存，高效更新资源
加载 css 文件有 link 和 @import 两种方式，@import 只能导入样式表，而 link 还可以定义 RSS 和 rel，link 同步加载 css ，而 @import 要请求 css，会延长渲染树的构建时间，所以少使用 @import 来引入
- 少使用 @import 引入 css
服务端开启 gzip，复用 tcp 连接，合理使用缓存来减少 http 请求，对组件使用懒加载或预加载处理，最好不要把 js 文件放在头部，非要放的话加上 defer，css 的引入最好使用 link
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK