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 介绍

合并css 合并图片 合并js的更多相关文章

  1. selenium模块无头化浏览器 设置不加载页面css、图片、js

    下面代码基于火狐浏览器,谷歌浏览器代码类似 from selenium import webdriver from selenium.webdriver.firefox.options import ...

  2. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  3. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  4. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  5. php js css加载合并函数 宋正河整理

    <?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true);   ...

  6. 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

    好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

  7. 编写gulpfile.js文件：压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  8. CSS的样式合并与模块化

    by zhangxinxu from http://www.zhangxinxu.com 原文地址:http://www.zhangxinxu.com/wordpress/?p=931 一.引言 本文 ...

  9. gulp完成javascript压缩合并,css压缩

    最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...

随机推荐

  1. weka实际操作--构建分类、回归模型

    weka提供了几种处理数据的方式,其中分类和回归是平时用到最多的,也是非常容易理解的,分类就是在已有的数据基础上学习出一个分类函数或者构造出一个分类模型.这个函数或模型能够把数据集中地映射到某个给定的 ...

  2. [Bzoj 2547] [Ctsc2002] 玩具兵

    2547: [Ctsc2002]玩具兵 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 317  Solved: 152[Submit][Status] ...

  3. [HAOI2016] 放棋子及错排问题

    题目 Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在这个矩阵上放N枚棋子(障碍的位置不能放棋子),要求你放N个棋子也满足 ...

  4. 桶排序/基数排序(Radix Sort)

    说基数排序之前,我们先说桶排序: 基本思想:是将阵列分到有限数量的桶子里.每个桶子再个别排序(有可能再使用别的排序算法或是以递回方式继续使用桶排序进行排序).桶排序是鸽巢排序的一种归纳结果.当要被排序 ...

  5. Vmware虚拟机不能使用键盘的解决方法

    有个笔记本thinkpad T440要重装系统,但又怕前面的资料丢失,因此打算直接将整个物理机迁移到VCenter 6.5上去,比GHOST什么的方便多了,利用Vmware Convert工具直接在线 ...

  6. 简单爬虫 -- 以爬取NASA AOD数据（TIFF文件）为例

    目录: 网站分析 爬取下载链接 爬取TIFF图片 1.网站分析 主页面:https://neo.sci.gsfc.nasa.gov/view.php?datasetId=MYDAL2_M_AER_OD ...

  7. Matlab绘图基础——给图像配文字说明（text对象）

      text对象 (1)text(x坐标,y坐标,'string')在图形中指定位置(x,y)显示字符串string.(2)Editing有效值为on/off,off时,用户在执行GUI操作时无法直接 ...

  8. RabbitMQ 发布订阅持久化

    RabbitMQ是一种重要的消息队列中间件,在生产环境中,稳定是第一考虑.RabbitMQ厂家也深知开发者的声音,稳定.可靠是第一考虑,为了消息传输的可靠性传输,RabbitMQ提供了多种途径的消息持 ...

  9. [学习笔记] 模拟退火 (Simulated Annealing)

    真没想到这东西真的在考场上用到了...顺便水篇blog以示诈尸好了(逃 模拟退火算法 模拟退火是一种随机化算法, 用于求函数的极值qwq 比如给出一个问题, 我们要求最优解的值, 但是可能的方案数量极 ...

  10. qt中控件的使用函数

    1.Text Edit编辑框 //将编辑框中的内容转化成Utf8编码 ui->textEdit->toPlainText().toUtf8(); 2.Combo Box下拉框的应用 (1) ...