如何制作快速加载的HTML页面

一个好的页面不仅要给访客提供一个更有效的站点,同时也需要降低你的服务器压力和网络请求。对于那些高访问量的站点来说尤为关键。

页面加载性能的优化不仅是针对那些带宽有限的拨号上网用户需要看的内容,对于网速快的访客来说,性能的提升同样是一种良好的用户体验。

​​​​1.减小页面的大小

在页面加载中,页面的大小至今扮演着非常重要的因素。减小页面的大小可以通过排除不必要空格注释动态内嵌脚本,和放入外部文件的 CSS 等在页面结构中很小的改变都能够提高下载性能。

2.最小化文件数量

减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量。

根据其缓存设置,浏览器可能会为每个 CSS/JavaScript/image 文件发送一个 If-Modified-Since 请求给网络服务器,以查询这些文件自上次加载后是否有被修改。

通过减少链接至网页的文件数量,你可以减少发送这些请求以及接收它们回应的时间。

在查询引用文件是否被修改上花费太多时间会延迟网页的初始化显示,因为在渲染页面之前浏览器必须确认每个 CSS 或 JavaScript 文件的修改时间。

3.减少域名查找

每个独立的域名都会消耗DNS查找的时间,页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。

扫描二维码关注公众号,回复: 5732688 查看本文章

这条可能算不上实用,但总之,在你的页面中尽量少的使用来自不同域名的资源链接。

4.缓存重用的内容

确保任何内容可以被缓存,并且拥有一个合理的有效期。

特别要注意 Last-Modified header 部分,它会让页面高效的缓存。 自上次修改之后,这部分 header 指示将信息传递给用户代理(要加载这些信息的文件)。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面(如.html,.css),基于上次修改的日期储存在文件系统中。至于动态页面(如.php,.aspx),便无法做到,这部分 header 也就不会被发送出去。

所以,特别是动态产生的页面,花点时间研究一下这个课题会是有益的。或许有些什么关联,无论怎样,这么做在那些不能被缓存的网页中都会节省很多的页面请求。

5.高效的排列页面组件

在页面最初显示时,会首先下载页面内容以及所需的CSS和JavaScript,这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本text,有利于在传输过程中压缩,因此给用户以更快的响应。

页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用,所以最好在初始化时关闭动态特性(disable dynamic features ),等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载,有助于提升页面加载的整体表现。

6.减少内联脚本数量

内联脚本在页面加载过程中消耗很多资源,因为解析器认为内联脚本会改变页面结构。通常,尽量少的使用内联脚本和减少用document.write()来输出内容,在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容,优于使用document.write()的传统方法。

7.使用现代CSS和合法标记

使用现代CSS减少标记(markup)的用量,可以减少对(spacer)图片的需求。在布局方面,图片通常可以用风格化的文本(text)来替代,这样会“节省”许多资源。

使用合法标记还有其它优点。首先,浏览器在解释HTML时无需做错误校正(除了一些哲理性的问题,例如,是允许用户输入格式不一致,而后再用程序“校准”或统一化呢? 还是加强约束规则,限制用户输入的格式?)。

再者,合法标记可以让那些给你的网站做预处理的工具功能最大化。例如,HTML Tidy 可以移除空白(whitespace)和可选的末尾标记(ending tags);然而,在有严重的错误标记的网页中这些工具便无法工作。

8.给内容分块

用 <div> 替代基于TABLE的布局或者将TABLE拆分为更小的TABLE,这样不必下载完整的网页内容就可以显示一小部分的TABLE。

9.指定图像和表格大小

如果浏览器可以即时决定你的照片(images)和表格(tables)宽高,它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示,还能在网页完成加载的过程中防止恼人的布局改变。因此,图片的 height 和 width 应尽可能确定下来。

表格可以使用 CSS 选择器:综合性能:

table-layout: fixed;

<col> 和 <colgroup> 元素来指定列宽。

10.合理的选择user-agent

为使页面设计得到极大提升,应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现,特别是在那些低版本的浏览器中。

理想情况下,你的页面运行的最小环境要基于现代浏览器,这个浏览器起码要支持一些相关的标准(如 html5 标准)。可以是最近版本的火狐,IE,谷歌Chrome,Opera还有Safari。

需要注意一下,这篇文章当中的许多tips都是些技术性常识,可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。

11.如果可能,使用async和defer

确保 JavaScript 脚本兼容 async 和 defer,任何时候都要尽可能使用 async,特别是当你有较多的 script 标签(script tags)时。

这样在加载 JavaScript 的哦过程中页面就不会重新绘制,否则,浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。

注意:这些特性在页面第一次加载时会有所帮助,你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南(guidelines)写出了非常优秀的 JavaScript 代码,也不必要再去修改它了。

猜你喜欢

转载自blog.csdn.net/weixin_42779969/article/details/81978340