咨询邮箱 咨询邮箱:mail@yaanidc.com 咨询热线 咨询热线:13795856919 微博 微信
;
对于HTML5的页面来说,浏览器应该比访客更快一些
发表日期:2016-04-19 14:04:40 文章编辑:网络 浏览次数: 422

自2014年10月29日HTML5标准正式制定完成后,主流的web前端趋势早已经发生了翻天覆地的变化,甚至在这之前的时日里,就已经有许 多站在前沿的网站和技术人员在尝试这些新特性了。但是对于面向大众化或是传统行业网站来说,新特性往往并不能够得到很好地应用,原因往往在于对于新特性兼 容性与稳定性的隐忧,尤其是在主流浏览器厂商对HTML5的遵守标准态度不一致的情况下,情况尤甚。

  但是,HTML5的新特性中有一些在运用得当的前期下可以起到非常好的效果的。以笔者所在的医疗行业为例,往往对于界面设计的美观度有着执着地 追求,而网页的加载速度经常被忽视,除了增加服务器的带宽、静态资源的CDN缓存等也别无他法。本文要说的,就是在医疗行业的网站上,运用HTML5的新 特性,提升前端页面的响应速度,正如我在标题中写的那样,浏览器应该比访客更快一些,再快一些。

  对于如何处理前端页面速度提升瓶颈的问题,HTML5给出了两个非常有用的属性。以往我们都只是把目光投在了服务器的运行速度、带宽资源与网站响应速度之上,认为域名的DNS解析对于网站来说的影响可以忽略不计,其实不然。

  事实上是这样的,每一次页面的访问都会增加DNS查询次数,既然页面的访问不能避免,那么DNS查询也是必须存在的,所以我们可以推动时间轴,让DNS查询发生在其他页面访问发生之前,从而减少同一时间多域名的DNS解析查询次数所占用的时间。

  dns-prefetch属性:我们可以通过使用类似的标签来进行DNS的预加载。简单的几行代码,可以让访客在打开其他页面的时候,显著提高页面的解析响应速度。

  在MDN官方网站上对于dns-prefetch有这样一段阐述,笔者以粗斜线标注了其中的两个重点。

  DNS requests are very small in terms of bandwidth, but latency can be

  quite high, especially on mobile networks. By speculatively

  prefetching DNS results, latency when, for example, the user clicks a

  link can be reduced significantly (on the order of a second, in some

  cases).

  The implementation of this prefetching in Firefox allows domain name

  resolution to occur in parallel with (instead of in serial with) the

  fetching of actual page content. By doing this, the high latency

  domain name resolution process doesn’t cause delays during the process

  of fetching content.

  重点是什么?一、尤其是移动网络;二、平行的。

  为什么我屡次强调其他页面?浏览器如何处理dns-prefetch属性的网页?当访客打开网站的某一个网页的时候,浏览器发现了在head标 签中的dns-prefetch,那么在访客浏览当前的时候,浏览器就预先将dns-prefetch属性中的其他域名缓存好,等待用户访问其他页面的时 候,被缓存的其他域名就会被自动地获取。

  在医疗行业的网站中,笔者推荐的三类应用场景:

  分享类插件。比如百度分享,可以来缓存百度的二级或三级域名;

  网页窗口继承。比如商务通或快商通等对话软件;

  静态资源的CDN。网站的静态文件使用了CDN加速的情况可以预加载CDN域名;

  dns-prefetch在不同浏览器的兼容性:

  Mozilla Firefox、Google Chrome、Chromium支持最好;

  ie8及其以下浏览器不支持;

  dns-prefetch用法:

  建议放置在网页的顶端,一般放在设置编码后;

服务器端控制dns-prefetch是否开启,HTTP头部信息中设置x-dns-prefetch-control为off;或是在单个网页中使用。

  与在结果上并不是完全相同。后者会强制预加载网站的所有域名,即便是那些域名不会使用在访客所浏览的网页中,所以一般推荐带有http:的写法;

  dns-prefetch可能造成的灾难:

  如果你并不能很好的理解http协议的话,建议不要使用dns-prefetch来预加载自己网站的其他二级域名,重复的预加载会造成DNS过多地重复查询,反而弄巧成拙。
 


在线客服