前端性能优化

时间 2019-11-25

原文原文链接

本文出自：http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html　css

　做为本人2011年的收尾文章，就来个总结性质的吧，^_^...最近一直有给新同窗作前端方面的培训，也有去参与公司前端的招聘，因此把本身资料库里面不少高效且有用的知识作了些规整分类，而后再分享一篇关于前端优化方面的总结。并且春节一过就又是招聘的高峰期了，在校的、跳槽的、浮躁的都开始进入面试的大军，前端优化也是前端面试通常会问到的东西，因此但愿能对朋友们有用。html

　　前端性能优化

1.　　请减小HTTP请求　　前端

　　基本原理：html5

　　在浏览器(客户端)和服务器发生通讯时，就已经消耗了大量的时间，尤为是在网络状况比较糟糕的时候，这个问题尤为的突出。java

　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器创建链接，而后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。面试

　　而当咱们请求的网页文件中有不少图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器创建链接，与释放链接，这一定会形成资源的浪费，且每一个HTTP请求都会对服务器和浏览器产生性能负担。json

　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。因此，请减小HTTP请求。api

　　解决办法：跨域

　　合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可使用 lazyLoad 等技术进行优化。数组

2.　　请正确理解 Repaint 和 Reflow　　

　　注：Repaint 和 Reflow 也就是重绘和重排，请容许我在这卖弄下我有限认识的那么几个英语单词...囧

　　基本原理：

　　Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的状况下发生，如改变visibility、outline、背景色等等。

　　Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的全部其它结点的visibility属性，这也是Reflow低效的缘由。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。若是Reflow的过于频繁，CPU使用率就会噌噌的往上涨，因此前端也就有必要知道 Repaint 和 Reflow的知识。

　　减小性能影响的办法：

　　上面提到经过设置style属性改变结点样式的话，每设置一次都会致使一次reflow，因此最好经过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；若是功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

　　总之，由于 Reflow 有时确实不可避免，因此只能尽量限制Reflow的影响范围。

3.　　请减小对DOM的操做　　

　　基本原理：

　　对DOM操做的代价是高昂的，这在网页应用中的一般是一个性能瓶颈。

　　天生就慢。在《高性能JavaScript》中这么比喻：“把DOM当作一个岛屿，把 JavaScript(ECMAScript)当作另外一个岛屿，二者之间以一座收费桥链接”。因此每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。因此通常建议尽可能减小过桥次数。

　　解决办法：

　　修改和访问DOM元素会形成页面的Repaint和Reflow，循环对DOM操做更是罪恶的行为。因此请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

　　减小对DOM元素的查询和修改，查询时可将其赋值给局部变量。

　　注：在IE中:hover会下降响应速度。

4.　　使用JSON格式来进行数据交换　　

　　基本原理：

　　JSON是一种轻量级的数据交换格式，采用彻底独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

　　与XML序列化相比，JSON序列化后产生的数据通常要比XML序列化后数据体积小，因此在Facebook等知名网站中都采用了JSON做为数据交换方式。

　　JS操做JSON：

　　在JSON中，有两种结构：对象和数组。

　　1. 一个对象以 “ { ” 开始，“ } ” 结束。每一个“名称”后跟一个 “ : ” ；“名称/值对”之间使用 “ , ”（逗号）分隔。名称用引号括起来；值若是是字符串则必须用引号括起来，数值型则不须要。如：
var obj={"name":"darren","age":24,"location":"beijing"} 
　　2. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
　　对这种数组和对象字面量的操做是很是方便且高效的。若是预先知道JSON结构的状况下，使用JSON进行数据传递简直是太美妙了，能够写出很实用美观可读性强的代码。若是你是纯粹的前台开发人员，必定会很是喜欢JSON。

5.　　高效使用HTML标签和CSS样式　　

　　基本原理：

　　HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，做为一名合格的前端开发，你有必要去知道其经常使用标签表明的含义(SEO)和属性(表现形式)。

　　CSS指层叠样式表 (Cascading Style Sheets)，若是说把页面想象成一我的，HTML就是人的骨架，CSS就是人的衣装，一我的的品味从他的衣装就能一目了然。

　　一名专业的前端开发也是一名优秀的重构，由于在页面中常常会有各类不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是但愿你在碰到这种状况的时候解决这些问题。如这样的HTML：
<table><tr><td>
　　<table><tr><td>
　　　　...
　　</td></tr></table>
</td></tr></table>
或者这样的CSS:
body .box .border ul li p strong span{color:#000}
　　以上都是对HTML和CSS很是糟糕的使用方法。

　　正确理解：

　　HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，好比Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

　　CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：　
　　ID选择符 #box
　　类选择符 .box  
　　标签 div
　　伪类和伪元素 a:hover
　　当页面被触发引发回流（reflow）的时候，低效的选择符依然会引起更高的开销，因此请避免低效。

6.　　使用CDN加速（内容分发网络）　　

　　基本原理：

　　CDN的全称是Content Delivery Network，即内容分发网络。

　　"其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。经过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。" - 百度百科。

　　上面几句话有多少能安安心心看完的，因此我仍是经过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_^：

　　古代打仗你们必定都知道，因为古代的交通很不发达，因此当外族进攻的时候每每不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者倒是早已不见了踪迹，这个让古代的帝王非常郁闷。后来帝王们学聪明了，都将大量的兵员提早派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的做用。

　　不足之处：

　　实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将获得改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增长时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

7.　　将CSS和JS放到外部文件中引用，CSS放头，JS放尾　　

　　基本原理：

　　注：这个是很基础且必须遵循的知识点，但是为了文章的完整性勉为其难加进来吧，嘿嘿。

　　引入外部文件好处是显而易见的，并且是项目稍稍复杂一点的时候就有必要了这样作了。

　　易维护、易扩展，方便管理和重复利用。

　　正确的方式：

　　JavaScript是浏览器中的霸主，为何这么说，由于在浏览器在执行JavaScript代码时，不能同时作其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的仍是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

　　由于这个阻塞的特色，建议把JavaScript代码放到</body>标签之前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

　　HTML规范清楚指出CSS要放包含在页面的<head>区域内，这里就很少解释了。

8.　　精简CSS和JS文件　　

　　基本原理：

　　有一条很是重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减小下载的文件体积。我我的常用的方式是使用 YUI Compressor，它的特色是：移除注释；移除额外的空格；细微优化；标识符替换。

　　YUI Compressor是java程序，若是你对java很熟悉的话可快速的上手使用yuicompressor.jar；若是你对java很陌生也不要紧，同样可使用YUI Compressor，下面介绍其使用方式。

　　YUI Compressor的配置和使用：

　　先配置使用环境：

　　1.先确保电脑中是否安装了JDK

　　2.再配置必要的环境变量(细节不能三两句说清，因此不知道如何设置仍是搜索吧)

　　3.在cmd界面，输入javac可测试是否安装成功

　　使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以本身的yuicompressor-2.4.2.jar为例：

　　1.压缩JS
　　java -jar yuicompressor-2.4.2.jar api.js > api.min.js
　　2.压缩CSS
　　java -jar yuicompressor-2.4.2.jar style.css > style.min.css
　　

　　固然，还有另外一种更傻瓜式的使用方式，赶兴趣的朋友本身可去多尝试下。

9.　　压缩图片和使用图片Sprite技术　　

　　基本原理:

　　注：其实压缩图片和图片精灵是两个方面的技术，但是既然都是关于图片的优化仍是放到一块吧。

　　如今因为工做的细分，专业的前端工程师已经少有机会去切图了，但是关于图片压缩仍是得略微了解，通常图片压缩的方式有：

　　1.缩小图片分辨率；

　　2.改变图片格式；

　　3.下降图片保存质量。

　　关于图片精灵(Sprite)技术就和咱们工做直接相关，无论是在CSS中的图片仍是在HTML结构中的图片都会产生 HTTP请求，前端优化的第一条就是减小请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，经过CSS来显示图片的一部分。

　　至于图片精灵的操做细节就很少作介绍了，网上相关内容不少。

10.　　注意控制Cookie大小和污染　　

　　基本原理和使用方法：

　　有关Cookie的基础和高级知识能够去看本人写过的一篇文章《JavaScript 操做 Cookie》。

　　由于Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，因此建议去除没必要要的Coockie，使Coockie体积尽可能小以减小对用户响应的影响；

　　使用Cookie跨域操做时注意在适应级别的域名上设置coockie以便使子域名不受其影响

　　Cookie是有生命周期的，因此请注意设置合理的过时时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

　　时间有限，今年就先到这里吧，哈哈。愿你们新年快乐，工做顺利。我会在之后的工做中慢慢完善这篇文章，也请你们多提宝贵建议。

　　若是你们也有什么好的优化方式也请留言，到时会补充到这篇文章当中，先在此谢谢了。

　　参考资料

　　百度百科

　　http://dev.w3.org/html5/markup/common-models.html

　　http://www.w3schools.com/

　　前端攻城师攻略系列　　

　　做为一名前端攻城师，愈来愈感觉到在公司受到的重视，身边也有愈来愈多的朋友加入到前端开发这个岗位上，有种说不出的骄傲感。

　　因为闲暇时间喜欢看书，因此曾萌生过但愿写本书的想法，虽然如今本身还有不少的坑须要踩过，真要写书也是未来好久之后的事了，但是有打算先尝试写点与前端紧密相关的攻略，因而就有了“前端攻略系列”。

　　因为如今本人表达能力和技术能力上的欠缺，不免有理解不对的地方，也请你们多多谅解。

　　若是以为此文还算用心，请劳驾点击右下角的推荐^.^ 。

做者：聂微东
出处： http://www.cnblogs.com/Darren_code/ 本文版权归做者和博客园共有,欢迎转载,但未经做者赞成必须保留此段声明,且在文章页面明显位置给出原文链接。