【优化】前端性能优化

1、注意做用域

　　1.避免全局查找

     　　var doc=document;

　　2.避免with语句

     　　with(document.body) => var body=document.body

 

2、避免在对象中没必要要属性查找

     对象(原生或本身定义的)上任何属性查找比访问变量或数组花费更多时间，一旦屡次用到对象属性，存储在变量中

     var sum=value[0]+value[1]比values.first+values.second快

     var url=window.location.href; url.substring......

 

3、优化循环

     减值迭代

     简化终止条件

     简化循环体

     使用do while

 

4、展开循环

     duff

     duff改进

 

5、避免双重解释

     var a=new Function("alert(1)") => var a=function(){alert(1)}

 

6、最小化语句数

　　1.var count=6,

         a=6,

         e=7;

　　2.var name=v[i++];

　　3.var person={

     　　name:"tong",

     　　age:"18",

    　　 sayname:function(){

          　　alert(this.name);     

    　　 }

　　};

 

7、优化DOM操做

　　1.减小现场更新（重排、重绘）/减小DOM操做

var f=document.createDocumentFragment();

     for(i=0;i<10;i++){

          item=document.createElemrnt("li");

          f.appendChild(item);

         item.appendChild(document.createTextNode(i));

     }

     document.body.appendChild(f);

 

　　2.使用innerHTML代替createElement()和appendChild

　　　　注意使用次数

　　3.使用事件代理

　　4.注意HTMLCollection

     

var imgs=document.getElementByTagName("img"),

          image.

          i,len;

 

     for(i=0.len=imgs.length;i<len;i++){

          image=imgs[i];

          ......

     }

 

8、减小HTTP请求　　

　　基本原理：

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

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

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

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

　　解决办法：

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

 

9、使用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。

 

10、高效使用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）的时候，低效的选择符依然会引起更高的开销，因此请避免低效。

 

11、使用CDN加速（内容分发网络）　　

　　基本原理：

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

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

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

 

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

　　不足之处：

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

 

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

　　基本原理：

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

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

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

　　正确的方式：

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

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

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

 

十3、精简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

　　

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

 

十4、压缩图片和使用图片Sprite技术　　

　　基本原理:

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

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

　　1.缩小图片分辨率；

　　2.改变图片格式；

　　3.下降图片保存质量。

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

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

 

十5、注意控制Cookie大小和污染　　

　　基本原理和使用方法：

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

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

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

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

 

十6、减小DNS 查询：DNS 查询通常须要几毫秒到几百毫秒，移动环境下会更慢。咱们能够预先读取DNS，减小用户等待时间。