实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)

  Web性能优化最佳实践中最重要的一条是减少HTTP请求。而减少HTTP请求的最主要的方式就是,合并并压缩JavaScript和CSS文件。

  关于编写css时,我们应注意通过一些细节来控制css文件的大小,比如:全局样式、继承样式、缩写样式,空格、注释等;同时你也可以通过在线工具对你的css文件进行压缩,来减少css文件的大小,但压缩后的css文件在可维护性、识别性方面变的特别弱。但更复杂的情况是,如果你的页面里面引用了多个css、多个js文件时就可能处理不好。

多个css、多个js文件进行自动合并、压缩的原理:你的网站引用了a.css和b.css两个css文件,php或javascrip程序则将a.css和b.css自动合并、压缩成c.css文件。

这样做有两大好处

1、页面加载的时候只请求程序合并压缩后的c.css文件,这就减少了http对css文件的请求次数!

2、不用对a.css和b.css进行压缩,保持了a.css和b.css的易编辑性、易识别性。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-09 15:34:27

实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)的相关文章

springMvc整合Freemarker引入CSS,JS文件404的问题

在spring webmvcjar包中有个spring.ftl的文件 如下图: 你可以把他拷出来,放到你的目录下,也可以不拷出来,具体的用法就是 在你的freemaker模版开头加上 <#import "spring.ftl" as spring/> 如果你烤出了spring.ftl文件,像找存在感的话,比如拷到 当前项目路径的plugins文件下 那么就加上这个路径就好了<#import "plugins/spring.ftl" as sprin

js活jQuery实现动态添加、移除css/js文件

下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function addCss(filename){ var creatHead = $('head'); creatHead.append('<link rel="stylesheet" href="'+filename+'">') } // 移除css/js文件 functi

页面中引入带中文的JS文件乱码问题

1. WebConfig: ? 1 <globalization requestEncoding="gb2312" responseEncoding="gb2312" fileEncoding="gb2312"/> 2.<META http-equiv="content-type" content="text/html; charset=gb2312"> 3.<script t

在java项目中怎样利用Dom4j解析XML文件获取数据

在曾经的学习.net时常常会遇到利用配置文件来解决项目中一些须要常常变换的数据.比方数据库的连接字符串儿等.这个时候在读取配置文件的时候.我们一般会用到一个雷configuration,通过这个类来进行直接读取,能够说这是程序中直接封装好的,包含配置文件里书写的格式等等.那么,假设.想要在配置文件里写一些其它的数据,直接以XML文件的格式进行书写.这个时候在后台怎样读取XML文件里的数据呢?这里利用Dom4j来解析XML文件里连接oracle数据库的xml数据. 在使用之前,首先要在自己的项目中

在java项目中如何利用Dom4j解析XML文件获取数据

在以前的学习.net时经常会遇到利用配置文件来解决项目中一些需要经常变换的数据,比如数据库的连接字符串儿等.这个时候在读取配置文件的时候,我们通常会用到一个雷configuration,通过这个类来进行直接读取,可以说这是程序中直接封装好的,包括配置文件中书写的格式等等.那么,如果,想要在配置文件中写一些其他的数据,直接以XML文件的格式进行书写,这个时候在后台如何读取XML文件中的数据呢?这里利用Dom4j来解析XML文件中连接oracle数据库的xml数据. 在使用之前,首先要在自己的项目中

在 Java 项目中解压7Zip特殊压缩算法文件

1 问题描述 Java Web 后端下载了一个经特殊算法压缩的 zip 文件,因为不能采用 java 本身自带的解压方式,必须采用 7Zip 来解压.所以,提到了本文中在 java web 后端调用外部 7zip exe 来解压文件的问题. 2 主要实现 2.1 定义缓冲区类 class StreamGobbler extends Thread { InputStream is; String type; public StreamGobbler(InputStream is, String t

全面解析vue-cli生成的项目中使用其他库(js库、css库)

前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用.但是个人建议最好不要用了,用人家vue提供的不好嘛. 一.用vue-cli生成项目 1. vue init webpack-simple vue-jq 2. cd vue-jq 3. cnpm install 4. 使用git bash(只是为了方便) 5. package.json 中修改端口 --port 8088 6. npm run dev 二.构建项目结构,引入相关文件 目录结构

如何在vue2.0项目中引用element-ui和echart.js

1 项目中怎样添加elment-ui 和 echart.js 1.1直接在packjson 里面的 dependencies 配置 "element-ui": "^1.3.3", "echarts": "^3.5.3", 然后在npm install. 或者直接npm install element-ui --save.我如果直接npm install echart.js --save会报错.不晓得什么原因.有会用的大牛麻烦告

【JSP中引入文件】JSP中获取根路径+引用js文件

在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.get