前端开发性能优化方案-14条

1、减少http请求数量。

单独得一个图片，js,css都是一个请求，将同类合并可以有效得减少请求个数。

2、使用CDN(内容分发网络) 

需要新增服务器减少请求得站点个数（靠钱解决需要买服务器）。

 

3、添加Expire/Cache-Control头 

Expire 头的内容是一个 时间值，值就是资源在本地的过期时间、存在本地。

在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。

 

4、启用Gzip压缩

文件压缩后变小，提升文件的传输速度。

 

5、将css放在页面顶部 head标签中加载。

为了提高浏览器的渲染性能，

避免出现空白页面或散错的问题。

 

6、将script 放在页面最下面。

会先将页面内容呈现出来，避免了script报错页面空白等 问题，不会让用户等太久。

 

7、避免在css中使用Expressions(表达式)

Css 表达式存在会导致频繁计算，严重影响性能及用户体验。

8、将 javascript 和css 都放到外部文件中

        写在页面内的情况 ：

        a、当样式或控制只应用一个页面时，写在页面内的好处大于提取出来。

        b、不经常被访问的

        c、脚本和样式很少

 

9、减少DNS查询

查询需要时间，在查询时间内浏览器就什么都干不了。如果有很多的查找过程对打开浏览器有很大的性能影响，所以需要对这个过程进行缓存，缓存之后就能减少这种查找过程。目前浏览器都自带有缓存功能，被缓存后浏览器会直接从缓存里面查找，节省时间。

通过配置多个域名存放不同的资源，但不是越多越好。

利用多个域名来存储网站资源优点：

     1、CDN缓存更方便。（用户就近获取资源）。

     2、突破浏览器并发限制。

同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。大多数浏览器的 并发数量控制在6以内。有些资源的请求时间很长，因而会阻塞其他资源的请求，因此，对于一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。

        a.节约cookie带宽

        b.节约主域名的连接数，优化页面相应速度

        c.防止不必要的安全问题。

     3、缺点：

过多的域名会使DNS解析负担加重，因此一般控制在2-4个。

 

10、最小化javascript 和css

减小文件体积，

a、去除不必要的空白符，格式符，注释符。

b、简写方法名、参数名压缩js脚本。

c、在正式上线项目前，将javascript和css都进行压缩，使线上版本是最轻量级的，大幅提升网站性能。

 

11、避免重定向 ，找到了告知被转移再次请求，增加了浏览器的 往返次数。

永久重定向（301）和临时重定向（302），这对浏览器来说差异不大，都需要再次请求新地址，从而降低网站加载速度。

但是，搜索引擎会定时爬网络，遇到301会智能地只收录新地址，但是遇到302我们还是得从旧地址跳到新地址。

 

12、移除重复的脚本。

重复引用的脚本会重复执行,导致逻辑错误并延长页面加载时间。。

 

13、配置实体标签（ETag）

实体标签ETag，即是Entity Tag，需要服务器端配置。若用户请求时，浏览器和服务器的ETag一致，则说明资源未修改（304），则可以直接使用本地缓存的资源，减少传输资源带来的网页加载延迟。

不同服务器（IIS、Apache、Nginx）配置ETag的方式不一样。

 

14、使用ajax缓存

 

最后，推荐网站性能优化工具Yslow插件使用。

需要配合Firefox浏览器，同时依赖Firebug 插件，对自己写的网站进行具体地性能分析，生成性能优化报告。