前端的性能优化

太过爱你忘了你带给我的痛 2022-05-29 02:57 200阅读 0赞

## 五个方面： ##

*  **内容方面**：减少http请求，减少dom节点数，缓存ajax结果，浏览器缓存。
 *  **服务器方面**：cdn加速，gzip压缩。
 *  **js**：减少html内部引用，多引用压缩过的库，少用递归，预加载。
 *  **css**：精简CSS代码的编写，减少嵌套层次，用代替@import，动画要用在脱离文档流的元素上。
 *  **img图片的处理**：一般要压缩到200K；将资源放置子域名下，用iconfont代替小目标。

## 代码层面的优化： ##

> 1.  用hash-table来优化查找。  
>     2.少用全局变量。  
>     3..用innnerHtml代替DOM操作，减少DOM操作  
>     次数，简化javascript性能。  
>     4.用setTimeout 来避免页面失去响应。  
>     5.缓存DOM节点查找的结果。  
>     6.避免使用css表达式。  
>     7.避免全局查询。  
>     8.避免使用with(with会创建自己的作用域，会增加作用域链长度)。  
>     9.多个变量声明合并。  
>     10.避免图片和iFrame等的空Src.空的src会重新加载当前页面，影响速度和效率。  
>     11.尽量避免在html中写style和js。

## 移动端的优化： ##

> 1.尽量使用CSS3动画，开启硬件加速。  
> 2.适当的使用touch事件代替click事件。  
> 3.避免使用css3渐变阴影效果。  
> 4.可以用transform：translateZ(0)来开启硬件加速。  
> 5.不滥用Float.它的计算量比较大。  
> 6.减少使用下载字体。  
> 7.合理使用requestAnimationFrame动画代替setTimeout.  
> 8.CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加。

**上面两大段差不多就是下面四点吧：（分类有点乱）**  
  
1.**代码层面：**避免使用CSS表达式，避免使用高级选择器，通配选择器。

2.**缓存利用：**缓存Ajax,使用CDN,使用外部js和CSS文件以便缓存，添加expires头，服务端配置Etag，减少DNS查找。

3.**请求数量：**合并样式和脚本，使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

4.**请求宽带：**压缩文件，开启GZIP。