提升网站访问速度的方法汇总

如下方法都有在公司实际项目中应用，的确可以提高客户端体验和访问速度。

一、建议客户端使用Chrome或高版本IE浏览器；

二、可以实现静态化的页面尽可能在服务器端保存静态页面，访问动态页面确定会比静态页面慢。

三、减小HTTP请求

     1）合并压缩js、css，可使用前端自动化构建工具。

        例如：grunt（使用说明：http://www.cnblogs.com/wangfupeng1988/p/4561993.html）、gulp 、

                很不错的google在线js压缩工具：http://closure-compiler.appspot.com/home

        

    2） 使用精灵图，将一些小图标作成一张图片，再使用CSS进行定位。

    3） 使用Iconfont，优势占用资源小，能够和字体同样设置大小和颜色。

          推荐两个免费的iconfont下载地址：http://www.flaticon.com   http://www.iconfont.cn 

    4） 移动端页面利用CSS3(圆角、阴影、渐变、透明等)替换没必要要图片。

四、使用内容发布系统CDN

      将一些访问量较大的静态资源放在CDN服务上，另外国内各大互联网公司都有免费提供经常使用JS框架。

      例如：http://cdn.code.baidu.com/

              http://www.bootcdn.cn/

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

 

五、静态资源客户端缓存

     将静态资源（例如：图片、js、css）在客户端进行缓存，该效果很是明显，性能能够提高50%以上。

     

     IIS中设置方法：

       1）打开“HTTP响应标头”

            

       2）设置经常使用标头

            

       3）设置静态内容缓存时间

            

    Apache 设置方法：

    具体设置方法能够参照：http://www.maixj.net/wangzhan/shezhiwangyejingtaineironghuancunshijian-1187

    开启LoadModule expires_module modules/mod_expires.so模块

    而后，在httpd.conf中添加以下内容：

<IfModule mod_expires.c>
# enable expirations
ExpiresActive On
ExpiresDefault A2592000
# expire images after a month in the client's cache
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
# css/js
ExpiresByType text/css "access plus 4 weeks"
ExpiresByType text/javascript "access plus 4 weeks"
# html
ExpiresByType text/html "access plus 2 days"
</IfModule>

 

六、Link样式标签应放在Head标签中，不然IE浏览器可能加载时会白屏

七、js文件引用放在页面底部</body>标签内

八、将js和css放到外部文件中，这样经过静态文件缓存，能够有效减小html页面的大小

九、资源懒加载

     经过将图片或其余资源按需加载，能够有效提升用户体验，如各大电商网站（淘宝、天猫、京东等）目前都有对图片进行按需加载，当图片即将进入可视区域则进行加载。

     如下是天猫首页部分html截图

十、JavaScript 优化

     以上几点大部分都是优化网络资源，若是当页面中须要执行大量js代码时咱们也有必要对js进行优化。

     咱们可使用 Chrome Profiles来检查js代码，从而找出比较消耗资源的代码再具体进行优化。

     Chrome开发者工具之JavaScript内存分析：http://www.open-open.com/lib/view/open1421734578984.html