前端页面优化主要有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的操作，查找需要时间
原文地址：https://www.cnblogs.com/8080zh/p/9224471.html