Web前端性能优化常见⾯试题
⼀般说来，web前端指⽹站业务逻辑之前的部分，包括浏览器加载、⽹站视图模型、图⽚服务、CDN服务等，主要优化⼿段有浏览器访问、使⽤反向代理才、CDN等。
1、减少http请求，合理浏览器缓存
2、启⽤压缩：HTML、CSS、javascript⽂件启⽤GZip压缩可达到较好的效果
3、CSS Sprites：合并 CSS图⽚，减少请求数的⼜⼀个好办法。
4、LazyLoad Images：在页⾯刚加载的时候可以只加载第⼀屏，当⽤户继续往后滚屏的时候才加载后续的图⽚
5、CSS放在页⾯最上部，javascript放在页⾯最下⾯：让浏览器尽快下载CSS渲染页⾯
6、异步请求Callback（就是将⼀些⾏为样式提取出来，慢慢的加载信息的内容）
在某些页⾯中可能存在这样⼀种需求，需要使⽤ script标签来异步的请求数据。类似：
<span >/*Callback 函数*/
function myCallback(info){
//do something here
}
HTML:
Callback返回的内容 :
myCallback('Hello world!');
</span>
像以上这种⽅式直接在页⾯上写 <script> 对页⾯的性能也是有影响的，即增加了页⾯⾸次加载的负担，推迟了 DOMLoaded和
7、减少cookie传输
⼀⽅⾯，cookie包含在每次请求和响应中，太⼤的cookie会严重影响数据传输，因此哪些数据需要写⼊cookie需要慎重考虑，尽量减少cookie中传输的数据量。另⼀⽅⾯，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使⽤独⽴域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
8、Javascript代码优化
(1). DOM
a.HTML Collection（HTML收集器，返回的是⼀个数组内容信息）
在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使⽤的时候⼤多将它作为数组来使⽤，因为它有 length属性，也可以使⽤索引访问每⼀个元素。不过在访问性能上则⽐数组要差很多，原因是这个集合并不是⼀个静态的结果，它表⽰的仅仅是⼀个特定的查询，每次访问该集合时都会重新执⾏这个查询从⽽更新查询结果。所谓
的“访问集合” 包括读取集合的 length属性、访问集合中的元素。
因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提⾼性能。即使不转
换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使⽤局部变量。
b. Reflow & Repaint
除了上⾯⼀点之外， DOM操作还需要考虑浏览器的Reflow和Repaint ，因为这些都是需要消耗资源的。
(2). 慎⽤ with
with(obj){ p = 1}; 代码块的⾏为实际上是修改了代码块中的执⾏环境 ，将obj放在了其作⽤域链的最前端，在 with代码块中访问⾮局部变量是都是先从 obj上开始查，如果没有再依次按作⽤域链向上查，因此使⽤ with相当于增加了作⽤域链长度。⽽每次查作⽤域链都是要消耗时间的，过长的作⽤域链会导致查性能下降。
因此，除⾮你能肯定在 with代码中只访问 obj中的属性，否则慎⽤ with，替代的可以使⽤局部变量缓存需要访问的属性。
(3). 避免使⽤ eval和 Function
web前端基础面试题
每次 eval 或Function 构造函数作⽤于字符串表⽰的源代码时，脚本引擎都需要将源代码转换成可执⾏代码。这是很消耗资源的操作 ——通常⽐简单的函数调⽤慢 100倍以上。
eval 函数效率特别低，由于事先⽆法知晓传给 eval 的字符串中的内容，eval在其上下⽂中解释要处理的代码，也就是说编译器⽆法优化上下⽂，因此只能有浏览器在运⾏时解释代码。这对性能影响很⼤。
Function 构造函数⽐ eval略好，因为使⽤此代码不会影响周围代码 ；但其速度仍很慢。
此外，使⽤ eval和 Function也不利于Javascript 压缩⼯具执⾏压缩。
(4). 减少作⽤域链查
用什么软件打开pdf文件前⽂谈到了作⽤域链查问题，这⼀点在循环中是尤其需要注意的问题。如果在循环中需要访问⾮本作⽤域下的变量时请在遍历之前⽤局部变量缓存该变量，并在遍历结束后再重写那个变量，这⼀点对全局变量尤其重要，因为全局变量处于作⽤域链的最顶端，访问时的查次数是最多的。
低效率的写法：
<span >// 全局变量remove在线抠图网站
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查到作⽤域链最顶端，本例中需要访问 100000 次
globalVar += i;ascii码怎么算视频
}
}
</span>
更⾼效的写法：
<span >// 全局变量
var globalVar = 1;
function myCallback(info){
//局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
//访问局部变量是最快的
localVar += i;
}
//本例中只需要访问 2次全局变量
在函数中只需要将 globalVar中内容的值赋给localVar 中
globalVar = localVar;世界上所有颜的名字
}
</span>
此外，要减少作⽤域链查还应该减少闭包的使⽤。
(5). 数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更⼤的开销。当出现以下情况时，建议将数据放⼊局部变量：
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
另外，还应当尽可能的减少对对象以及数组深度查。
(6). 字符串拼接
在 Javascript中使⽤”+”号来拼接字符串效率是⽐较低的，因为每次运⾏都会开辟新的内存并⽣成新的字符串变量，然后将拼接结果赋值给新变量。与之相⽐更为⾼效的做法是使⽤数组的 join⽅法，即将
需要拼接的字符串放在数组中最后调⽤其 join⽅法得到结果。不过由于使⽤数组也有⼀定的开销，因此当需要拼接的字符串较多的时候可以考虑⽤此⽅法。
9、CSS选择符优化
在⼤多数⼈的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进⾏的，例如
#toc A { color: #444; }这样⼀个选择符，如果是从右往左解析则效率会很⾼，因为第⼀个 ID选择基本上就把查的范围限定了，但实际上浏览器对选择符的解析是从右往左进⾏的。如上⾯的选择符，浏览器必须遍历查每⼀个 A标签的祖先节点，效率并不像之前想象的那样⾼。根据浏览器的这⼀⾏为特点，在写选择符的时候需要注意很多事项，有兴趣的童鞋可以去了解⼀下。
CDN加速
CDN（contentdistribute network，内容分发⽹络）的本质仍然是⼀个缓存，⽽且将数据缓存在离⽤户最近的地⽅，使⽤户以最快速度获取数据，即所谓⽹络访问第⼀跳，如下图。
由于CDN部署在⽹络运营商的机房，这些运营商⼜是终端⽤户的⽹络服务提供商，因此⽤户请求路由的第⼀跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快⽤户访问速度，减少数据中⼼负载压⼒。
CDN缓存的⼀般是静态资源，如图⽚、⽂件、CSS、script脚本、静态⽹页等，但是这些⽂件访问频度很⾼，将其缓存在CDN可极⼤改善⽹页的打开速度。
反向代理
传统代理服务器位于浏览器⼀侧，代理浏览器将http请求发送到互联⽹上，⽽反向代理服务器位于⽹站机房⼀侧，代理⽹站web服务器接收http请求。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论