Web图片资源的加载与渲染时机,浏览器中图纸的加载

Web图片资源的加载与渲染时机

2017/07/27 · JavaScript
· 渲染

原文出处: Leechikit   

此文探究页面中的图片资源的加载和渲染时机,使得大家能更好的管理图片资源,防止不必要的流量和增强用户体验。

  网站的质量优化,从用户输入网址,到用户最后见到结果,要求有无数的参预方共同努力。这一个涉企方中任何一个环节的特性都会影响到用户体验。

浏览器加载一个html页面:

渲染机制

浏览器的工作流程

要商量图片资源的加载和渲染,大家先要驾驭浏览器的办事原理。以Webkit发动机的干活流程为例:

美高梅开户网址 1

从上图可观察,浏览器加载一个HTML页面后举办如下操作:

  • 解析HTML —> 构建DOM树
  • 加载样式 —> 解析样式 —> 营造样式规则树
  • 加载javascript —> 执行javascript代码
  • 把DOM树和样式规则树匹配打造渲染树
  • 计量元素地点进行布局
  • 绘制

从上图我们不可以很直观的来看图片资源从哪些时候开首加载,下图标出图片加载和渲染的火候:

  • 解析HTML【遇到<img>标签加载图片】 —> 打造DOM树
  • 加载样式 —> 解析样式【境遇背景图片链接不加载】 —>
    打造样式规则树
  • 加载javascript —> 执行javascript代码
  • 把DOM树和体制规则树匹配打造渲染树【加载渲染树上的背景图片】
  • 计量元素地点进行布局
  • 美高梅开户网址,制图【开头渲染图片】

● 宽带网速
● DNS服务器的响应速度
● 服务器的拍卖能力
● 数据库品质
● 路由转发
● 浏览器处理能力

解析html===》构建DOM树

DOCTYPE

  • DOCTYPE是用来声称文档类型的,告诉浏览器拔取哪个种类DTD规范的文档类型。
  • DTD(document type definition, 文档类型定义)
    是有些列的语法规则,用来定义HTML文件类型。用来给浏览器判断文档类型。

图表加载与渲染规则

页面中不是装有的<img>标签图片和样式表背景图片都会加载。

 

    —–遭逢img标签加载图片

扬言文档类型

  • HTML5 <!DOCTYPE html>
  • HTML 4.01 有宽松格局和严厉方式(不包罗显示性和弃用的因素)

display:none

JavaScript

<style> .img-purple { background-image: url(../image/purple.png);
} </style> <img src=”../image/pink.png”
style=”display:none”> <div class=”img-purple”
style=”display:none”></div>

1
2
3
4
5
6
7
<style>
.img-purple {
    background-image: url(../image/purple.png);
}
</style>
<img src="../image/pink.png" style="display:none">
<div class="img-purple" style="display:none"></div>

图表资源请求如下:美高梅开户网址 2

设置了display:none属性的元素,图片不会渲染出来,但会加载。

原理

把DOM树和体制规则树匹配营造渲染树时,会把可渲染元素上的具备属性(如display:none属性和background-image质量)结合一起出现到渲染树。

当解析渲染树时会加载<img>标签元素上的图形,发现元素上有background-image品质时会加载背景图片。

Web图片资源的加载与渲染时机,浏览器中图纸的加载。当绘制时发现元素上有display:none特性,则不划算该因素地方,也不会绘制该因素。

JavaScript

<style> .img-yellow { background-image: url(../image/yellow.png);
} </style> <div style=”display:none”> <img
src=”../image/red.png”> <div class=”img-yellow”></div>
</div>

1
2
3
4
5
6
7
8
9
<style>
.img-yellow {
    background-image: url(../image/yellow.png);
}
</style>
<div style="display:none">
    <img src="../image/red.png">
    <div class="img-yellow"></div>
</div>

图形资源请求如下:
美高梅开户网址 3

设置了display:none特性元素的子元素,样式表中的背景图片不会渲染出来,也不会加载;而<img>“标签的图样不会渲染出来,但会加载。

原理

正如上边所说的,打造渲染树时,只会把可渲染元素产出到渲染树,那就代表有不行渲染元素,当匹配DOM树和体制规则树时,若发现一个因素的性质上有display:none,浏览器会认为该因素的子元素是不可渲染的,因而不会把该因素的子元素产出到渲染树上。

当解析渲染树时渲染树上没有设置了display:none特性元素的子元素,因而不会加载该因素中子元素的背景图片。

当绘制时也因为渲染树上没有安装了display:none质量元素的子元素,由此该因素中子元素的背景图片不会渲染出来。

网页生成的历程:

加载样式===》解析样式       ===》打造样式规则树

浏览器渲染进度

美高梅开户网址 4

  • HTML通过HTML解析转化成DOM树

    美高梅开户网址 5

  • Style样式通过CSS解析转化成Style规则

    美高梅开户网址 6

    image.png

  • DOM树和Style规则结合成渲染树(Render Tree)

    美高梅开户网址 7

  • 然后渲染树通过layout
    统计出各因素在浏览器上的宽高颜色地方等属性,最终在浏览器上开展绘图。

    美高梅开户网址 8

双重图片

JavaScript

.img-blue { background-image: url(../image/blue.png); } <div
class=”img-blue”></div> <img src=”../image/blue.png”>
<img src=”../image/blue.png”>

1
2
3
4
5
6
.img-blue {
    background-image: url(../image/blue.png);
}
<div class="img-blue"></div>
<img src="../image/blue.png">
<img src="../image/blue.png">

图表资源请求如下:
美高梅开户网址 9

页面中几个<img>标签或样式表中的背景图片图片路径是同一个,图片只加载四回。

原理

浏览器请求资源时,都会先判断是或不是有缓存,若有缓存且未过期则会从缓存中读取,不会另行伸手。先加载的图纸会蕴藏到浏览器缓存中,前面再一次请求同路线图片时会直接读取缓存中的图片。

1.HTML
描述了一个页面的社团。浏览器首先会将HTML转换成其可以清楚的一种格式 –
文档对象模型(Document Object Model) 或者简称为 DOM,每一个 HTML
标签都对应着树种的某部节点(DOM节点)。

    —–遭受背景图片链接不加载

重排Reflow

  • DOM元素的盒模型须求浏览器按照样式总括结果将他们绘制在页面上,那一个进度就是reflow

不存在元素的背景图片

.img-blue { background-image: url(../image/blue.png); } .img-orange{
background-image: url(../image/orange.png); }

1
2
3
4
5
6
.img-blue {
    background-image: url(../image/blue.png);
}
.img-orange{
    background-image: url(../image/orange.png);
}

图表资源请求如下:美高梅开户网址 10

不存在元素的背景图片不会加载。

原理

不设有的要素不会冒出到DOM树上,因而渲染树上也不会有不设有的因素,当解析渲染树时不可能解析不存在的要素,不存在的元素上的图样自然不会加载也不会渲染。

2.页面上的 CSS 样式被映射到 CSSOM 上 – CSS 对象模型(CSS Object
Model)。CSS 不阻塞 DOM 的营造,它会卡住 DOM 的渲染,直到 DOM 和 CSSOM
准备好从前,浏览器什么都不会显得

加载js     ===》执行js

触发Reflow 条件

  • 增加、删除、修改DOM节点时,会触发Reflow 或 Repaint
  • 移动DOM节点、动画
  • 修改CSS样式
  • resize 窗口、滚动页面
  • 修改页面默许字体

伪类的背景图片

.img-green { background-image: url(../image/green.png); }
.img-green:hover{ background-image: url(../image/red.png); }

1
2
3
4
5
6
.img-green {
    background-image: url(../image/green.png);
}
.img-green:hover{
    background-image: url(../image/red.png);
}

触发hover前的图纸资源请求如下:
美高梅开户网址 11

触发hover后的图片资源请求如下:
美高梅开户网址 12

当接触伪类的时候,伪类样式上的背景图片才会加载。

原理

触发hover前,DOM树与体制规则树匹配的是无hover状态选拔器.img-green的体裁,由此渲染树上background-image属性的值是url(../image/green.png),解析渲染树时加载的是green.png,绘制时渲染的也是green.png

触发hover后,因为.img-green:hover的优先级相比较高,由此DOM树与体制规则树匹配的是有hover状态拔取器.img-green:hover的样式,渲染树上background-image质量的值是url(../image/red.png),解析渲染树时加载的是red.png,绘制时渲染的也是red.png

3.结合DOM和CSSOM,生成一颗渲染树

把DOM树和体裁规则树匹配创设渲染树

重绘Repaint

  • 当DOM元素盒模型的各类质量确定统计结果后,浏览器依据这么些元素的体制属性绘制三次出现在页面上的进度就是repaint

应用

4.生成布局

     —-加载渲染树上的背景图片

触发Repaint

  • DOM改动
  • CSS改动

占位图

当使用样式表中的背景图片作为占位符时,要把背景图片转为base64格式。那是因为背景图片加载的顺序在标签后面,背景图片可能会在&lt;img&gt;标签图片加载成功后才起来加载,达不到想要的听从。

5.将布局绘制在显示器上

测算元素地方展开布局

减少Reflow Repaint的开销

  • DOM拼接后四次append 到页面上(<li>列表</li>)

预加载

洋洋景观里图片是在转移或接触状态后才突显出来的,例如点击一个Tab后,一个装置display:none隐蔽的父元素变为突显,这些父元素里的子元素图片会在父元素显示后才起来加载;又如当鼠标hover到图标后,改变图标图片,图片会在hover上去后才开头加载,导致出现闪一下那种不和谐的体验。

在那种情状下,大家就要求把图纸预加载,预加载有很各种方法:

  1. 如果小图标,可以统一成Pepsi-Cola图,在转移状态前就把具有图标都一头加载了。
  2. 选用上文讲到的,设置了display:none属性的因素,图片不会渲染出来,但会加载。把要预加载的图样加到设置了display:none的要素背景图或“标签里。
  3. 在javascript创建img对象,把图片url设置到img对象的src属性里。

    1 赞 3 收藏
    评论

美高梅开户网址 13

美高梅开户网址 14

绘制  —-渲染图片

页面品质优化

 

开辟浏览器,在地方栏输入 url 直到页面显示,整个过程发生了什么?

  • DNS(Domain Name
    System)域名种类预解析(应用层),输入url后,浏览器会开展DNS解析出,
    对应服务器的ip地址.
  • 浏览器会将用户输入的乞求消息打包发送给nginx服务器.
  • 服务器会分析用户的请求寻找处理请求的应和文件,发送给浏览器.
  • 最后浏览器接收服务器的响应,解析并渲染展现给用户。

  那五步里面,第一步到第三步都相当快,耗时的是第四步和第五步。
“生成布局”(flow)和”绘制”(paint)那两步,合称为”渲染”(render)。当浏览器营造DOM 的时候,若是在 HTML 中相遇了一个
<script>…</script>标签,它必须登时实施。即使脚本是来自于外部的,那么它必须首先下载脚本。只有在
JavaScript 引擎执行完代码之后它才会另行初始解析HTML。

提拔页面性能的办法有啥样?

  • 资源减少合并,减弱HTTP请求
  • 非焦点代码异步加载
  • 利用浏览器缓存
  • 使用CDN
  • 预解析DNS

图表加载时间和渲染时机:

非主旨代码异步加载

  • 动态脚本加载
    动态创立<script>标签添加到html 文档中内
  • <script> 标签的defer 属性
    html 文档解析完执行,按加载顺序依次执行
  • <script> 标签的async 属性
    html 文档解析完执行,加载顺序与执行各种毫无干系

● 解析HTML【蒙受标签加载图片】 —> 营造DOM树
● 加载样式 —> 解析样式【遭逢背景图片链接不加载】 —>
打造样式规则树
● 加载javascript —> 执行javascript代码
● 把DOM树和样式规则树匹配创设渲染树【加载渲染树上的背景图片】
● 总结元素地点举办布局
● 绘制【起头渲染图片】

选取浏览器缓存

  • 强缓存:
    客户端无需重新呼吁服务端,客户端直接依据缓存条件决定是还是不是采用缓存资源
响应header 描述 常用响应返回内容 推荐 特点 缺点 场景
Cache-Control 在多少秒内进行缓存 public, max-age=秒 固定时间 客户端服务端时间可能不一致
Expires 在此时间前进行缓存 格林威治时间 绝对时间 客户端服务端时间可能不一致 兼容http1.0
  • 协议缓存:
    客户端需请求服务端举行比较缓存条件,符合条件则赶回304应用缓存资源
响应header 请求header 描述 常用响应返回内容 推荐 特点 缺点 场景
ETag If-None-Match 固定字符串 md5 hash值 检测文件完整性
Last-Modified If-Modified-Since 在某时间后没再更改 格林威治时间 浏览器根据返回的时间自己决定缓存 浏览器差异

  设置了display:none属性的因素,图片不会渲染出来,但会加载。
原理:当DOM树和体裁规则树匹配营造渲染树时,会把可渲染元素上的持有属性(如display:none属性和background-image属性)结合一起出现到渲染树。当解析渲染树时会加载标签元素上的图片,发现元素上有background-image属性时会加载背景图片。当绘制时意识元素上有display:none属性,则不计算该因素地点,也不会绘制该因素。

DNS 预解析

// 强制打开a 标签的DNS 预解析,https 默认关闭a 标签的DNS 预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefatch" href="url">

  设置了display:none属性元素的子元素,样式表中的背景图片不会渲染出来,也不会加载;而标签的图纸不会渲染出来,但会加载。
规律:创设渲染树时,只会把可渲染元素产出到渲染树,那就代表有不足渲染元素,当匹配DOM树和体制规则树时,若发现一个因素的性质上有display:none,浏览器会认为该因素的子元素是不足渲染的,由此不会把该因素的子元素产出到渲染树上。

前者错误监控

  • 保障产品质量
  • 当下运行错误(代码错误)收集
  • 资源加载错误收集

网页品质影响:
  网页生成的时候,至少会渲染四回。用户访问的经过中,还会持续重复渲染。重新渲染,就必要再行生成布局和另行绘制。前者叫做”重排”(reflow),后者叫做”重绘”(repaint)。提升网页品质,就是要大跌”重排”和”重绘”的功效和花费,尽量少触发重新渲染。

旋即运行错误的破获方式

// 代码块使用错误捕获
try {} catch (e) {}

// 使用window对象错误事件捕获
window.onerror = function(e) {}
window.addEventListener('error', function(e) {})

 

资源加载错误

<img>等资源加载错误不会冒泡,window.onerror
不可以捕获到标签资源加载的一无可取

  • dom 捕获

elScript.onerror = function (e){}
elImg.onerror = function (e){}
...
  • 跨域js 错误捕获

js 文件资源响应头设置Access-Control-Allow-Origin: *

script 标签扩张crossorigin 属性
<script crossorigin src='url'></script>

  • 获得成功加载的资源

performance.getEntries()
performance.getEntries().map(item => item.name) // 获取所有成功资源加载地址
  • 经过Error 事件捕获

window.addEventListener('error', function(e) {
  console.log('捕获', e) // 将会捕获到资源加载错误
}, true)
<script src='错误url'></script>

预解析:

上报错误的基本原理

  • 运用Ajax 通讯情势上报

  • 动用Image 对象申报

<script>
  new Image().src = 'url?k=val'  // 会发送一个请求用于上报
</script>

参考

  新的 Web 标准 <link rel=”preload” href=”” as=””
>使可以更快地加载关键资源,as属性告诉浏览器要下载的是何许,一些也许的值是:script,style,image,font,audio,video.有一些要留意,要预加载字体你还非得设置crossorigin
属性,即便字体在同一个域名下。

  defer 和async那七个特性都告诉浏览器,它可以 “在后台”
加载脚本的还要继续分析
HTML,并在剧本加载完之后再实践。那样,脚本下载就不会阻塞 DOM
营造和页面渲染了。结果就是,用户能够在所有的脚本加载成功之前就能见到页面。

  defer 比 async
要先引入浏览器。它的推行在解析完全做到未来才起来,它地处DOMContentLoaded事件此前。
它有限支撑脚本会按照它在 HTML 中冒出的逐条执行,并且不会卡住解析。

  async 脚本在它们形成下载已毕后的第一时间执行,它地处 window 的load
事件在此以前。 那意味着有可能(并且很有可能)设置了 async
的本子不会安份守己它们在 HTML 中出现的逐一执行。那也象征她们或许会半途而废 DOM
的打造。无论它们在何地被指定,设置async
的本子的加载有着较低的优先级,同步的本子总是比异步的剧本拥有更高的先行级。他们平凡在具有其余脚本加载之后才加载,而不打断
DOM 创设。然则,若是一个指定async
的剧本很快就马到成功了下载,那么它的执行会阻塞 DOM
打造以及所有在后头才形成下载的同步脚。

—————————分————割————————————- 

 

上述内容摘自

阮一峰的互连网日志

谢谢大神们的实践总计~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图