详解浏览器渲染页面过程


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 相关文章推荐
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
JS实现页面打印功能
2017/03/16 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
webpack多页面开发实践
2017/12/18 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
django序列化serializers过程解析
2019/12/14 Python
python实现程序重启和系统重启方式
2020/04/16 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
JAVA程序员面试题
2012/10/03 面试题
《在山的那边》教学反思
2014/02/23 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
课外活动实习计划
2015/01/19 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年重阳节主持词
2015/07/04 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
人生感悟经典句子
2019/08/20 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis