在以往做项目过程中,发现网站和移动端的性能优化还是比较重要的,借此总结一下我个人的经验:
1、减少http请求
这个方法大家都知道,也是最重要最有效的。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。但是请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。
减少 HTTP请求数的主要途径包括:
(1). 从设计实现层面简化页面
保持页面简洁、减少资源的使用是最直接的。
(2).合理设置HTTP缓存
缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。
(3).文件瘦身
如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。另外, CSS、 Javascript、Image都可以用相应的工具进行压缩,压缩后往往能省下不少空间。移动端的小按钮,可以采用css3的content:before 去加载小图片。
(4).CSS Sprites
网站内的小icon或者小图片尽量去做图片精灵,通过background-position来获取需要的图片。
2、引入外部js、css
因为每次页面渲染,html会被重新加载,但js、css会被浏览器缓存,所以在html页面中尽量不要写js、css了。将脚本内容在页面信息内容加载后再加载,尽可能的往后挪。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。
3、减少不必要的 HTTP跳转
对于以目录形式访问的 HTTP链接,很多人都会忽略链接最后是否带 ’/',假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了 301跳转,增加了多余请求。
4、避免重复的资源请求
这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求。
5、减少DNS查询次数
网站文件(js、css、images等)放到很多域名下, DNS 查询就会多,所以文件存放的域名尽量少。
6、缓存ajax数据
如果是请求过的ajax,我们把返回的数据存放到本地,用的时候就不发ajax了,直接拿数据来用;如果是不同的接口,更应该避免缓存,给ajax加个随机数。
7、减少使用iframe、table等这些不利于搜索引擎抓取,页面渲染也受影响,还有减少DOM元素数量。
8、避免404
如果你的网站404了以后是个空白页,用户会觉得不专业,搜索引擎抓网站也受影响,所以做一个自己网站的404指向页面吧。