Web前端性能优化的9⼤问题
1、请减少HTTP请求基本原理：
在浏览器(客户端)和服务器发⽣通信时，就已经消耗了⼤量的时间，尤其是在⽹络情况⽐较糟糕的时候，这个问题尤其的突出。
⼀个正常HTTP请求的流程简述：如在浏览器中输⼊""并按下回车，浏览器再与这个URL指向的服务器建⽴连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来⾃服务器的应答信息后，对这些数据解释执⾏。
⽽当我们请求的⽹页⽂件中有很多图⽚、CSS、JS甚⾄⾳乐等信息时，将会频繁的与服务器建⽴连接，与释放连接，这必定会造成资源的浪费，且每个HTTP 请求都会对服务器和浏览器产⽣性能负担。
⽹速相同的条件下，下载⼀个100KB的图⽚⽐下载两个50KB的图⽚要快。所以，请减少HTTP请求。
解决办法：
合并图⽚（css sprites），合并CSS和JS⽂件；图⽚较多的页⾯也可以使⽤ lazyLoad 等技术进⾏优化。
2、请正确理解 Repaint 和 Reflow
注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么⼏个英语单词...囧
基本原理：
Repaint(重绘)就是在⼀个元素的外观被改变，但没有改变布局(宽⾼)的情况下发⽣，如改变visibility、outline、背景⾊等等。
Reflow(重排)就是DOM的变化影响到了元素的⼏何属性（宽和⾼），浏览器会重新计算元素的⼏何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗⼞⼤⼩、改变⽂字⼤⼩、内容的改变、浏览器窗⼝变化，style属性的改变等等。如果Reflow的过于频繁，CPU使⽤率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。web前端和java哪个难
减少性能影响的办法：
上⾯提到通过设置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中，有两种结构：对象和数组。
⼀个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟⼀个 “ : ” ；“名称/值对”之间使⽤ “ , ”（逗号）分隔。名称⽤引号括起来；值如果是字符串则必须⽤引号括起来，数值型则不需要。如：
来，数值型则不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}
数组是值（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样式，我不是要你重构页⾯，只是希望你在碰到这种情况的时候解决这些问题。如这样的
1. <font size="3">HTML： 1
2. 2
3. 3 (4)
4. 5</font>
复制代码
或者这样的CSS:
1. <font size="3">body .box .border ul li p strong span{color:#000}</font>
复制代码
以上都是对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需求的逐渐升温，这⼀缺陷将得到改进，使来⾃于远程服务器的⽹络内容⽹页与复本服务器或缓存器中的⽹页保持同步。解决⽅法是在⽹络内容发⽣变化时将新的⽹络内容从服务器端直接传送到缓存器，或者当对⽹络内容的访问增加时将数据源服务器的⽹络内容尽可能实时地复制到缓存服务器。
将CSS和JS放到外部⽂件中引⽤，CSS放头，JS放尾
基本原理：
注：这个是很基础且必须遵循的知识点，可是为了⽂章的完整性勉为其难加进来吧，嘿嘿。
引⼊外部⽂件好处是显⽽易见的，⽽且是项⽬稍稍复杂⼀点的时候就有必要了这样做了。
易维护、易扩展，⽅便管理和重复利⽤。
正确的⽅式：
JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执⾏JavaScript代码时，不能同时做其它事情，即每次出现都会让页⾯等待脚本的解析和执⾏（不论JavaScript是内嵌的还是外链的），JavaScript代码执⾏完成后，才继续渲染页⾯。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到标签以前，这样既能有效的防⽌JavaScript的阻塞，⼜能使得页⾯的HTML结构能更快的释放。
HTML规范清楚指出CSS要放包含在页⾯的区域内，这⾥就不多解释了。
7、精简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
Web前端性能优化
当然，还有另⼀种更傻⽠式的使⽤⽅式，赶兴趣的朋友⾃⼰可去多尝试下。
8、压缩图⽚和使⽤图⽚Sprite技术
基本原理:
注：其实压缩图⽚和图⽚精灵是两个⽅⾯的技术，可是既然都是关于图⽚的优化还是放到⼀块吧。
现在由于⼯作的细分，专业的前端⼯程师已经少有机会去切图了，可是关于图⽚压缩还是得略微了解，⼀般图⽚压缩的⽅式有：
1.缩⼩图⽚分辨率；
2.改变图⽚格式；
3.降低图⽚保存质量。
关于图⽚精灵(Sprite)技术就和我们⼯作直接相关，不管是在CSS中的图⽚还是在HTML结构中的图⽚都会产⽣HTTP请求，前端优化的第⼀条就是减少请求数，最直接有效的⽅法是使⽤图⽚精灵（CSS Sprite）。图⽚精灵就是把许多图⽚放到⼀张⼤图⽚⾥⾯，通过CSS来显⽰图⽚的⼀部分。
⾄于图⽚精灵的操作细节就不多做介绍了，⽹上相关内容很多。
9、注意控制Cookie⼤⼩和污染
基本原理和使⽤⽅法：
有关Cookie的基础和⾼级知识可以去看本⼈写过的⼀篇⽂章《JavaScript 操作 Cookie》。
因为Cookie是本地的磁盘⽂件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量⼩以减少对⽤户响应的影响；使⽤Cookie跨域操作时注意在适应级别的域名上设置coockie以便使⼦域名不受其影响；
Cookie是有⽣命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善⽤户的响应时间。
转载于W3Ctec

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。