zoukankan      html  css  js  c++  java
  • 合并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 介绍

     

  • 相关阅读:
    高并发系统如何设计
    PHP的垃圾回收机制(开启垃圾回收机制后的优缺点是什么)
    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
    家庭洗车APP --- Androidclient开展 之 网络框架包介绍(一)
    一天JavaScript示例-判定web页面的区域
    左右margin top问题百分比值
    Ubuntu14.04设备JDK
    三层架构,四大天王——删
    MEMO:UIButton 中的图片和标题 左对齐
    HDU 3874 离线段树
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7028339.html
Copyright © 2011-2022 走看看