WEB前端开发优化大全

优化一个网站的性能，首先要从前端+服务端+开发成本去考虑。

前端方面：WEB端页面是由HTML+CSS+JS（结构层+样式层+行为层）这三层构成的，所以优化从三个层次去考虑。

后端方面：服务器+带宽+浏览器缓存+资源大小

1：减少HTTP请求

原理：由于浏览器对同一个host有并行下载的限制，当HTTP请求越多时，总体下载的速度就越慢。

解决方法：

（1）使用雪碧图（css Sprites）

（2）使用图片地图

（3）合并JS和CSS文件

（4）添加HTTP Expires头

原理：为图片视频之类很少改变的资源设置长的Expires时间，这样可以直接减少HTTP请求。

如果这些资源设置了Expires头为将来的某个时间时，下次访问时间在这个设置时间之前，会直接从缓存中读取，

不会再次产生HTTP请求。

2：使用CDN内容发布网络

原理：当页面中有很多资源的时候，可以从不同的服务中去读取，同时可以提高并行下载的速度。

3：压缩组件，使用打包工具，对资源进行模块化封装以及压缩

4：将JS+CSS文件放在外部文件中引入到首页中

5：将CSS放在顶部

原理：能加快页面内容显示，并且能避免页面产生白屏。

6：将JS放在底部

原理：JS会阻塞其后面内容的呈现。

    JS会阻塞其后面内容的下载。

7：代码分离，代码解耦，避免内联css和js代码。

8：减少DNS查找

9：简洁代码并压缩

10：避免重定向

11：移除重复脚本

12：配置ETag

13：是Ajax可缓存

14：减少cookie传输

15：JS的延迟加载，异步加载，defer,async

16：减少css选择器的层级

17：代码级别优化

（1）JavaScript代码优化

a：减少对DOM的操作，使用框架或类库。因为每当操作一次DOM，浏览器就会重绘一次页面。就会消耗资源。

b：避免使用eval和function,使用eval和function构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行的代码。

这种操作很消耗资源，比简单的函数调用慢100倍以上。而且也不利于压缩工具执行压缩。

c：减少闭包的使用。

闭包的作用是读取函数中的变量和将函数中的变量的值存储于内存中。

闭包可以在函数外部改变函数中的变量的值，如果你把函数作为对象，闭包作为方法，局部变量作为私有属性使用，则会改变变量的值；

闭包还会把函数中的变量的值存储于内存中，对内存消耗很大，所以滥用闭包的结果会影响网页的性能，IE中可能会导致内存泄露。

d：代码压缩

e：代码写在外部文件中

f：代码写在底部，防止其阻塞页面的渲染。