前端优化

1.前端优化

1. 加载时的优化

1. 减少http请求:将多个小文件合并成一个大文件
   1. 合并/压缩css，js文件；内容不多时使用内嵌式
   2. 如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload为none,页面加载的时候，音视频资源不进行加载，播放的时候再进行加载，（减少页面首次加载HTTP请求的次数）
   3. 精灵图 4. 缓存 ：利用缓存不重复加载相同的资源（express）
2. 使用服务器渲染（服务端返回html文件，客户端解析html文件即可）
3. 静态资源使用CDN（内容分发网络：在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间）
4. css写在头部（用户体验），js写在底部/或者defer（放在head处会堵塞渲染）
   1. 浅谈script标签的defer和async - 掘金 (juejin.cn)
   2. defer 立即下载，但延迟执行%%脚本会被延迟到整个页面都解析完毕后再运行%%,保证前后执行顺序
   3. async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。
   4. ![[Pasted image 20221101110924.png]]
5. 图片加载优化
   1. 图片懒加载
   2. 降低图片质量 3. 尽量用css3代替图片
   3. 使用雪碧图%%减少http请求%%
   4. 字体图标代替图片图标（生成文件小，矢量图不易失真）
6. 通过webpack按需加载代码：先把代码在一些逻辑断点中分开，在一些代码块完成某些操作后，立即引用/即将引用新的代码块（加快初始加载速度，减少总体代码量）
7. 提取第三库代码。减少es6转es5的冗余代码

2.运行时的优化

1. 减少重绘、重排
   1. js修改样式时，尽量使用类，把多个修改放在一起
   2. 操作DOM元素时，让他脱离文档流，修改完成后，再带回去（隐藏元素、文档碎片）
   3. 用transform、opacity属性更改来实现动画%%不会触发重排、重绘，他们是由合成器单独处理的属性%%
2. 事件委托
3. if-else/switch
4. 不要覆盖原生方法，尽量使用原生方法
5. 降低css选择器的复杂性%%选择器是从右向左查找的，前缀多，查询的时间多%%
6. 使用弹性布局flexbox

3.通信时的优化

1. 服务端客户端通信时，尽量采用json格式

4.后期维护

1. 编写js代码的时候，尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性

5.SEO优化

1. 突出重要内容，合理的设计title、description，keyword
2. 语义化html标签
3. 图片img标签添加alt和title属性；链接<a>页内标签添加title属性