前端性能优化

Google 的网页性能优化工具 pageSpeed insights

针对移动设备或桌面设备生成网页的实际性能报告，并能够提供关于如何改进网页的建议

页面性能的一些指标

加载指标：秒开率

稳定性指标：资源错误,JS报错,Crash,内存堆栈,接口报错等

操作体验指标：响应延迟，卡顿 ，滚动流畅性 ，TTI（可交互时间） FID(用户首次和页面交互到页面响应交互的时间)

加载链路的优化：从访问url到页面呈现，整个加载渲染链路可以做优化的思路。

加载优化方案：

1.建议最好把html,css,js,font,img这些资源放在cdn上

2.没钱买cdn服务，尽可能少的加载外链的css和js代码 ，在头部增加dns-prefetch ，减少Dns的解析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//static.360buyimg.com"/>
<link rel="dns-prefetch" href="//misc.360buyimg.com"/>
<link rel="dns-prefetch" href="//img10.360buyimg.com"/>
<link rel="dns-prefetch" href="//d.3.cn"/>
<link rel="dns-prefetch" href="//d.jd.com"/>

3.不是在首屏展示的资源，不要立即加载，可以在首屏渲染完之后再加载，例如懒加载，数据延迟分批加载

4.减少http请求次数和请求资源的大小

- 资源合并压缩 
- 字体图标 base64
- 考虑资源合并请求

5.script 加载脚本会阻塞浏览器主线程 使用defer或async

6.利用好缓存 ，http响应头缓存字段开启静态资源缓存，减少资源下载

缓存位置

• Service Worker：浏览器独立线程进行缓存

• Memory Cache ：内存缓存

• ClientCache ：客户端缓存，本质上指硬盘缓存

• HttpCache

  • http请求缓存头 （请求头header包含各种缓存的信息）

  • http协商缓存vs 强缓存原理

    • 强缓存 ： 根据第一次请求资源时返回的响应头来确定的 （expires/cache-control）

    • 协商缓存：浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程 Last-Modify/If-Modify-Since ETag/If-None-Match

    • 强缓存与协商缓存的区别，可以用下表来进行描述：

      | | 获取资源形式 | 状态码 | 发送请求到服务器 | | ------------ | ---------------- | ------------------- | ------------------------------------------ | | 强缓存 | 从缓存取 | 200（from cache） | 否，直接从缓存取 | | 协商缓存 | 从缓存取 | 304（not modified） | 是，正如其名，通过服务器来告知缓存是否可用 |

解析渲染优化：

1.CSS嵌套层级不要太深，不超过3级，避免在最内层使用通配选择器。

2.JS脚本不要太复杂，考虑轻量化架构，降低JS复杂性，减少解析时间，尽量不要引用复杂的第三方脚本。

3.按需加载模块，按需打包，首页仅仅加载和执行和首屏相关的脚本。其他脚本延迟加载执行。

4.考虑依赖的第三方模块是不是必须，需不需要精简。

5.打包优化 ，常用webpack和rollup的优化。

6.用户交互相关事件绑定（比如页面scroll，用户左右滑动等），添加参数{passive:true}，减少浏览器事件等待。

Vue长列表性能优化分析

仅渲染视窗可见的数据

<button id="button">button</button><br>
<ul id="container"></ul>  
document.getElementById('button').addEventListener('click',function(){
    let now = Date.now();
    const total = 10000;
    let ul = document.getElementById('container');
    for (let i = 0; i < total; i++) {
        let li = document.createElement('li');
        li.innerText = ~~(Math.random() * total)
        ul.appendChild(li);
    }
    console.log('JS运行时间：',Date.now() - now);
    setTimeout(()=>{
      console.log('总运行时间：',Date.now() - now);
    },0)
})