前端性能优化

一、 资源优化

1. html、css、js压缩 （除去无用代码、剔除注释）

   可以使用在线网站压缩、node提供的html-minifier
   css 使用clean-css
   文件合并，压缩合并css和js可以减少网站http请求的次数

二、 异步加载

1. async和defer、scrpit脚本

• async异步（加载先后不为可能文档中的顺序），如果脚本很小或者来自缓存，可能在文档加载完成前加载并执行完毕。
• defer（按理为文档中的顺序） 在文档加载和解析完成之后，即在DOMConetentLoaded之前执行。

• 动态创建script标签

  function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
  }  
  window.onload = function(){  
    addScriptTag("js/index.js");  
  }  

三、预加载和懒加载

首屏加载优化，避免页面长时间空白，减少等待时间，优化体验
DNS-prefetch、subresource 、 prefetch、preconnect、prerender

1. DNS 预解析 DNS-Prefetch

   通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源

   <link rel="dns-prefetch" href="//example.com">

2. 预连接 Preconnect

   与 DNS 预解析类似，preconnect 不仅完成 DNS 预解析，同时还将进行 TCP 握手和建立传输层协议。可以这样使用

   <link rel="preconnect" href="//example.com">

3. preload 提前加载

• 通过声明向浏览器声明一个需要提交加载的资源(图片、css、js)，当资源真正被使用的时候立即执行，就无需等待网络的消耗

  <!-- 使用 link 标签静态标记需要预加载的资源 -->
  <link rel="preload" href="/path/to/style.css" as="style">
  
  <!-- 或使用脚本动态创建一个 link 标签后插入到 head 头部 -->
  <script>
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = '/path/to/style.css';
  document.head.appendChild(link);
  </script>

  当浏览器解析到这行代码就会去加载 href 中对应的资源但不执行，待到真正使用到的时候再执行，另一种方式方式就是在 HTTP 响应头中加上 preload 字段：

  Link: <https://example.com/other/styles.css>; rel=preload; as=style

4. 预获取 Prefetching 和 Subresources

• 预获取：如果我们确定某个资源将来一定会被使用到，我们可以让浏览器预先请求该资源并放入浏览器缓存中，也就是说如果我们猜测用户接下来将要访问哪个具体的资源，那就可以用prefetching来预加载确定的资源了
• 优先级(Subresources > Prefetching)

• 预获取资源具有最高的优先级，在所有 prefetch 项之前进行

  <link rel="subresource" href="styles.css">

  <link rel="prefetch" href="image.png">

5. 预渲染 Prerender

   prerender 可以预先加载文档的所有资源，类似于在隐藏的tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。

   当用户真正访问该链接时，隐藏的页面就切换为可见，使页面看起来就是瞬间加载完成一样。

       <link rel="prerender" href="http://example.com">

   需要注意的是不要滥用该特性，当你知道用户一定会点击某个链接时才可以进行预渲染，否则浏览器将无条件地下载所有预渲染需要的资源。

6. 新特性：Preloading
   和prefetching不同，preloading会让浏览器无论如何都下载指定的资源，也就是说浏览器一定会预加载该资源。

   <link rel="preload" href="image.png">

   所有预加载技术都存在一个潜在的风险：对资源预测错误。
   而预加载的开销是高昂的，比如抢占 CPU 资源，消耗电池，浪费带宽等，所以必须谨慎行事。
   虽然很难确定用户下一步将访问哪些资源，但高可信的场景确实存在：

   如果用户完成一个带有明显结果的搜索，那么结果页面很可能会被加载。
   如果用户进入到登陆页面，那么登陆成功的页面很可能会被加载。
   如果用户阅读一个多页的文章或访问一个分页的结果集，那么下一页很可能会被加载。

注意
所有预加载技术都存在一个潜在的风险：对资源预测错误。而预加载的开销是高昂的， 比如抢占 CPU 资源，消耗电池，浪费带宽等，所以必须谨慎行事。

---

参考链接

• 页面性能优化办法
• async和defer图解
• 前端性能优化之预加载和懒加载