知识点梳理

• 浏览器加载到渲染的过程
• 性能优化
• Web安全

性能优化

总结前端性能优化的解决方案

**优化原则：**以更好的用户体验为标准

1. 多使用内存、缓存或者其他方法
2. 减少CPU和GPU计算，更快展现

优化方向：

1. 减少页面体积，提升网络加载
2. 优化页面渲染

减少页面体积，提升网络加载

• 静态资源的合并与压缩（JS代码合并压缩、CSS代码合并压缩、雪碧图等）
• 静态资源缓存（资源名加MD5戳）
• 使用CDN让资源加载更快

优化页面渲染

• CSS放前，JS放后
• 懒加载（图片懒加载、下拉加载更多）
• 减少DOM查询，对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作（DOMContentLoaded）
• 使用SSR服务端渲染，数据直接输出到HTML，即使浏览器使用JS模版渲染页面的时间

性能优化如何做

1. 建立性能数据收集平台，摸底当前性能数据，通过性能打点，将上述整个页面打开过程消耗时间记录下来
2. 分析耗时较长时间段原因，寻找优化点，确定优化目标
3. 开始优化
4. 通过数据收集平台记录优化结果
5. 不断调整优化点和预期目标，循环2~4步骤

Chrome Audits 、 Lighthouse

Performance

---

从V8看JS性能优化

JS代码执行 -> AST -> byte code || machine code

书写良好规范的代码，引擎底层就能帮助我们自动优化代码

---

优化相关

图片大小优化

1. 减少像素点
2. 减少每个像素点能够显示的颜色

图片加载优化

1. 不用图片，修饰类 能用css尽量用css写
2. 对移动端，没必要加载原图，CDN计算适配宽度，然后请求裁剪后的图片
3. 小图使用base64格式
4. css-spirit 将多个图标文件合到一个
5. 选择合适的格式 png jpg webp svg gif