详解浏览器渲染页面过程


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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
vuex 使用文档小结篇
Jan 11 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
浅谈Python的异常处理
2016/06/19 Python
Python重新加载模块的实现方法
2018/10/16 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
用python实现一个简单的验证码
2020/12/09 Python
Python脚本调试工具安装过程
2021/01/11 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
房租涨价通知
2015/04/23 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
《鲸》教学反思
2016/02/23 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript