合并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 介绍
合并css 合并图片 合并js的更多相关文章
- selenium模块无头化浏览器 设置不加载页面css、图片、js
下面代码基于火狐浏览器,谷歌浏览器代码类似 from selenium import webdriver from selenium.webdriver.firefox.options import ...
- gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- JS&CSS文件请求合并及压缩处理研究(三)
上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...
- php js css加载合并函数 宋正河整理
<?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true); ...
- 【css样式生成 & 图片合并压缩工具】Sprite,你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
- 编写gulpfile.js文件:压缩合并css、js
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...
- CSS的样式合并与模块化
by zhangxinxu from http://www.zhangxinxu.com 原文地址:http://www.zhangxinxu.com/wordpress/?p=931 一.引言 本文 ...
- gulp完成javascript压缩合并,css压缩
最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...
随机推荐
- 笔记:Maven 创建 Nexus 私服
首先从 http://nexus.sonatype.org/downloads/ 下载最新版本的Nexus,下载 bundle 包,不需要Web容器. windows 系统安装 目录结构说明 目录 说 ...
- es6学习笔记--promise对象
Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...
- Jenkins集成Docker镜像实现自动发布
1. 思路&流程 Jenkins集成Docker镜像实现自动发布与Jenkins发布mavne项目思路一样总体流程 为:Jenkins 拉去远端源码 -- gitl实现应用打包 -- jenk ...
- String s=new String("abc")创建了几个对象?
String str=new String("abc"); 紧接着这段代码之后的往往是这个问题,那就是这行代码究竟创建了几个String对象呢? 答案应该是1个或者2个. 1个 ...
- 杭电OJ2004——成绩转换
/*成绩转换Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- Beta阶段敏捷冲刺报告-DAY2
Beta阶段敏捷冲刺报告-DAY2 Scrum Meeting 敏捷开发日期 2017.11.3 会议时间 13:00 会议地点 微信群 参会人员 项目组全体成员 会议内容 打包问题修复, 爬虫优化, ...
- 201621123060《JAVA程序设计》第三周学习总结
1. 本周学习总结 1.1写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等. 关键词:类.方法.属性.对象.多态.继承.封装.面向对象.> 1.2 用思维导图或者Onenote或其 ...
- C语言——第四次作业
题目 题目一:计算分段函数 1.实验代码 #include <stdio.h> int main() { double x,y; scanf("%lf",&x) ...
- iOS开发UIKit框架-可视化编程-XIB
1. Interface Builder 可视化编程 1> 概述 GUI : 图形用户界面(Graphical User Interface, 简称GUI, 又称图形化界面) 是指采用图形方式显 ...
- 201621123031 《Java程序设计》第1周学习总结
作业01-Java基本概念 1.本周学习总结 1.本周学习内容:Java发展史(简述).Java语言特点.JDK .JRE .JVM .Java的开发步骤.Java开发工具. 2.关键概念之间的联系: ...