写代码啦
浏览器渲染过程
回复数(0) 浏览数(17)
{{topic.upvote_count || 0}} 编辑 回复

浏览器中地址栏中输入东西后,按下enter键,会发生什么?
浏览器会判断:用户到底是输入了一个地址访问某网站,还是一个输入了一个关键词让搜索引擎搜?本文只说输入的是一个地址的情况。

浏览器会查询本地缓存的dns列表,以获取主机地址,若dns缓存未命中,则浏览器发出请求,进行查询,查询之后的结果缓存起来。
连接主机
发送请求
获得一个服务器的响应
进行渲染
渲染过程(webkit和gecko都差不多)
解析HTML,得到一个DOM tree
解析CSS,得到CSSOM tree
将两者整合成渲染数,render tree
布局(layout), 根据Render Tree计算每个节点的位置大小等信息 (在草稿本上画了个草图)
绘制(Painting )根据计算好的信息绘制整个页面
1、2、3非常快,但是4和5比较耗时,有三个术语:
“重排” 和 “回流”是一个意思,指的是重新执行步骤4
“重绘” 指重新执行步骤5
重排意味着重新计算节点的位置大小等信息,重新在草稿本上画了草图,所以一定会重绘
重绘不一定会重排,比如背景颜色改变

重排和重绘代价很高,所以浏览器并不会一有信息改变就去执行重排和重绘,而是会将多个可能的重排和重绘一次执行。是的,它可能会异步。

有两个css属性,display: none和visibility: hidden,前者会导致重排和重绘,后者会导致重绘。这是后者的优点,但缺点是此节点一直保存在内存中,占用资源。
内容来源
捎带解释下什么是DNS?
1、dns是一个域名系统,是万维网上作为du域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。
2、意义:通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。在解析域名时,可以首先采用静态域名解析的方法,如果静态域名解析不成功,再采用动态域名解析的方法,域名是互联网上的身份标识,是不可重复的唯一标识资源; 互联网的全球化使得域名成为标识一国主权的国家战略资源。

{{topic.upvote_count || 0}}

浏览器中地址栏中输入东西后,按下enter键,会发生什么?
浏览器会判断:用户到底是输入了一个地址访问某网站,还是一个输入了一个关键词让搜索引擎搜?本文只说输入的是一个地址的情况。

浏览器会查询本地缓存的dns列表,以获取主机地址,若dns缓存未命中,则浏览器发出请求,进行查询,查询之后的结果缓存起来。
连接主机
发送请求
获得一个服务器的响应
进行渲染
渲染过程(webkit和gecko都差不多)
解析HTML,得到一个DOM tree
解析CSS,得到CSSOM tree
将两者整合成渲染数,render tree
布局(layout), 根据Render Tree计算每个节点的位置大小等信息 (在草稿本上画了个草图)
绘制(Painting )根据计算好的信息绘制整个页面
1、2、3非常快,但是4和5比较耗时,有三个术语:
“重排” 和 “回流”是一个意思,指的是重新执行步骤4
“重绘” 指重新执行步骤5
重排意味着重新计算节点的位置大小等信息,重新在草稿本上画了草图,所以一定会重绘
重绘不一定会重排,比如背景颜色改变

重排和重绘代价很高,所以浏览器并不会一有信息改变就去执行重排和重绘,而是会将多个可能的重排和重绘一次执行。是的,它可能会异步。

有两个css属性,display: none和visibility: hidden,前者会导致重排和重绘,后者会导致重绘。这是后者的优点,但缺点是此节点一直保存在内存中,占用资源。
内容来源
捎带解释下什么是DNS?
1、dns是一个域名系统,是万维网上作为du域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。
2、意义:通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。在解析域名时,可以首先采用静态域名解析的方法,如果静态域名解析不成功,再采用动态域名解析的方法,域名是互联网上的身份标识,是不可重复的唯一标识资源; 互联网的全球化使得域名成为标识一国主权的国家战略资源。

17
回复 编辑