前端性能优化,从一道经典面试题展开
"从输入 URL 到页面加载完成,发生了什么?" ,从一个页面的呈现时间轴来整理一下性能优化的方向
这里只整理大概的方向,不列细节
页面加载过程 | 详细描述 | 性能优化的点 | 具体操作 |
1.DNS 解析 | 1.查找本地DNS,如果没有再请求DNS服务器 2.解析成IP地址,访问对应IIP | 1.DNS缓存 | |
2.TCP链接 | TCP三次握手确认双方是否能收到对方的信息 | 1.长连接,预链接 | |
3.HTTP 请求抛出 |
| 提升速度 | 1.利用cdn域名限制减少cookie携带 2.启用cdn域名突破浏览器请求数量限制(6次) |
减少请求次数 | 1.css雪碧图 2.图片打包成base64(webpack) 3.合理利用web储存,较重复少数据请求 | ||
4.HTTP 响应返回 | 减少体积 | 1.gzip压缩 2.js,css 静态文件打包压缩 3.业务代码按需加载 | |
提升响应速度 | 1.强制缓存(适用js)Cache-Control 2.协商缓存(适用html文件)Last-Modified 3.CDN服务器 | ||
5.页面渲染 | 浏览器渲染页面流程
1.html解析DOM树 2.css 解析cssom 3.合成render tree 4.计算布局 5.绘制渲染 | html优化 | 1.优化dom结构,避免页面存在过多的dom 2.分页加载 |
js优化 | 1.渲染期间避免大量操作dom,参考vue虚拟dom技术 | ||
css优化 | 3.动画采用transiform 开启硬件加速,同时开启多层渲染,避免影响页面流试布局造成页面回流
| ||
图片优化 | 1.根据业务场景选择合理的图片类型(jpg,png,gif) 2.图片懒加载,延时加载,占位图 | ||
体验优化 | 1.减少dom操作,减少回流和重绘 2.骨架屏:解决数据返回前的白屏 3.页面缓存,组件缓存(keep-live) 4.设置页面转场动画 | ||
交互优化 | 1.节流防抖,防止用户误操作,容错处理 | ||
7.SEO优化,node端ssr渲染优化 | 减轻服务端压力 | ||
爬虫优化 | 2.img,a 设置 title,alt
|
从上图我们可一直到,前端优化可控制的空间还是挺大的