博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器的加载顺序与页面性能优化
阅读量:5117 次
发布时间:2019-06-13

本文共 1728 字,大约阅读时间需要 5 分钟。

详情参考:

例子:

一: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,提取出链接地址提前下载,注意这里仅是先 下载内容,并不会开始解析和执行

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

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

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

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

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

 

三:http:

编码识别:

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

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

建议在http

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

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

如淘宝页面:

 

加载

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

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

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

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

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

下图来自,清晰地解释了普通情况和这2种情况下的区别

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

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

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

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

 

 

转载于:https://www.cnblogs.com/Alight/p/3374668.html

你可能感兴趣的文章
poj1201 查分约束系统
查看>>
Red and Black(poj-1979)
查看>>
分布式锁的思路以及实现分析
查看>>
腾讯元对象存储之文件删除
查看>>
jdk环境变量配置
查看>>
安装 Express
查看>>
包含列的索引:SQL Server索引的阶梯级别5
查看>>
myeclipse插件安装
查看>>
浙江省第十二届省赛 Beauty of Array(思维题)
查看>>
NOIP2013 提高组 Day1
查看>>
个人对vue生命周期的理解
查看>>
cocos2dx 3.x simpleAudioEngine 长音效被众多短音效打断问题
查看>>
存储(硬件方面的一些基本术语)
查看>>
观察者模式
查看>>
Weka中数据挖掘与机器学习系列之基本概念(三)
查看>>
Win磁盘MBR转换为GUID
查看>>
大家在做.NET B/S项目的时候多用什么设技术啊?
查看>>
Java SE和Java EE应用的性能调优
查看>>
Android设计模式系列--原型模式
查看>>
免费的论文查重网站
查看>>