前端性能

前端开发会有很多性能方面的问题，下面我们从几个方面来讨论：

1.连接过程

1）.浏览器中输入网址并且按回车。

2）.浏览器尝试与这个url建立连接。如果成功就3，不成功就结束。

3）.浏览器向服务器发请求信息。

4）.服务器接收到请求后返回响应的信息。

5）.浏览器收到来自服务器的应答之后，对数据进行解释执行。

当我们请求的网文件中需要很多图片的时候 浏览器会频繁的与服务器建立连接，并释放连接，这就会很耗时，产生性能负担。http://write.blog.youkuaiyun.com/postedit/39005461

网速相同的条件下下载一个100k的图片比下载两个50l的图片要快，因为请求http是一个很耗时的过程，所以要减少http请求。

解决： css sprites，合并css js文件，对文件压缩，lazyload。

其中lazyload有必要说一下：lazyload，在网页首次加载的时候有很多js并没有用到，把不用的js暂时不加载可以缩短下载时间，并且提高页面渲染的效率（用到的时候再下载）。lazyload.js(urls, fn, scope); 可参照lazyload用法

2.减少对dom的访问。查询时可将其值赋值给局部变量。

//如：
$("#mydom").click(function(){...});
$("#mydom").mouseenter(function(){...});
$("#mydom").hover(function(){...});
...
//以上做法每次都去查询dom
//可以写成
var mydom = $('#mydom');// 这样只查询了一次dom
mydom.click.....
mydom.mouseenter......
mydom.hover.....

3.使用json进行数据交换。它是javascript的原生格式，处理时不需要其他utility的支持。

4.缓存

概念：避免频繁的从服务器存取而建立的一个临时的存储器。它的存取速度非常快，但容量会少点。（空间换时间）

前端缓存可以理解为一般使用的cdn技术，利用squid等做前端缓冲技术，主要还是针对静态文件类型，比如图片，css,js,html等静态文件。弊端就是会导致修改后缓存没有更新，从而页面没有变化。

5.把样式表置于顶部,脚本置于页面底部,尽量使用外部 JavaScript 和 CSS.

样式表： 如果放在了底部，很多浏览器（尤其是IE浏览器）会阻止呈现任何内容，直到加载了这些样式表。用户有可能看到空白如也的一个页面，然后等到全部加载完成了，再突然出现一大堆内容在他面前。这不友好。而且在css加载结束之后，页面可能要重新去渲染一遍。

脚本：脚本放在页面底部，有助于提高页面加载的并行速度。（或者放在头部，设置defer属性，但这不是所有浏览器都支持），还有一种情况，在脚本中有时候需要去查找一个dom，但是放在头部的话页面还没构造，dom不存在就会报错。

6.避免使用 CSS 表达式（Expression）

7.用 <link> 代替 @import
8.避免使用滤镜
9.剔除重复脚本

这篇文章真的是好全面，还是看这个吧... mark一个