性能优化问题

àì夳堔傛蜴生んèń 2022-05-31 14:51 199阅读 0赞

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

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

请求带宽：压缩文件，开启GZIP，

> 代码层面的优化

*  用`hash-table`来优化查找
 *  少用全局变量（全局变量会占用内存）
 *  用`innerHTML`代替`DOM`操作，减少`DOM`操作次数，优化`javascript`性能
 *  用`setTimeout`来避免页面失去响应
 *  缓存DOM节点查找的结果
 *  避免使用CSS Expression
 *  避免全局查询
 *  避免使用with(with会创建自己的作用域，会增加作用域链长度)
 *  多个变量声明合并
 *  避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
 *  尽量避免写在HTML标签中写Style属性

#### 移动端性能优化 ####

*  尽量使用css3动画，开启硬件加速。
 *  适当使用`touch`事件代替`click`事件。
 *  避免使用`css3`渐变阴影效果。
 *  可以用`transform: translateZ(0)`来开启硬件加速。
 *  不滥用Float。Float在渲染时计算量比较大，尽量减少使用
 *  不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
 *  合理使用requestAnimationFrame动画代替setTimeout
 *  CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
 *  PC端的在移动端同样适用

> 相关阅读：[如何做到一秒渲染一个移动页面][Link 1]
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
> requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行  
> 
> 
>   
> 
> 
>     <!DOCTYPE html>
>     <html>
>     <head>
>     	<meta charset="utf-8">
>     	<title>requestAnimationFrame</title>
>     </head>
>     <body>
>     	<div id="a"></div>
>     	
>     	<script type="text/javascript">
>     		var timer;
>     		var a = 0;
>     
>     			cancelAnimationFrame(timer);
>     			timer = requestAnimationFrame(function fn(){
>     				if(a<100){
>     					a++;
>     					document.getElementById('a').innerHTML = a;
>     					timer = requestAnimationFrame(fn);
>     		        }else{
>     		            cancelAnimationFrame(timer);
>     		        }    
>     			}) 
>     	</script>
>     </body>
>     </html>
> 
>   
>

[Link 1]: https://github.com/cssmagic/blog/issues/20