压缩JS,CSS,图片
合并图片
使用gzip
减少请求数
缓存
CSS放顶部,JS放底部
减少cookie
使用CDN
尽量少使用iframe
压缩JS,CSS
YUICompressor 使用
Google Closure压缩JS和CSS
YUICompressor使用方法:
引用
语法: java -jar yuicompressor-x.y.z.jar [options] [input file]
通用参数:
-h, –help 显示帮助信息
–type 指定输入文件的文件类型
–charset 指定读取输入文件使用的编码
–line-break
在指定的列后插入一个 line-bread 符号
-v, –verbose 显示info和warn级别的信息
-o 指定输出文件。默认输出是控制台。
JavaScript专用参数:
–nomunge 只压缩, 不对局部变量进行混淆。
–preserve-semi 保留所有的分号。
–disable-optimizations 禁止优化。
引用
使用示例:java -jar yuicompressor-2.4.2.jar -o d:/temp/hello_min.js hello.js
压缩图片
图片是网站流量的杀手。图片压缩的方法有:有损压缩,格式转换,大小改变。
目前使用较多的是:
ImageMagick
使用gzip
现代浏览器,大部分支持gzip解压缩,gzip压缩能减少70%左右的流量。
在ubuntu中,apache2默认是开启gzip压缩的,ubuntu apache2使用gzip配置方法:
mods-enabled/deflate.conf文件
引用
# these are known to be safe with MSIE 6
AddOutputFilterByType DEFLATE text/html text/plain text/xml
# everything else may cause problems with MSIE 6
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
AddOutputFilterByType DEFLATE application/rss+xml
mods-enabled/deflate.load文件
引用
LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so
减少请求数
IE6并发请求数是2个,IE8,Chrome和Firefox等并发请求数是4-8个。
合并JS文件,合并CSS文本,将多个小图合并成大图,能有效的减少浏览器请求,达到加快浏览器响应速度。
CSS放顶部,JS放底部
一个很好的习惯是CSS放在顶部,使页面样式能在页面尽可能早的显示。
JS放在底部可以在页面样式显示后,才进行JS的装载和执行,优先用户看到界面,提升用户体验
减少cookie
图片和JS文件使用不同域名,不同域名请求默认不带cookie,能有效的减少cookie在HTTP请求间的传输量。
比如html页面为:http://www.ingchat.com/demo.html,页面中的图片链接(或者图片链接)可以使用为http://www.gtingchat.com/demo.png,图片请求将不带cookie
使用CDN技术
CDN技术
- 大小: 332 KB
分享到:
相关推荐
雅虎团队经验-网站页面性能优化的34条黄金守则
网站页面性能优化的34条黄金守则--雅虎团队经验分享,一定受益菲浅。
汽车之家车服务前端团队王诗扬在2017APMcon中国应用性能管理大会上做了题为《基于VUE的单页面性能优化实践》的分享,就H5性能优化意义,前后端分离,服务端渲染做了深入的分析。
页面性能优化
雅虎团队经验:网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少...
雅虎网站页面性能优化34条.docx 雅虎网站页面性能优化34条.docx
雅虎网站页面性能优化(全部),个人搜集,比较全面
介绍浏览器性能优化的一些方法,包括页面加载,HTTP响应.
让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看
页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 2、减少DNS查找次数 3、避免跳转 4、可缓存的AJAX 5、推迟加载内容 6、预加载 7、减少DOM元素数量 8、根据域名划分页面内容 9、使iframe的数量最小 10、不要...
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。这篇文章主要介绍了页面性能优化原生JS实现图片懒加载 ,需要的朋友可以参考下
随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。首先,为什么要最移动页面进行优化?纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越...
针对前端页面的一系列的优化, 前端性能优化原理与实践 · 小册
前端页面加载性能
如何判断网页的页面性能一、页面性能测试概述页面性能测试则是针对于页面性能优化而开展的一种性能测试,目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议 一、页面...
让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
让你页面速度飞起来 Web前端性能优化 从构建、浏览器渲染、缓存、PWA、服务端优化等多方面,梳理前端性能优化的技术点、综合分析技术的原理,根据不同的业务场景选择合适的性能优化点进行应用,最终为你的网站带来...
主要针对jsp,html,js等页面开发性能优化
第三章:页面渲染架构设计与性能优化.pdf
Keepfast 是一个性能分析工具,能够分析网站的资源构建性能和页面性能,生成性能报告并提供优化建议,让性能监控更方便。分析并生成构建性能报告,可直观的对比两个版本的构建性能,以便尽早发现构建性能问题,基于 ...