zoukankan      html  css  js  c++  java
  • 提高网站访问速度的方法汇总

    以下方法都有在公司实际项目中应用,的确能够提升客户端体验和访问速度。

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

    2、能够实现静态化的页面尽量在服务器端保存静态页面,访问动态页面肯定会比静态页面慢。

    3、减少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(圆角、阴影、渐变、透明等)替换不必要图片。

    4、使用内容发布系统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>

    5、静态资源客户端缓存

         将静态资源(例如:图片、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>

    6、Link样式标签应放在Head标签中,否则IE浏览器可能加载时会白屏

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

    8、将js和css放到外部文件中,这样通过静态文件缓存,可以有效减少html页面的大小

    9、资源懒加载

         通过将图片或其他资源按需加载,可以有效提高用户体验,如各大电商网站(淘宝、天猫、京东等)目前都有对图片进行按需加载,当图片即将进入可视区域则进行加载。

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

    10、JavaScript 优化

         以上几点大部分都是优化网络资源,如果当页面中需要执行大量js代码时我们也有必要对js进行优化。

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

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

     

  • 相关阅读:
    mac 10.15.7 修改PATH
    oc 属性类型一般用法
    ubuntu解压zip文件名乱码
    telnet 退出
    docker 根据容器创建镜像
    mac android adb device 没有显示设备
    Yii2 查看所有的别名 alias
    Yii2 App Advanced 添加 .gitignore
    ubuntu 18.04 搜狗突然就提示乱码
    An error occured while deploying the file. This probably means that the app contains ARM native code and your Genymotion device cannot run ARM instructions. You should either build your native code to
  • 原文地址:https://www.cnblogs.com/rdst/p/4747786.html
Copyright © 2011-2022 走看看