web前端优化

前端优化

了解前端渲染机制

回流-绘制-复合

避免Dom回流，渐少layout重绘，批量读写操作

影响回流的操作（位置和大小）

• 新增/删除元素
• border padding margin
• display:none
• 操作styles
• 移动元素位置 left top right bottom
• offsetLeft scrollTop clientWidth
• 修改浏览器大小，字体大小，

尽量使用复合线程操作
transform opacity属性

减少重绘
把特定的元素提取到单独的图层

综合

使用transfrom代替定位

• opacity替代visibility
• 多个DOM统一操作（虽然V8会有缓存优化）
• 先将DOM离线，即display：none；修改后显示
• 不要把DOM放在已给循环中作为循环变量

-Dom批量操作，读写分离批量操作

• 不要使用table

-Dom批量操作，读写分离批量操作

开源插件 fastDom

防抖

执行操作n秒后执行。以最后的一次状态

节流

执行操作 n秒内只触发一次函数。立即触发

长列表渲染优化

网络传输压缩Gzip

springboot 开源项目地址

https://gitee.com/qiguliuxing/dts-shop

链接：https://pan.baidu.com/s/1Fz2q5K_uGMwTmpz7eaDifw
提取码：wtkn

性能指标瀑布

stalled，阻塞时间，浏览器对统一域名下的请求并发数有限制

Proxy negotiation 与代理服务器连接耗时

优化点

1丶资源串行改为并行。（文件合并）
排队时间
queued（每个浏览器并行的请求数量有限制）
链接时间
阻塞 DNS解析，代理转发，ssl证书验证，建立链接的时间(服务器优化)
收发耗时
发送，响应，接收（资源压缩）

1、http请求阶段：
1）浏览器把url发送给DNS服务器； 在windows系统上有一个hosts文件可以修改DNS把域名解析成ip地址（浏览器DNS，系统的DNS，hosts修改的是系统的DNS缓存）
2）DNS服务器会根据IP找到对应的服务器；
3）服务器接收到请求，客户端和服务器已经产生了连接；

2、http响应阶段：
4）服务器接收到请求后，根据路径，找到对应项目下的文件；
5）服务器找到之后，服务器立即把一些响应信息放在响应头中，通过http发送给客户端，同时进行数据整理；
6）把整理出来的数据，通过http发送给客户端，直到客户端接收完毕；

3、浏览器渲染阶段：
7）浏览器拿到从服务器传输过来的数据文件；（资源请求压缩,Content-Encoding: gzip）
8）先遍历HTML,形成DOM树；（减少嵌套，层级分明，运动量大的单独提一个层级）
9）代码从上到下解析，形成CSS树；CSSOM（减少嵌套，从右往左优化）
10）DOM树和CSS树重新组成render树；
11）浏览器进行描绘和渲染；(第一次叫描绘和渲染，第二次叫回流（重组render树，)（利用复合,执行动画可以先隐藏盒子）

性能优化-加载

瀑布图

HAR存储新能信息（f12右键保存HAR）

• 速度指数 speed Index 4秒
• 其他新能指标 TTFP 页面加载完成时间 首次渲染时间
• 性能测量模型RAIL

response（50ms）响应时间 Animation（10ms产生一帧）动画

Idle（尽可能增加空闲，主线程优化） 空闲 Load加载（5秒内完成可以交互）

Lightthouse

npm install -g lighthouse

lighthouse https://example.com
chrome://flags/

性能测试报告

Chrome DevTools

ctrl+shift+p 搜索设置

ApI

performance 时间对象
let timing = performance.getEntriesbyType('navigation')[0];
tti = timing.domInteractive - timing.fetchStart;
DNS解析耗时 domainLookupEnd - doaminLookupStart
TCP连接耗时 connectEnd - connectStart
SSL安全连接耗时connectEnd - secureConnectionStart
网络请求耗时 TTFB responseStart - requestStart
数据传输耗时 responseEnd - responseStart
DOM 解析耗时 domInteractive - responeseEnd
资源加载耗时 loadEventStart - domcontentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间 responseEnd - fetchStart
首次可交互时间 domInteractive - fetchStart
DOM Ready时间 domcontentLoadedEventEnd - fetchStart
页面完成加载时间 loadEventStart - fetchStart
http头部大小 transferSiz - encodedBodySize
重定向次数 performance.navigation.redirectCount
重定向耗时 redirectEnd - redirectStart

长任务监听

let observer = new  PerformanceObserver(list=>{
	for(const entry of list.getEntries()){
		console.log(entry)
	}
});
observer.observe({entryTypes:['longtask']})

节流设置，用户是否在当前页面

let ev =  'visibilitychange';
if(document.webkitHidden !== undefiend){
	//webkit 
	ev  = 'webkitvisibilitychange';
}
funciton visibilityChange(){
	if(document.hidden || document.webkitHidden){
		//隐藏
	}else{
		//显示
	}
}
document.addEventListener(ev,visibilityChange)

网络检测
不支持Safari Mobile

let c = navigator.connection || navigator.mozConnection || navigator.webkitConnection; 
c.addEventListener('change',()=>{
  console.log(c.effectiveType)
})

标题关键渲染路径

js -> style ->Layouts -> paint -> composite

渲染树只包含数上的每个节点
Layouts 计算出每个节点的位置和大小
paint 绘制出颜色，文字，阴影大小等等

lighthouse 网站整体质量评估

webPageTest工具 多地点测试，全面性能报告

本地部署webPageTest
docker安装

{
  "registry-mirrors": [
    "https://xzekrsqc.mirror.aliyuncs.com"
  ],
  "insecure-registries": [],
  "debug": false,
  "experimental": false,
  "features": {
    "buildkit": true
  }
}

http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/
修改镜像源
安装

docker pull webpagetest/server
docker pull webpagetest/agent

运行

docker run -d -p 4000:80 webpagetest/server
docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent

此时访问 http://localhost:4000/ 就可以本地测试了

First View: Test Error: Error configuring traffic-shaping 解决方案
Test Studio自动化测试工具