前端性能优化

前端

一、CSS

1.将样式表置顶：

样式表放在Head标签中可以使浏览器逐步加载、渲染已下载的网页内容，如果放在底部，浏览器会拒绝渲染已经下载的网页，在没有完全下载之前只会显示白屏。

2.避免一些使用方法：

避免CSS表达式（用于IE5-IE8），用代替@import，避免使用Filters(也是IE5-IE8)

二、JavaScript

1.将脚本置底：

把脚本置底可以让网页渲染所需要的内容尽快加载显示给用户

2.使用外部JavaScript和CSS文件

使用外部JavaScript和CSS文件可以使这些文件被浏览器缓存，从而实现在不同的请求内容之间重用（不同页面利用同一脚本）。

3.精简JavaScript和CSS

1.精简就是将JavaScript和CSS中的空格和注释全去掉
2.精简工具：JS Compressors和CSS compressors（用gulp里的相关插件可以实现）

4.减少DOM访问

缓存已经访问的元素，避免通过JavaScript修复layout

5.使用事件代理，尽量减少事件触发

三、图片

1.优化图片

尝试把GIF格式换成PNG格式，对所有的PNG图片使用PNG优化工具

2.优化CSS Sprite

1.Sprite中水平排列图片而不垂直排列，因为垂直排列会增加文件大小
2.Sprite中把颜色较近的组合在一起可以降低颜色数
3.不要在Sprite的图像中留较大空隙

3.使用小且可缓存的favicon.ico

1.favicon.ico是网站图标文件，就是用于收藏的图片，浏览器调用favicon的原理是首先在网页所在的目录寻找favicon.ico文件，如果没有就去网站的根目录下寻找，所以最简单的方法就是将制作好的favicon文件命名为favicon.ico，然后上传到网站的根目录下
2.优化：文件尽量小，最好小于1K，同时设置一个较长的缓存过期（服务器或者浏览器）时间

四、网页内容

1.减少http请求次数

浏览器会花费80%的时间获取外部元件，包括脚本、样式表、图像等，只有20%的时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。

1.捆绑文件：利用现成的库把多个脚本文件或者样式表文件捆绑成一个文件，减少下载次数
2.CSS Sprites：把多个图片拼成一副图片

2.减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain（域） (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

3.减少DOM元素的数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，用：

document.getElementsByTagName('*').length

可以知道网页元素的数量

参考：
http://www.w3cfuns.com/article-1283-1.html