详解浏览器渲染页面过程


Posted in Javascript onFebruary 09, 2017

详解浏览器渲染页面过程

1.解析HTML文件,创建DOM树

自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。

2.解析CSS

优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
特定级:id数*100+类或伪类数*10+tag名称*1

3.将CSS与DOM合并,构建渲染树(renderingtree)

DOM树与HTML一一对应,渲染树会忽略诸如head、display:none的元素

4.布局和绘制,重绘(repaint)和重排(reflow)

重排:若渲染树的一部分更新,且尺寸变化,就会发生重排;
重绘:部分节点需要更新,但不改变其他集合形状。如改变某个元素的颜色,就会发生重绘。 

附:

1.重绘和重排何时会发生:

(1)增加或删除DOM节点;
(2)display:none(重排并重绘);visibility:hidden(重排);
(3)移动页面中的元素;
(4)增加或修改样式;
(5)用户改变窗口大小,滚动页面等。

2.如何减少重绘和重排以提升页面性能:

(1)不要一个个修改属性,应通过一个class来修改

错误写法:div.style.width="50px";div.style.top="60px";
正确写法:div.className+=" modify";

(2)clone节点,在副本中修改,然后直接替换当前的节点;
(3)若要频繁获取计算后的样式,请暂存起来;
(4)降低受影响的节点:在页面顶部插入节点将影响后续所有节点。而绝对定位的元素改变会影响较少的元素;
(5)批量添加DOM:多个DOM插入或修改,应组成一个长的字符串后一次性放入DOM。使用innerHTML永远比DOM操作快。(特别注意:innerHTML不会执行字符串中的嵌入脚本,因此不会产生XSS漏洞)。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
js实现右键自定义菜单
Dec 03 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue 限制input只能输入正数的操作
Aug 05 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 #Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 #Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 #Javascript
Bootstrap面板学习使用
Feb 09 #Javascript
详解js的异步编程技术的方法
Feb 09 #Javascript
原生JS实现简单放大镜效果
Feb 08 #Javascript
基于JavaScript实现本地图片预览
Feb 08 #Javascript
You might like
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
golang与PHP输出excel示例
2016/07/22 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
js简易版购物车功能
2017/06/17 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python求列表交集的方法汇总
2014/11/10 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
红色故事演讲稿
2014/05/22 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
教师个人成长总结
2015/02/11 职场文书
历史博物馆观后感
2015/06/05 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android