zoukankan      html  css  js  c++  java
  • 前端性能优化一:合并cssjavascript

    静态资源打包,因为浏览器下载静态文件的时候是有线程数限制的:同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。为了提高性能,服务器端会把js/css合并成一个文件,再向客户端输出,这样页面能更快的展现,用户等待的时间就会减少,你留住用户的机会将会大大增加。

     
    原html代码:
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script> 在一个没有cache缓存的机器上,此代码会产生6个http请求,而且此6个htt请求不能并发执行,导致加载变慢

    合并:

    <script type="text/javascript"
    src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js,
    2.5.2/build/container/container_core-min.js,2.5.2/build/menu/menu-min.js,
    2.5.2/build/element/element-beta-min.js,2.5.2/build/button/button-min.js,
    2.5.2/build/editor/editor-beta-min.js"></script>

    优化结果:下载6个单独的js共需要190毫秒左右,而将6个js合并为一个需要30毫秒左右,耗时和一个单独的js文件差不多。

    一个没有cache缓存的机器上,此代码会仅产生1个http请求,虽然下载的总字节数没有变,但是将减少了浏览器和服务器之间的http请求次数,相应减少了http请求的通信量和http响应的通信量。

  • 相关阅读:
    BeautifulSoup 安装使用
    用Mediawiki做百科网站资源大参考
    ubutun 下webalizer 分析Apache日志
    网站流量统计系统 phpMyVisites
    mysql的root密码忘记解决方
    mrtg监控网络流量简单配置
    CentOS 6.4下Squid代理服务器的安装与配置,反向代理
    linux 查看文件系统类型
    JAVA多媒体编程入门(图像部分)
    log4net使用具体解释
  • 原文地址:https://www.cnblogs.com/xyptechnology/p/11719636.html
Copyright © 2011-2022 走看看