1.解析html文件，创建DOM树
　　自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
　　1）css加载不会阻塞html文件的解析，但会阻塞dom的渲染
　　2）css加载会阻塞后面js语句的执行
　　3）js会阻塞html的解析和渲染
　　4）没有defer和async标签的script会立即加载并执行
　　5）有async标签的js，js的加载执行和html的解析和渲染并行
　　6）有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
　　7）DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片）
2.解析css，生成CSSOM，css对象模型
3.dom和css合并，构建渲染树（Render Tree）
4.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）
　　1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观
　　2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
　　3）重排必定会引发重绘，但重绘不一定会引发重排

补充：
监听资源加载完成有四种方式
　　1. window.onload = function(){....}
　　2. window.addEventListener("load",function(){....});
　　3. document.body.onload = function(){....}
　　4. <body onload = "load()">

参考：
1.http://www.cnblogs.com/bibiafa/p/9364986.html
2.https://blog.csdn.net/yuhk231/article/details/53581212

html页面渲染过程的更多相关文章

  1. 《Webkit技术内幕》之页面渲染过程

    文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...

  2. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  3. web页面加载、解析、渲染过程

    仅做学习参考,侵权删 原文链接:风吹De麦浪   https://www.cnblogs.com/CandyManPing/p/6635008.html 一.浏览器 浏览器的主要功能是将用户选择的we ...

  4. 从浏览器输入URL到页面渲染的过程

    零.背景 一个web安全工程师在学习web安全和web渗透时候,非常有必要了解整个WEB工作过程. 一.输入URL 这里是最基本的知识:URL是URI的一种实际应用,URI统一资源表示符,URL统一资 ...

  5. 一文摸透从输入URL到页面渲染的过程

    一文摸透从输入URL到页面渲染的过程 从输入URL到页面渲染需要Chrome浏览器的多个进程配合,所以我们先来谈谈现阶段Chrome浏览器的多进程架构. 一.Chrome架构 目前Chrome采用的是 ...

  6. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  7. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  8. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  9. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

随机推荐

  1. POJ 3714 Raid 近期对点题解

    版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/.未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...

  2. Halcon下载、安装

    下载地址: 官网:http://www.halcon.com/halcon/download/ Halcon学习网:http://www.ihalcon.com/read.php?tid=56 { 最 ...

  3. java集合讲解干货集

    文章都来自网络,收集后便于查阅. 1.Java 集合系列01之 总体框架 2.Java 集合系列02之 Collection架构 3.Java 集合系列03之 ArrayList详细介绍(源码解析)和 ...

  4. ls bash: cannot create temp file for here-document: No space left on device

    出现这种问题,一般是磁盘空间满了,或者是inode满了 使用命令: df -h查询磁盘空间 df -i 查询inode占用 Filesystem Inodes IUsed IFree IUse% Mo ...

  5. 2018年东北农业大学春季校赛 E wyh的阶乘 【数学】

    题目链接 https://www.nowcoder.com/acm/contest/93/E 思路 其实就是找阶乘的项中5的个数 末尾为什么会出现0 因为存在5的倍数和偶数相乘 有0存在 借鉴 htt ...

  6. MVC+Ext.net零基础学习记录（一）

    由于最近开发一个项目,决定使用MVC+EXT.NET,决定将学习的这个过程记录下来 本人和很多菜鸟一样,之前既没有使用过MVC开发,也没有接触过EXT.NET,所以这将是一个大家共同学习的过程,文章中 ...

  7. <再看TCP/IP第一卷>关于链路层的知识细节及相关协议

    在TCP/IP协议族中,链路层的主要有三个目的: (1)为IP模块发送和接受数据报 (2)为ARP模块发送ARP请求和接受ARP应答 (3)为RARP发送RARP请求和接受RARP应答 TCP/IP支 ...

  8. 计算机中丢失OPENGL.dll

    开发OpenGL项目时,在VS开发环境下可能会出现如图所示的错误. 在c:\windows\system32和SysWow64文件夹下存在opengl32.dll,此时,所写程序能够正常编译,但是,程 ...

  9. Java里的阻塞队列

    JDK7提供了7个阻塞队列,如下: ArrayBlockingQueue  : 一个数组结构组成的有界阻塞队列. LinkedBlockingQueue : 一个由链表结构组成的有界阻塞队列 . Pr ...

  10. BZOJ 1230 [Usaco2008 Nov]lites 开关灯：线段树异或

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1230 题意: 有n盏灯,一开始全是关着的. 有m次操作(p,a,b).p为0,则将区间[a ...