html渲染过程

用户输入url地址,浏览器依据域名寻觅IP地址
浏览器向服务器发送http恳求,假如服务器段回来以301之类的重定向,浏览器依据相应头中的location再次发送恳求
服务器端承受恳求,处理恳求生成html代码,回来给浏览器,这时的html页面代码可能是通过紧缩的
浏览器接收服务器呼应成果,假如有紧缩则首先进行解压处理,紧接着即是页面解析烘托
  解析烘托该进程首要分为以下进程:

解析HTML
构建DOM树
DOM树与CSS款式进行附着结构出现树
规划
制作
解析与构建DOM树

  前两步咱们放在一同评论,浏览器的实际作业也是将他们放在一同进行的。关于HTML浏览器有专门的html解析器来解析HTML,并在解析的进程中构建DOM树。在这里咱们评论两种DOM元素的解析,即款式(link、style)与脚本文件(script)。因为浏览器选用自上而下的方法解析,在遇到这两种元素时都会堵塞浏览器的解析,

直到外部资本加载并解析或履行结束后才会继续向下解析html。关于款式与脚本的先后顺序相同也会影响到浏览器的解析进程,究其原因首要在于:script脚本履行进程中可能会修改html界面(如document.write函数);DOM节点的CSS款式会影响js的履行成果。在我的测验中得到以下四条结论:

 1)外部款式会堵塞后续脚本履行,直到外部款式加载并解析结束。

  2)外部款式不会堵塞后续外部脚本的加载,但会堵塞外部脚本的履行。

主页代码
 外部脚本
  从瀑布图中咱们能够看到,外部脚本与外部款式是并行加载,但直到外部款式加载结束,外部脚本才开端履行

  3)假如后续外部脚本含有async特点(IE下为defer),则外部款式不会堵塞该脚本的加载与履行


  从瀑布图中能够看到外部脚本的加载与履行并不受link的堵塞

  4)关于动态创立的link标签不会堵塞这以后动态创立的script的加载与履行,

不论script标签是否具有async特点,但关于别的非动态创立的script,以上三条结论仍适用

HTML解析结束后,开端构建出现树RenderTree,这一步的首要作业在于将css款式应用到DOM节点上,WebKit内核将这一进程称为附着,别的浏览器有纷歧样的概念。对前端工程师而言这个进程会涉及到CSS层叠疑问。

  首先将依据款式主要性排序,由低到高依次为:

浏览器声明
用户一般声明
作者一般声明
作者主要声明
用户主要声明
  关于同一主要等级,则是依据CSS选择符的特指度来断定优先级;一条款式声明的特指度由以下四个有些决议:S-I-C-E

声明来自内联的style特点则 S+1;
声明中含有id特点则 I+1;
声明中含有类、伪类、特点选择器则 C+1;
生命中含有元素、伪元素选择器则 E+1;
  特指度的对比类似于两个字符串之间对比巨细。

  出现树的每一个节点即为与其相对应的DOM节点的CSS框,框的类型与DOM节点的display特点有关,block元素生成block框,inline元素生成inline框。每一个出现树节点都有与之相对应的DOM节点,但DOM节点纷歧定有与之相对应的出现树节点,比方display特点为none的DOM节点,并且出现树节点在出现树中的方位与他们在DOM树中的方位纷歧定相同,比方float与肯定定位元素。

时间: 2024-10-11 06:14:03

html渲染过程的相关文章

浏览器渲染过程

有时候想要进行性能优化时了解浏览器的渲染过程无疑是十分重要的.下面来看 首先介绍一下主流浏览器的渲染引擎: IE:Trident chrome:Blink Safire:webkit Firefox:Gecko Opera:Blink QQ浏览器/微信webview:X5/Blink 可能有很多会感到疑惑:chrome不是webkit么?其实Blink也算是webkit的一种升级吧,前缀还是不变的. 然后介绍一下渲染过程 1.DOM解析(与CSS解析同时进行): 把HTML文档解析成DOM树的过

前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

WebKit 渲染过程

webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 Webkit渲染过程包括很多数据和模块 数据:网页内容,DOM树,内部表示,图像 模块:HTML解释器,CSS解释器,JavaScript引擎,布局和绘图模块 根据数据的方向,渲染分三个阶段 1,网页的URL 到构建完DOM 树 2,DOM树 到 构建完 Webkit的绘图上下文 3,绘图上下文 到 最终的图像 下面是详细的对三

spring mvc DispatcherServlet详解之---视图渲染过程

整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程. 视图渲染的过程: DispatcherServlet.java doService()--->doDispatch()--->processDispatchResult()--->render() processDispatchResult():主要处理异常.请求状态及触发请求完成事件,

&lt;转&gt;iOS 事件处理机制与图像渲染过程

原文:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=401383686&idx=1&sn=1613dfa8fa762a0efee4bc4af496fddf&scene=0#wechat_redirect iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了一个触摸事件从操作系统层传送到应用内的main

网页在浏览器上的渲染过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载

《转之微信移动团队微信公众号》iOS 事件处理机制与图像渲染过程

致歉声明: Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什

iOS 事件处理机制与图像渲染过程

iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS 为什么必须在主线程中操作UI 事件响应 CALayer CADisplayLink 和 NSTimer iOS 渲染过程 渲染时机 CPU 和 GPU渲染 Core Animation Facebook Pop介绍 AsyncDisplay介绍 参考文章 iOS RunLoop都干了什么 RunLoop是一个接收处理异步消息事件的循环,一个循环中:等待事件发生,然后将这个事件送到能处理它的地方. 如图1-1所示,描述了

通过浏览器渲染过程来进行前端优化

介绍 做web开发,我个人觉得必须要弄清楚浏览器的渲染过程,否则我们很难进行前端优化. 我今天就简单说一下页面加载和前端优化. 页面加载 我按照最简单的方式进行描述,实际上更复杂,不管是在浏览器端还是服务端,比如dns解析,代理服务器,负载均衡器等等. 1.用户访问网页,发送一个http请求到网络服务器. 2.网络服务器(应用服务器)解析请求,发送请求给数据库服务器. 3.数据服务器返回数据给网络服务器,网络服务器解析数据,并生成html文件内容放入http response中,返回给浏览器.

从浏览器渲染过程看重绘回流

渲染过程 浏览器渲染过程如下: 解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树. 将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree). Layout(回流): 根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小). Painting(重绘): 根据渲染树以及回流得到的几何信息,得到节点的绝对像素. Display: 将像素渲染到屏幕上. 阻塞问题: 构建 CSSOM 会阻塞浏览器渲染,但不会阻塞解析 HTML 构建 DOM树.