浏览器的加载顺序与页面性能优化

详情参考:浏览器的加载与页面性能优化

例子:

一:DNS:在header中添加 <link rel="dns-prefetch" href="//HOSTNAME.com"> 帮助浏览器更好地进行DNS的预解析。

淘宝首页: 预先对页面中用到的所有域名进行dns与解析设置。

二:link prefetch:

由于Web页面加载是同步模型,这意味着浏览器在执行js操作时需要将后续html的加载和解析暂停,因为js中有可能会调用 document.write来改变dom节点,很多浏览器除了html之外还会将css的加载暂停,因为js可能会获取dom节点的样式信息,这个暂停 会导致页面展现速度变慢,为了应对这个问题,Mozilla等浏览器会在执行js的同时简单解析后面的html,提取出链接地址提前下载,注意这里仅是先 下载内容,并不会开始解析和执行

这一行为还可以通过在页面中加入以下标签来提示浏览器

<link rel="prefetch" href="http://">

但这种写法目前并没有成为正式的标准,也只有Mozilla真正实现了该功能,可以看看Link prefetching FAQ

WebKit也在尝试该功能,具体实现是在HTMLLinkElement的process成员函数中,它会调用ResourceHandle::prepareForURL()函数,目前从实现看它是仅仅用做DNS预解析的,和Mozilla对这个属性的处理不一致

对于不在当前页面中的链接,如果需要预下载后续内容可以用js来实现,请参考这篇文章Preload CSS/JavaScript without execution

预下载后续内容还能做很多细致的优化,如在Velocity China
2010
中,来自腾讯的黄希彤介绍了腾讯产品中使用的交叉预下载方案,利用空闲时间段的流量来预加载,这样即提升了用户访问后续页面的速度,又不会影响到高峰期的流量,值得借鉴 

三:http:

编码识别:

页面的编码可以在http header或meta标签中指明,对于没有指明编码的页面,浏览器会根据是否设置了auto detect来进行编码识别(如在chrome中的View-Encoding菜单)

关于编码识别,Mozilla开源了其中的Mozilla Charset Detectors模块,感兴趣的可以对其进行学习

建议在http
header中指定编码,如果是在meta中指定,浏览器在得到html页面后会首先读取一部分内容,进行简单的meta标签解析来获得页面编码,如WebKit代码中的HTMLMetaCharsetParser.cpp,可以看出它的实现是查找charset属性的值,除了WebKit以外的其它浏览器也是类似的做法,这就是为何HTML5中直接使用如下的写法浏览器都支持

<meta charset="utf-8">

需要注意不设定编码会导致不可预测的问题,应尽可能做到明确指定 

如淘宝页面:

加载

对于html的script标签,如果是外链的情况,如:

<script src="a.js"></script>

浏览器对它的处理主要有2部分:下载和执行

下载在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的

执行在所有浏览器中默认都是阻塞的,当js在执行时不会进行html解析等其它操作,所以页面顶部的js不宜过大,因为那样将导致页面长时间空白,对于这些外链js,有2个属性可以减少它们对页面加载的影响,分别是:

  • async
    • 标识js是否异步执行,当有这个属性时则不阻塞当前页面的加载,并在js下载完后立刻执行
    • 不能保证多个script标签的执行顺序
  • defer
    • 标示js是否延迟执行,当有这个属性时js的执行会推迟到页面解析完成之后
    • 可以保证多个script标签的执行顺序

下图来自Asynchronous and deferred JavaScript execution explained,清晰地解释了普通情况和这2种情况下的区别

需要注意的是这两个属性目前对于内嵌的js是无效的

而对于dom中创建的script标签在浏览器中则是异步的,如下所示:

var script = document.createElement('script');
script.src = 'a.js';
document.getElementsByTagName('head')[0].appendChild(script);

为了解决js阻塞页面的问题,可以利用浏览器不认识的属性来先下载js后再执行,如ControlJS就是这样做的,它能提高页面的相应速度,不过需要注意处理在js未加载完时的显示效果 

原文地址:https://www.cnblogs.com/Alight/p/3374668.html