⑴ 已经启用GZIP压缩,但是GOOGLE提示没有压缩JS和CSS,这是神马毛病!求高手指点谜径
js、css要手动压缩,gzip只是网页输出时的一种压缩。
⑵ gzip压缩实践
为提高网页加载速度,启用 gzip 缩减资源的大小是非常常见的手段。现代浏览器均支持 gzip 压缩,并会为HTTP请求自动协商此类压缩。
本文将对 gzip 的实践和原理做一个简单的总结。
web服务器在接收到浏览器的请求之后,会检查浏览器可以接受哪些压缩方法,详情可见下图。
浏览器在请求头中会带上 Accept-Encoding 这个参数来说明自己支持哪些内容编码方式。
而服务端返回的 Response Headers 中则存在一个 Content-Encoding ,用来说明数据的压缩方法。
几乎所有的浏览器都已经支持了 gzip ,并且有请求头的验证,所以基本不需要担心兼容相关的问题。
压缩前后的体积前后差异,可以在控制台中看到。可以说,对于js、css文件的压缩率还是比较可观的。
经过这种方式的配置,在服务端响应请求的时候会对文件进行压缩,之后返回压缩过后的内容。不过压缩这一过程多多少少会占用一些服务端的性能,具体压缩的程度,也就是 gzip_comp_level 设置的值也会影响到占用性能的多少,接下来我们来看一些网上搜集到的数据,了解不同值的设置对文件大小和CPU占用的影响。
可以看到,压缩级别从0到1时,文件大小明显减小,CPU消耗略微上涨。而在之后文件减小的速率明显放缓,在达到了5之后继续增加压缩级别,文件的体积也几乎没有缩小,但CPU消耗却有较为明显的上涨。
根据结论可以看出,如果是在服务端使用 gzip 压缩的话,考虑到性能和压缩率的取舍,将压缩级别设置为一个较低的值,比如2之类的,是比较合理的。
我们也可以选择在打包构建项目的时候就对文件进行gzip压缩
这边以打包一个 webpack 的前端项目为例
运行构建命令后可以看到,在生成 .js 和 .css 的同时还生成了对应的 .gz 文件。
在这种方式的压缩中,我们完全可以把压缩等级设置为一个比较高的值(默认),毕竟只是略微影响打包的时间,却能获取一个更小的体积的包,还是比较值得的。
以 nginx 为例,静态压缩需要使用 http_gzip_static_mole 这个模块,这个模块不是默认的,应使用 --with-http_gzip_static_mole 的配置参数启用它
之后再配置中添加
这样便可开启静态压缩。
需要注意以下几点:
⑶ 如何开启gzip压缩方法大全
IIS6.0启用Gzip压缩的方法:
1、新建Web服务扩展(如下图)
dll路径:“c:windowssystem32inetsrvgzip.dll”,然后启用。
2、网站服务中开启HTTP压缩支持(如下图)
临时目录需要给IIS用户读写权限。
3、修改IIS配置文件MetaBase.xml
文件路径:“c:windowssystem32inetsrv”(请先备份至他处),打开后搜索“HcDynamicCompressionLevel”,并修改(确定已备份)“Compression/deflate”和“Compression/gzip”两个片段的内容。下面的图n和图b所修改的内容用意是将js、css和php加入到压缩的范畴,数字9代表压缩等级。
(图n)
(图b)
4、重启IIS服务使之生效
——————————————————分分割割—————————————————
Apache启用Gzip压缩的方法:
1、开启模块并添加配置项目
a、vi /etc/httpd/conf/httpd.conf
b、查找LoadMole (/LoadMole),加入“LoadMole deflate_mole moles/mod_deflate.so”这行
c、添加配置项目(下段内容)
复制代码代码如下:
<IfMole mod_deflate.c>
# 压缩等级 9
DeflateCompressionLevel 9
# 压缩类型 html、xml、php、css、js
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
AddOutputFilter DEFLATE js css
</IfMole>
2、重启apache使之生效
service httpd start
——————————————————分分割割—————————————————
检测是否支持Gzip
END
注意事项
1. 在编辑MetaBase.xml前需要停止IIS,可以使用 net stop iisadmin
2. 修改完成后开启iisadmin服务,并执行iisreset命令
关于SEO的测试
压缩是否对SEO有影响,经测试,开启后仍然可以被很好的收录。
⑷ 用gzip对js文件和css文件进行压缩,有谁做过,
你直接在服务器端开启页面压缩就好了啊,这样传到浏览器的数据时压缩之后的数据
⑸ 手动压缩js,css文件和gzip压缩的区别
所谓的手动/自动压缩js、css一般是将js的变量名变短,js和css的无关空格删除等
gzip压缩是将文件通过压缩算法进行的一种无损压缩
举个简单的例子:
手动压缩相当于把代码用最精简的方式写出来(变量都用一个字母,去掉空格换行,一些写法换成更短的等价写法)
而gzip是相当于把文件打包成压缩文件
⑹ 百度js和css合并压缩是如何做的
简单来说是通过插件实现,当然现在淘宝出的服务器(nginx修改版)自带有这个功能。 通过一个url地址里写上每个js或者css 路径,然后插件通过路径将js/css 进行gzip形式压缩,最后组合成一个文件输出。你能看到的输出格式是php后缀,但是输出文件的表头是js/CSS 这样浏览器也就当是js/css来解析了。
合并代码工具我推荐minify (PHP),这个比较早,也很简单。
压缩的话网上有很多地方都提供在线压缩
简单说说 JS压缩:
1. 长变量变量名 压缩为短变量名,去空格,去注释
2. 可以将 new Array() 改写为 [], new Object 改写为{} 云云
3. 使用eval, 关键词等等 的复杂逻辑 也可以压缩
这样处理过后,如果觉得还是太大了,还可以采用服务端的gzip压缩传输
⑺ 如何用PHP实现页面的GZIP压缩输出
第一步,你需要对php的设置如下:
php.ini: output_buffering = Off output_handler = ob_gzhandler zlib.output_compression = Off zlib.output_compression_level = -1
第二步,你需要在apache下增加如下设置:
AddOutputFilter DEFLATE html php js css
这样就可以对html php js css进行gzip压缩了。
第三步,你需要使用如下php压缩html并输出到客户端的函数:
function compress_html($string) { return ltrim(rtrim(preg_replace(array("/> *([^ ]*) *</","//","'/\*[^*]*\*/'","/\r\n/","/\n/","/\t/",'/>[ ]+</'), array(">\\1<",'','','','','','><'),$string))); }
上面的这个正则表达式,很强大的哦,经过我本人亲自测试可使用。
通过以上方法,你就可以将你的html代码压缩然后输出给客户端了。不信你可以查看源代码,就是一行,网页瞬间压缩很小。
⑻ 将Js和CSS文件压缩成min文件
个人建议从几个方面入手:
1、在服务器上启用GZIP压缩,添加css等静态文件等。
2、把主页、内容页的CSS分开写,公共部分单独用一个CSS,这样就可以减少CSS的大小。
3、优化CSS语法,并可以使用工具压缩,但要注意用多个浏览器测试。
4、将一些JS调用尽量放到网页底部
⑼ 如何压缩网站里的css 和js文件 来减少空间的使用率,是网站打开速度加快
你好,个人建议从几个方面入手:
1、在服务器上启用GZIP压缩,添加css等静态文件等。
2、把主页、内容页的CSS分开写,公共部分单独用一个CSS,这样就可以减少CSS的大小。
3、优化CSS语法,并可以使用工具压缩,但要注意用多个浏览器测试。
4、将一些JS调用尽量放到网页底部
⑽ 如何对前端性能进行优化
前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发,最常遇见的前端优化问题。前端性能进行优化规则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。
前端性能进行优化都有哪些规则
减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发,包括图片
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。
12. 避免跳转
有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问http:// .com时,实际上返回的是一个包含301代码的跳转,它指向的是http:// .com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转, 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。
13. 删除重复的JS和CSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。
18. 避免404
比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面别塞那么多东西,因为每个请求都得带着他跑。
20. 使用无cookie的域
比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
那就不用用一张500*500的大尺寸图片,影响加载
23. 缩小favicon.ico并缓存