• 合并css 合并图片 合并js


    1:合并css

     

    如:index.html 中的代码

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
                <link rel="stylesheet" href="css/main.css">

             //在index.html中只引入一个main.css文件,其他的css文件使用@import url('样式文件路径');引入到main.css文件头部
             如:main.css文件中的代码

                @import url(one.css);

                @import url(tow.css);

    </head>
    <body>
    <div id="box">hello</div>

     合并css的优缺点:

    1:

    好处是,把多个样式表导入到一个样式表中,在页面里面只需要导入一个样式表即可,可以减少在页面中引入的外部css文件,减少http请求
    缺点:
    1  兼容性的差异。由于@import是CSS2.1提议的因而老的阅读器(ie5以下)不支持,@import只有在IE5以上的才力辨认。
    2  应用dom控制样式时的差异。当应用javascript控制dom去转变样式的时间,只能应用link标签,由于@import不是dom可以控制的(经测试没发现问题)

    <script src="js/1.js"></script>
    </body>
    </html>

     --------------------------------------------------------------------合并js文件--------------------------------------------------

    合并成一个文件下载,就不能充分利用浏览器多线程并行下载的好处了。

    假设有100个JS文件,每个1M,如何下载更快?
    1)合并成一个100M的文件让浏览器下载难道不会阻塞吗?
    2)生成100个虚拟域名:static0.your.com~static99.your.com
    浏览器会开大量线程同时下载,100个文件就能成功下载完成

    可见,多域名下载的性能提升是远远高于减少请求的。性能优化时,应关注高优先级的优化项;低优先的优化手段需要配合高优先的。不是简单的说,压成一个文件就一定会快的——与其这样,还不如将所有(CSS+JS+Img)流直接写 到HTML,更快呢(但也完全放弃多线程下载)。

    合并js文件的常用方法:

    1; 使用require.js 模块化按需加载js文件;

    2:使用js项目构建工具Grunt  ||YCombo 介绍

     

  • 相关阅读:
    HDU 5642 King's Order 动态规划
    HDU 5640 King's Cake GCD
    HDU 5641 King's Phone 模拟
    HDU 5299 Circles Game 博弈论 暴力
    HDU 5294 Tricks Device 网络流 最短路
    HDU 5289 Assignment rmq
    HDU 5288 OO’s Sequence 水题
    星际争霸 虚空之遗 人族5BB 操作流程
    Codeforces Beta Round #3 D. Least Cost Bracket Sequence 优先队列
    Codeforces Beta Round #3 C. Tic-tac-toe 模拟题
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7028339.html
Copyright © 2020-2023  润新知