Ⅰ 如何对前端性能进行优化
前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。
前端性能进行优化都有哪些规则
减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发，包括图片
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。
12. 避免跳转
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// .com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// .com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转， 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。
13. 删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。
18. 避免404
比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑。
20. 使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
那就不用用一张500*500的大尺寸图片，影响加载
23. 缩小favicon.ico并缓存
Ⅱ Web前端性能优化的实用技巧汇总
今天小编要跟大家分享的文章是关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。
一.提高加载性能
1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有塌尘岩js代码下载并执行完才能继续。因兄雹此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。
2.减少页面外链脚本文件的数量将会提高页面性能：
http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。
3.动态脚本加载技术：
无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。
functionlaodScript(url,callback){
varscript=document.createElement('script');_
_cript.type='text/javascript'__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null;_______
callback()_____
____
__
}else{//其他浏览器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url;_
document.getElementsByTagName('head')[0].appendChild(script);
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('加载完成')___
})_
})
})
4.无阻塞加载类库——LABjs,使用方法如下：
//链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init();
})
//为了保证执行顺序，可以这么做,此时a必定在b前执行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init();
})
二.数据存取与JS性能
1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。
2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢
3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快
4.嵌套的对象成员会明显影响性能，应尽量避免
5.属性和方法在原型链位置越深，访问他的速度越慢
6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能
三.DOM编程
1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。
注团御：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()
2.HTML集合优化
HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
①_优化一——集合转数组collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②缓存集合length
③访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）
3.遍历DOM
①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性名
被替代属性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_谘≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重绘和重排
浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构——_OM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.
①重排发生的条件：
添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗
5.渲染树变化的排列和刷新
大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些优化建议：将设置样式的操作和获取样式的操作分开：
//设置样式
body.style.color='red'
body.style.fontSize=པpx'
//读取样式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外，获取计算属性的兼容写法：
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_
returncomputed
}
6.最小化重绘和重排
①.批量改变样式
/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px'
②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[];_//让容器脱离文档流，减少重绘重排_
vartargetEl_display=targetEl.style.display;_
targetEl.style.display='none'
_
//*****创建文档片段来优化Dom操作****_
varfragment=document.createDocumentFragment();_//给元素填充数据_
for(vari=0,max=data.length;i
createEl=
document.createElement(option.createEl);___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item];_______
continue;_____
}_____
_reateEl.setAttribute(item,data[i][item]);_______
//****将填充好的node插入文档片段****___
fragment.appendChild(createEl);___
//****将文档片段统一插入目标容器****_
targetEl.appendChild(fragment);_
//显示容器，完成数据填充_
targetEl.style.display=
targetEl_display;
}
//使用
varwrap=document.querySelectorAll('.wrap')[0];
vardata=[_
_name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'}];
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
});
上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼？梢允沟_om操作更有效率。
②.缓存布局信息
//缓存布局信息
letcurrent=el.offsetLeft;
current++;
el.style.left=current+'px'
if(current>300){_
stop();
}
④.慎用:hover
如果有大量元素使用:hover,那么会降低相应速度，CPU升高
⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间
functiondelegation(e,selector,callback){_
e=e||window.event;_
vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return;
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault();___
e.stopPropagation();
}else{___
e.returnValue=false;
e.cancelBubble=true;_
}
__allback()}
四.算法和流程控制
1.循环中减少属性查找并反转(可以提升50%-60%的性能)
//for循环
for(vari=item.length;i--){_
process(item[i]);
}
//while循环
varj=item.length;
while(j--){_
process(item[i]);
}
2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）
3.基于函数的迭代（比基于循环的迭代慢）
items.forEach(function(value,index,array){__rocess(value);})
4.通常情况下switch总比if-else快，但是不是最佳方案
五.字符串和正则表达式
1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[sS]来匹配任意字符串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^s+/,'').replace(/ss*$/,'')_
}
}
六.快速响应的用户界面
1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。
2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.
3.用延时数组分割耗时任务：
functionmultistep(steps,args,callback){_
vartasks=steps.concat();
__etTimeout(function(){___
vartask=tasks.shift();___
task.apply(null,args||[]);_//调用Apply参数必须是数组
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25);
___else{_____
_allback();___
__
},25);
}
4.记录代码运行时间批处理任务：
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat();__etTimeout(function(){___
varstart=+newDate();
__o{_____
_rocess(todo.shift());___
}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：
①一个navigator对象，包括app
Ⅲ 如何进行web前端性能优化
提起Web前端性能优化的问题，前端开发人员非常熟悉，对于一个网站而言，即使内容和功能再优秀，如果用户需要花费很久的时间才能打开，这样迟早会消耗用户的耐心，并最终失去用户。
那如何才能优化前端性能？归纳为三步
一、关键资源字节数
字节数也就是通常说的减少资源文件（js、css、image、video...）的大小。
1、压缩衫蚂
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩，使用压缩比例更高的格式（WebP）
2、缓存
强缓存（http状态码：200），不用请求服务运纳器直接使用本地缓存，协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源，使用localstorage对数据进行存储。
3、针对首屏优化
对非关键资源延迟加载、异步加载，减少首屏资源大小
二、关键资源连接数
1、合并请求
使用http2.0的多路复用合并请求配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段。
2、减少图片请求数
使用spite图，使用svg-symbol。
3、针对一些场景采用css、js内联的方式。
4、使用强缓存减少了一次服务器请求。
5、非关键资源延迟、异步加载，减少了首屏资源连接数。
三、关键渲染路径
1、bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点，这种方式主要解决了直出页面阻塞的问题。
2、bigrender分块渲染
常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数
3、针对reflow，repaint，composit路径处理。
4、涉及到动画时关于layer的概旁塌没念renderlayer、graphicslayer。
5、css放在头部、js放底部避免阻塞DOM树的构建，关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行。
Ⅳ 常用的前端性能优化方法有哪些
常用的优化有两部分
第一：面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二：面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的
Ⅳ 如何进行前端优化
1.减少 HTTP 请求....
2.使用 HTTP2
3.使用服务端渲染
4.静态资源使用 CDN
5.将 CSS 放在文件头部，JavaScript 文件放 ...
6.使用字体图标 iconfont 代替图片图标
7.善用缓存，不重复加载相同的资源
8.压缩文件
9.图片优化
(1).图片延迟加载
(2). 响应式图片
(3). 调整图片大小
(4). 降低图片质量
(5). 尽可能利用 CSS3 效果代替图片
(6). 使用 webp 格式的图片
10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
11. 减少重绘重排
12. 使用事件委托
13. 注意程序的局部性
14. if-else 对比 switch
15. 查找表
16. 避免页面卡顿
17. 使用 requestAnimationFrame 来实现视觉变化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆盖原生方法
21. 降低 CSS 选择器的复杂性
(1). 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
(2). CSS 选择器优先级
22. 使用 flexbox 而不是较早的布局模型
23. 使用 transform 和 opacity 属性更改来实现动画
24. 合理使用规则，避免过度优化
性能优化主要分为两类：
加载时优化
运行时优化
Ⅵ 如何优化前端文件资源以提供页面加载速度和响应速度
应该是跟普通网页一样的
提高网站速度的关键在于以下几点：
1、缩小Javascript和CSS文件
2、减少HTTP请求
3、建议图片、CSS和Javascript时间可设置为一个月
4、合并CSS引用图片
5、只加载<head>部分的基本脚本
6、对图像不失品质的情况下尽量压缩
7、开启gzip进行数据压缩
Ⅶ 如何做好网站前端优化
一. 清理 HTML 文档
二. 优化 CSS 性能
三.减少外部HTTP请求
四. 压缩 CSS, JS 和 HTML
五. 使用预先获取
六. 使用 CDN 和缓存提高速度
七. 压缩文件
八. 优化你的图片
九. 使用轻量级框架
十.前端优化 – 总结
进行前端优化似乎需要花费很大的精力，相信这篇应用指南中的一些小技巧能帮你极大改善网站加载速度。网站加载地越快，则用户体验越佳。因此, 对前端进行优化能使给你和你的用户都带来益处。如果你有任何其他好的优化方法，请在评论区留下您的宝贵建议。