1、页面优化五大法则
1.1、精简合并
A、 html 去掉注释,回车符、无效字节可节省65K
B、 css 利用gulp等工具压缩
C、 JavaScript 利用 JSMin、YUI Compressor 工具(每个JS文件可降低26%文件大小)/采用webpack构建,压缩js代码。
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false, drop_debugger: true,drop_console: true },
sourceMap: true
})
D、 减少bundle数量
使用构建工具(webpack、rollup等)将多个文件打成一个bundle,减少下载次数。
1.2、异步
A、 使用ajax请求数据
B、 提前加载,减少网络请求等待。
C、 延迟加载,使用async/defer
D、Javascript放置body底部:避免阻塞下载
E、 CSS放到header中:避免白屏
F、 CSS避免使用 @import
1.3 、图片优化
A、 图片地图
B、 CSS Sprite
.no3 {
background : transparent url( ../images/no713.jpg );
background-position : 0 -30px;
width : 15px;
height: 15px;
}
C、 Base64
inline images: 图片内嵌到网页文本中。
.sample-inline-png {
padding-left: 20px;
background: white;
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMA
AAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrA
z3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk
SuQmCC') no-repeat scroll left top; }
D、 Compress(压缩)
图像种类:PNG8, PNG16, PNG256,
- 使用小且可缓存的favicon
网站图标文件favicon.ico,不管你服务器有还是没有,浏览器都会去尝试请求这个图标。所以我们要确保这个图标: 存在; 文件尽量小,最好小于1k; 设置一个长的过期时间。
1.4 、 网络优化
A、多域名增加并行下载数,提升整站下载时间
B、 广告与页面分离
D、开启Gzip压缩
通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。
gzip比deflate更高效,主流服务器都有相应的压缩支持模块。
E、 减少Cookie大小
Cookie被用来做认证或个性化设置,其信息被包含在http报文头中,对于cookie
我们要注意以下几点,来提高请求的响应速度:
去除没有必要的cookie,如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别,没有必要情况下不要影响到sub-domain
设置合适的过期时间,比较长的过期时间可以提高响应速度。
F、 添加Expires或Cache-Control响应头
Cache-Control
cache-control: max-age=31536000
cache-control: private
cache-control: no-cache
Expires
expires: Sat, 04 Dec 2010 01:00:43 GMT
修订文件名,将版本号加入其中,并设置长久的Expires
网友评论