前端页面优化方案

Posted 2020-11-20 8080zh

前端页面优化主要有2方面：

1.页面级别

一、减少http请求次数，每个请求都是有成本，请求多了数据显示慢，影响页面渲染。

实现方法：1.合理设置http缓存  将请求的内容缓存在本地，下次用时不用再去请求。2.合并页面所用的CSS图片，使加载图片的次数减少。

 

二、将JS文件置于文档底部，使其不影响页面的渲染（js阻塞会影响页面的渲染），而且尽量不要用内联JS，如果用尽量异步执行它。

 

三、CSS前置，将CSS文件尽量放置在head中，使其不影响页面渲染。

 

四：尽量减少JS文件和CSS文件的个数，尽量将多个文件合并为一个

 

2.代码级别

一、js CSS文件中变量的声明简化，冗余代码，注释代码都会影响JS的加载

 

二、减少作用域链查找，减少闭包的使用。例如

var globalVar = 1;

function myCallback(info){

   for( var i = 100000; i--;){      //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次     

           globalVar += i;    }

     } 　

更高效的写法：

 var globalVar = 1; // 全局变量

 function myCallback(info){   

 var localVar = globalVar;  //局部变量缓存全局变量    

 for( var i = 100000; i--;){   //本例中只需要访问 2次全局变量在函数中只需要将 globalVar中内容的值赋给localVar 中区   

   localVar += i;   //访问局部变量是最快的    

 }   

   globalVar = localVar;

}

 

 

三、DOM操作是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意

例如：getElementsByTagName()返回的是一个htmlCollection，经常我们把它当作数组使用，但是在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。因此使用它时应尽量将他转成数组在进行循环。

备注：getElementsByTagName（）就相当于一个DOM操作，类似还有：getElementsById（）等。。如果想优化页面性能时，可减少这种查找DOM的操作，查找需要时间