前端性能优化总结

前端性能优化，从一道经典面试题展开

"从输入 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.绘制渲染 6.如果操作页面dom影响页面布局，从4开始重新执行	html优化	1.优化dom结构，避免页面存在过多的dom 2.分页加载
		js优化	1.渲染期间避免大量操作dom，参考vue虚拟dom技术
		css优化	1.css提前加载，css内容单独提取 2.减少选择器长度，避免使用通配符，合理使用选择器搜索性能 3.动画采用transiform 开启硬件加速，同时开启多层渲染，避免影响页面流试布局造成页面回流
		图片优化	1.根据业务场景选择合理的图片类型（jpg,png,gif） 2.图片懒加载，延时加载，占位图
6.页面交互，用户体验优化		体验优化	1.减少dom操作，减少回流和重绘 2.骨架屏：解决数据返回前的白屏 3.页面缓存，组件缓存（keep-live） 4.设置页面转场动画 5.设置图片高度，避免页面跳跃
		交互优化	1.节流防抖，防止用户误操作，容错处理
7.SEO优化，node端ssr渲染优化		减轻服务端压力	1.拆分业务接口，node端只调用和用户信息无关的通用信息接口 2.个性化与seo无关的接口放到客户端调用
		爬虫优化	1.合理使用html标签，页面布局 2.img，a 设置 title,alt

从上图我们可一直到，前端优化可控制的空间还是挺大的