加快网页载入速度！影响网页打开速度的几大因素！让你的页面打开速度飞快-Web 前端优化技术

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

一、精简源码提高效率

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

去掉冗余的重复的内容，比如无用的注释、无用的多级嵌套等等

去掉多余的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可部分规避这个限制，最大化同时载入线程。当然，这不属于本文的内容了。

赏 支付宝打赏 微信打赏