【前端优化】常见前端性能优化
LONGSHAN 2019-11-04
资源压缩 减少HTTP请求
静态资源压缩
- html：压缩空格、换行、注释等字符 Webapack — html-webpack-plugin
- css：无效代码删除，语义合并（相同样式代码） Webpack css-loader
- js：无效字符删除、剔除注释代码语义的缩减和优化 Webpack — UglifyJSPlugin
图片优化方案：
- 雪碧图
- 小文件 使用base64 webpack base64-inline-loader
- 图片压缩网站
- svg
资源合并
弊端：
- 首屏渲染问题，合并文件太大，造成慢。
- 缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并
- 规则：公共库合并，不同页面的各自合并。异步加载组件，不同页面单独打包，监听路由变化，自动下载
- 实现：gulp插件梳理工作流/webpack配置loader和plugin
非核心代码异步加载
正常网页的加载流程：
- 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
- 解析过程中，浏览器发现
<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。 - 如果
<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。 - JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复解析 HTML 网页。
上述加载方式为同步加载，会阻塞浏览器的解析html文档。故而我们常将script元素放置于body的底部
三种实现方式：动态脚本、async、defer
动态脚本
动态创建script标签
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://xxxxxxx";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);async
async属性和defer属性类似，也是会开启一个线程去下载js文件，但和defer不同的时，它会在下载完成后立刻执行，而不是会等到DOM加载完成之后再执行，所以还是有可能会造成阻塞。
且不会按照顺序执行，哪个js文件先下载完就先执行哪个
对于内联脚本无作用 (即没有src属性的脚本）。
defer
当浏览器遇到带有defer属性的<script>标签时，再开启一个线程去下载js文件，同时继续解析HTML文档，等等HTML全部解析完毕DOM加载完成之后，再按照出现顺序依次执行加载好的js文件。
对于内联脚本无作用 (即没有src属性的脚本）。
使用场景
一般来说，是看脚本之间是否有依赖关系，有依赖的话应当要保证执行顺序，应当使用defer没有依赖的话使用async，同时使用的话defer失效。要注意的是两者都不应该使用document.write，这个导致整个页面被清除。
利用浏览器缓存
https://juejin.im/post/5c4179...
优点：
- 减少了冗余的数据传输，节省网费
- 减少服务器的负担，提升网站性能
- 加快了客户端加载网页的速度
浏览器缓存分为强缓存和协商缓存
强缓存
如果资源没过期，就取缓存，如果过期了，则请求服务器。
cache-control：max-age = xxx
声明该资源在加载后的xxx秒内都直接使用缓存 使用的是相对时间 即加载文件本机的时间
Cache-Control 的几个取值含义：
- private：仅浏览器可以缓存
- public：浏览器和代理服务器都可以缓存
- max-age=xxx:过期时间
- no-cache:不进行强缓存
- no-store:不强缓存，也不协商缓存
- 规则可以同时多个 cache-control：public，max-age=0
- expires： 绝对时间，服务器基于自己的时间返回一个文件过期时间
如果在
Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么Expires头会被忽略。
强缓存步骤：
- 第一次请求 a.js ，缓存表中没该信息，直接请求后端服务器。
- 后端服务器返回了 a.js ，且 http response header 中 cache-control 为 max-age=xxxx，所以是强缓存规则，存入缓存表中。
- 第二次请求 a.js ，缓存表中是 max-age， 那么命中强缓存，然后判断是否过期，如果没过期，直接读缓存的a.js，如果过期了，则执行协商缓存的步骤了。
协商缓存
触发条件：
- Cache-Control 的值为 no-cache （不强缓存）
- 或者 max-age 过期了 （强缓存，但总有过期的时候）
也就是说，不管怎样，都可能最后要进行协商缓存（no-store除外）
ETag：每个文件有一个，改动文件了就变了，可以看似md5
Last-Modified：文件的修改时间
每次http返回来 responseheader 中的 ETag和 Last-Modified，在下次请求时在 requestheader 就把这两个带上（但是名字变了ETag-->If-None-Match，Last-Modified-->If-Modified-Since ），服务端把你带过来的标识，资源目前的标识，进行对比，然后判断资源是否更改了。
协商缓存步骤总结：
- 请求资源时，把用户本地该资源的 ETag 同时带到服务端，服务端和最新资源做对比。
- 如果资源没更改，返回304，浏览器读取本地缓存。
- 如果资源有更改，返回200，返回最新的资源。
DNS预解析
预解析的实现：
用meta信息来告知浏览器, 当前页面要做DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" />
在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。
如果需要禁止隐式的 DNS Prefetch，可以使用以下的标签：
<meta http-equiv="x-dns-prefetch-control" content="off">
在浏览器中a标签默认打开DNS预解析，但是在HTTPS中默认关闭
CDN 内容分发网络
网络请求的过程走最近的网络环境，解决网络拥堵。
