web前端性能优化

本文借鉴https://www.2cto.com/kf/201604/498725.html，部分内容增加修改。

前端作为面向用户体验的高端技术人才（自捧一下我大前端行业），把网站优化好，不仅可以为企业节省成本，还能因为更好的体验带来更多的用户。

web前端的优化主要有一下几点：

一、浏览器访问优化

1.减少http请求，合理设置http缓存

http协议是无状态的应用层协议，每次请求都需要建立通信链路、进行数据传输，而在服务器端，每个http请求都需要独立的线程去处理，这些通信和服务的开销都是很昂贵的。

减少http请求的主要手段是合并css、合并js、合并图片，恰当的缓存设置可以大大的减少http请求，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头，变化不频繁而可能会变得资源可以使用Last-Modifed来做请求验证。

2.使用浏览器缓存

通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，如果静态资源变化需要及时应用到客户端浏览器，可以通过改变文件名实现，使用浏览器缓存策略的网站在更新静态资源时，应采用逐步更新，并有一定的时间间隔，以免浏览器忽然大量缓存失效，集中更新缓存造成服务器负载骤增、网络堵塞的情况。

3.启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量，但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

4.CSS Sprites（合并css图片）

5.Lazy Load Images

在内容较多的情况下，可以先加载部分内容而不影响用户体验，如页面刚加载时只加载第一屏，如果用户只对第一屏的内容感兴趣，那剩余的图片请求就都节省了。

6.css和js文件放置位置

在页面加载的时候，需要先加载css对整个页面进行渲染，所以css放在页面最上面，js加载则会阻塞页面加载，造成页面显示缓慢，因此js最好放置页面底部，但如果页面解析时就需要用到js，这时放底部就不合适了。

7.异步请求Callback

8.减少cookie传输

cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输

9.js代码优化

（1）DOM

在脚本中document.images、document.forms、getElementByTagName()返回的都是HTMLCollection（HTML收集器）类型的集合，访问集合包括读取集合的length属性、访问集合的元素。当遍历HTML Collection的时候，尽量将它变为数组后再访问，以提高性能，即使不转换为数组，也请尽可能少的访问它

（2）慎用with

with(obj){p=1};代码块的行为实际是修改了代码块的执行环境，将obj放在了作用域链的最前端，在with代码块中访问非局部变量都是先从obj上开始查找，如果没有再依次按作用域链向上查找，因此使用with相当于增加了作用域链长度，而每次查找作用域链都是要消耗时间的，除非你能在with代码里只访问obj中的属性，否则慎用with。

（3）避免使用eval和function

每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。 eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。 Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。 此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

（4）减少作用域链查找

如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。此外，减少作用域链查找还应该减少闭包的使用。

（5）数据访问

Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量，另外还应当尽可能减少对对象以及数组深度查找。

（6）字符串拼接

在 Javascript中使用”+” 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

10.CSS选择符优化

事实上，CSS选择符是按照从右到左的顺序进行匹配的

（1）避免使用通配规则：除了传统意义上的通配选择符之外，Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到“通配规则”分类下。他推荐仅使用ID、类和标签选择符。

（2）不要限定ID、类选择符：在页面中一个指定ID只能对应一个元素，所以没有必要添加额外的限定符。例div#toc是没有必要的，应简化为#toc。

（3）让规则越具体越好：不要编写像ol li a这样的长选择符，最好创建一个类名，并把它添加到适当的元素上。

（4）避免使用后代选择符、子选择符：还是创建类名效率高。

二、CDN加速

CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

特点：

1、本地Cache加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性

2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。

3、远程加速远程访问用户根据DNS负载均衡技术智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度

4、带宽优化 自动生成服务器的远程Mirror（镜像）cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。

5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗余机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量 。