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. <body onload = "load()">
参考：
1.http://www.cnblogs.com/bibiafa/p/9364986.html
2.https://blog.csdn.net/yuhk231/article/details/53581212
html页面渲染过程的更多相关文章
- 《Webkit技术内幕》之页面渲染过程
文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...
- 二、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 SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 加载 CSS 时不影响页面渲染
转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...
随机推荐
- linux c编程：进程间通信
进程间的通信包括管道,共享内存,信号量通信,消息队列,套借口(socket)和全双工管道通信 首先来看下管道的用法:管道顾名思义,就如同下水道管道一样,当从管道一端流水到另一端的时候,水流的方向是单方 ...
- SAP RFC 的介绍
第一部分 RFC技术 什么是RFC? RFC是SAP系统和其他(SAP或非SAP)系统间的一个重要而常用的双向接口技术,也被视为SAP与外部通信的基本协议.简单地说,RFC过程就是系统调用当前系统外的 ...
- margin的相关属性及应用
1.margin常见问题: ①IE6下双边距 (不推荐使用float+margin,可用padding替代) 详见<css浏览器兼容问题集锦>之4.IE6中margin双边距 ②IE6 ...
- dotnet core on Linux 环境搭建及入门demo
首先感谢张善友大大提供的腾讯云实验室链接(https://www.qcloud.com/developer/labs/list). 以下是整个搭建过程及简单demo实例 1.搭建 .NET Core ...
- 算法（Algorithms）第4版 练习 1.3.25 1.3.24
代码实现: //1.3.24 /** * remove the node following the node x * (and does nothing if the argument or the ...
- deepin网络加速
0.进入控制中心里的“更新设置”,选择速度最快的镜像源(我的是阿里云)1.安装dnsmasq(命令:sudo aptitude install dnsmasq)2.以管理员权限打开gedit(命令:s ...
- 虚拟参考站（VRS）
来源:https://www.sohu.com/a/149415053_391994 一.高精度定位 VRS是虚拟参考站(Virtual Reference Station)的简称.这项技术是CORS ...
- Android SDK Manager更新问题
1.如果是windows7,那么"开始-->所有程序-->Android SDK Tools-->右键SDK Manager-->以管理员身份运行(A)"2 ...
- CI公用模型
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); /** * SEO管理系统 -- 公用模型 ...
- python基础-发邮件smtp
先来想下发送邮件需要填写什么,还需要有什么条件1.与邮件服务器建立连接,用户名和密码2.发邮件:发件人,收件人,主题,内容,附件3.发送 使用第三方邮箱发送邮件 #! /usr/bin/env pyt ...