如何优化页面【原创】

2018-01-30 10:45:22来源:http://blog.it985.com/23301.html作者:IT985博客人点击

分享
第七城市th7cn

入行将近两年的时间,再次谈谈如何优化页面


通常情况下有一下几种情况:


减少http请求
压缩css、js、images文件
使用图片精灵
图片原始大小放入html。
使用小且可缓存的ico

减少http请求
捆绑文件:将多个文件放在一起合成一个文件(注意合成一个文件的大小,如果过大也不利于页面加载,会导致下载网页时间过长)
CSS Sprites: 就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。合成图片规则:按照功能模块合成、页面合成(合成一张图的大小不宜过大,不然会导致下载图片过长)
避免页面跳转
延迟加载:将脚本放置body底部
减少DOM元素数量:网页中元素过多对网页的加载和脚本的执行都是沉重的负担,500个元素和5000个元素在加载速度上会有很大差别。想知道你的网页中有多少元素,通过在浏览器中的一条简单命令就可以算出,getElementsByTagName(‘*’).length
减少iframe数量或者避免iframe使用
避免404:404我们都不陌生,代表服务器没有找到资源,我们要特别要注意404的情况不要在我们提供的网页资源上,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。
使用CDN:再次强调第一条黄金定律,减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。
使用GET Ajax请求:浏览器在实现XMLHttpRequest POST的时候分成两步,先发header,然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据,而POST则是向服务器发送数据,所以我们使用Ajax请求数据的时候尽量通过GET来完成。
避免空的图片src:空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。
减少Cookie大小:Cookie被用来做认证或个性化设置,其信息被包含在http报文头中,对于cookie我们要注意以下几点,来提高请求的响应速度


压缩css、js、images文件

Css


将样式表置顶:经样式表(css)放在网页的HEAD中会让网页显得加载速度更快,因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要,用户不用一直等待在一个白屏上,而是可以先看已经下载的内容。 如果将样式表放在底部,浏览器会拒绝渲染已经下载的网页,因为大多数浏览器在实现时都努力避免重绘,样式表中的内容是绘制网页的关键信息,没有下载下来之前只好对不起观众了。
用代替@import:避免使用@import的原因很简单,因为它相当于将css放在网页内容底部。

Js


将脚本置底:把脚本置底
使用外部Javascirpt和CSS文件,减少请求
精简Javascript和CSS:精简就是将Javascript或CSS中的空格和注释全去掉 (两个版本,一个是未精简版(style.css)用于开发,一个是精简版(style.min.css)用于页面加载)
去除重复脚本:重复的脚本不仅浪费浏览器的下载时间,而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块,这样不仅可以避免重复脚本引入,还可以兼顾脚本依赖管理和版本管理。
减少DOM访问:通过Javascript访问DOM元素没有我们想象中快,元素多的网页尤其慢,对于Javascript对DOM的访问我们要注意
缓存已经访问过的元素
Offline更新节点然后再加回DOM Tree
避免通过Javascript修复layout

Image


优化图像:尽可能的在不影响页面的情况下降图片压缩一下大小,banner压缩24位色素,其他图片压缩8色素图片


使用图片精灵

尽可能的将多个小icon合并在同一张图,这样也可以减少http的请求,占用资源也不是过大


转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/23301.html



微信打赏


支付宝打赏


感谢您对作者ada的打赏,我们会更加努力!如果您想成为作者,请点我


第七城市th7cn

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台