前端性能优化，从一道经典面试题展开
"从输入 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
|
从上图我们可一直到，前端优化可控制的空间还是挺大的
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
