html渲染其他页面,html页面渲染过程

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.

参考：

1.http://www.cnblogs.com/bibiafa/p/9364986.html

2.https://blog.csdn.net/yuhk231/article/details/53581212

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

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

二、Vue 页面渲染过程

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

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

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

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

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

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

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

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

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

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

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

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

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

加载 CSS 时不影响页面渲染

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

随机推荐

Java中的接口

1.接口概念 <1>接口可以理解一种特殊的类,由全局常量和公共的抽象方法所组成 <2>类是一种具体实现体,而接口定义了某一批类所需要遵守的规范,接口不必关心这些类的内部数据,也 ...

&lbrack;工具类&rsqb;获取url中参数列表

写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...

【转载】apache kafka系列之-监控指标