【前端优化】常见前端性能优化

资源压缩 减少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

非核心代码异步加载

正常网页的加载流程：

1. 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2. 解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
3. 如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
4. 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 头会被忽略。

强缓存步骤：

1. 第一次请求 a.js ，缓存表中没该信息，直接请求后端服务器。
2. 后端服务器返回了 a.js ，且 http response header 中 cache-control 为 max-age=xxxx，所以是强缓存规则，存入缓存表中。
3. 第二次请求 a.js ，缓存表中是 max-age， 那么命中强缓存，然后判断是否过期，如果没过期，直接读缓存的a.js，如果过期了，则执行协商缓存的步骤了。

协商缓存

触发条件：

1. Cache-Control 的值为 no-cache （不强缓存）
2. 或者 max-age 过期了 （强缓存，但总有过期的时候）

也就是说，不管怎样，都可能最后要进行协商缓存（no-store除外）

ETag：每个文件有一个，改动文件了就变了，可以看似md5

Last-Modified：文件的修改时间

每次http返回来 responseheader 中的 ETag和 Last-Modified，在下次请求时在 requestheader 就把这两个带上（但是名字变了ETag-->If-None-Match，Last-Modified-->If-Modified-Since ），服务端把你带过来的标识，资源目前的标识，进行对比，然后判断资源是否更改了。

协商缓存步骤总结：

1. 请求资源时，把用户本地该资源的 ETag 同时带到服务端，服务端和最新资源做对比。
2. 如果资源没更改，返回304，浏览器读取本地缓存。
3. 如果资源有更改，返回200，返回最新的资源。

DNS预解析

预解析的实现：

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:

   <meta http-equiv="x-dns-prefetch-control" content="on" />

2. 在页面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 内容分发网络

网络请求的过程走最近的网络环境，解决网络拥堵。