Web优化中,JS的混浠压缩和CSS的普通压缩

JavaScript013

Web优化中,JS的混浠压缩和CSS的普通压缩,第1张

简单来说是通过插件实现,当然现在淘宝出的服务器(nginx修改版)自带有这个功能。 通过一个url地址里写上每个js或者css 路径,然后插件通过路径将js/css 进行gzip形式压缩,最后组合成一个文件输出。你能看到的输出格式是php后缀,但是输出文件的表头是js/CSS 这样浏览器也就当是js/css来解析了。

合并代码工具我推荐minify (PHP),这个比较早,也很简单。

压缩的话网上有很多地方都提供在线压缩

1

2

3

4

5

简单说说 JS压缩:

1. 长变量变量名 压缩为短变量名,去空格,去注释

2. 可以将 new Array() 改写为 [], new Object 改写为{} 云云

3. 使用eval, 关键词等等 的复杂逻辑 也可以压缩

这样处理过后,如果觉得还是太大了,还可以采用服务端的gzip压缩传输

最后我还想说一句,除非是那种文件以架构模块的形式大量存在,经过不同人手,没办法要这样合并在一起。反倒是有害无益。一般网站这样的合并压缩完全没必要,虽然减少了服务器请求量但是加大了初次加载量,你想一个页面一开始就加载一大堆没用的东西不是浪费吗?有人说第一次加载了缓存起来 后面的页面打开就更快了。我想说这种强盗逻辑不适合所有情况,他严重影响了网站初次打开速度,网站初次打开速度对于我这种搞电商的人来说 是致命的。用户打开网站每慢一秒一年就会损失很大一笔。 我们应该系统的有逻辑关联的来组织js/css的结构和 相互关联关系。写一个好的js/css 架构胜过你用任何插件工具优化。

提问者评价

谢谢!

1、typeof 操作符

typeof 目前能返回string,number,boolean,unfined,object,function,symbol,bigint,这八种判断类型。使用方式:typeof(表达式)和typeof 变量名,具体判断如下:

特别注意数组array的typeof 操作符判断

2、instanceof

A instanceof B 可以判断A是不是B的实例,返回一个布尔值,由构造类型判断出数据类型,目前支持数组,对象,date,function类型。

注: instanceof 后面一定要是对象类型,大小写不能写错!!!

亲测: Symbol is not a constructor

3、Object.prototype.toString.call()

通过Object下的toString.call()方法来判断,目前是最为可靠的类型检测手段,它会将当前对象转换为字符串并输出。但它也不是完美的,它无法检测用户自定义类型。 因为Object.prototype是不知道用户会创造什么类型的, 它只能检测ECMA标准中的那些 内置类型

注意, 这里的Object和function判断打印都是[object Object]。使用Object.prototype.toString.call判断Symbol报错。

4、contructor

依据 对象 的contructor判断,返回一个布尔值。

注: ===后面一定要是对象类型,大写且不能写错!!!