Keep on going, never give up.

如何加快网页载入速度

本文介绍影响网页载入速度的相关开发知识,供代码开发人员参考,由于网站服务器的响应、网络速度以及访客的浏览器设置等因素也会影响网页载入,但这往往是既定事实,作为开发人员基本没有可操作空间,我们要做的就是把代码优化好,尽量减少访客的等待时间。服务器放国外网站的就不说了,国外服务器的访问速度是由“敏=感=词”决定的。

一、精简源码提高效率

源码尽量少的意思就是源码需尽量优化:

  • 去掉冗余的重复的内容,比如无用的注释、无用的多级嵌套等等
  • 去掉多余的HTML 属性标签,比如很多类似width=""空标签
  • 去掉很少执行但又极浪费时间的实时运算

二、静态化只是缩减了服务响应时间

WordPress的响应速度一直都是非常慢,主要原因是WordPress系统太过庞大、兼容太好、插件太多,再加上页面元素都是实时运算后组合出来的,所以,响应速度要么只能代码小改,要么只能从服务器等其它方面进行改善,当然静态化(不是伪静态化)也是个非常有用的选项,静态化的实质就是减少服务器的运算时间,静态化对很多流行的BLOG、CMS系统而言,几乎是个必选项。

三、JS调用越多载入越慢

目前这个时代,JS在网页编程方面几乎无法替代,但我们应当控制JS使用,至少应了解当前的JS文件大小、JS函数可能的执行逻辑和时间,对非主要内容,可使用异步载入方式。

比如最常用的JQuery,新版本的js代码超过了70多KB,而老版本则只有20多KB,减少不必要的升级,或是删减不需要的功能函数。

不同的JS函数执行速度也不同,甚至是不同的函数在不同的浏览器执行优先级也不同。

四、控制同一页面的文件引用

载入页面的文件引用包含有:JS文件、图片文件、CSS文件、FLASH视频、AJAX引用等内容。浏览器在这些内容载入完成之前,并不知道当前元素容器的真实位置,所以,把大的图片切割分解,可以让浏览器部分渲染工作提前,提升访客体验。

减少文件引用,并允许浏览器缓存也是个很好的策略。

<meta http-equiv="cache-control" content="public" />

五、减少标签嵌套、减少动态运算

减少嵌套就是减少浏览器的渲染等待时间,让浏览器获取最小的代码后就能开启渲染工作,而不是等待载入完成后才能渲染。比如把所有内容放入单个table等都是不利于浏览器解析。

减少动态运算也是面向浏览器渲染而言,尽量使用绝对尺寸、减少动态运算,甚至是经过复杂运算后的尺寸。

另外,如果域名这一块可以动手,建议把图片、CSS、JS等分配到跟HTML/PHP/ASP不同的CNAME地址下,因为浏览器在处理载入时,同一地址均有并发连接数限制(一般是6-8个)。多个CNAME可部分规避这个限制,最大化同时载入线程。当然,这不属于本文的内容了。

网页载入在线测试:

http://www.webpagetest.org/

https://getfirebug.com/network

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.