【问答】浏览器前端解析、渲染

前端开发用用什么浏览器|前端开发用什么浏览器调试?|前端浏览器开发者工具

Q:浏览器加载完所有的文件后,如何进行页面的内容的解析和渲染?

A:
解析:1.浏览器会读取html文件,生成对应的DOM树
(至于生成DOM的具体过程,涉及html解析器(html Parser)以及解析算法,暂时不讲)
2.读取css文件,生成样式表对象;

渲染:会生成一个渲染树,最后是将dom树和css树结合的一个过程,好比女人的化妆。

具体:
渲染树和DOM树的关系,不可见的dom元素(<head>…</head> display=none)不会被插入渲染树中。
还有像一些节点的位置为绝对或浮动定位。
这些节点会在文本流之外,因此会在两棵树上的不同位置,渲染树标识出真实的位置,并用一个占位结构标识出他们原来的位置

渲染最大的一个困难就是为每一个dom节点计算符合他的最终样式。

为每一个元素查找到匹配的样式规则,需要遍历整个规则表。关于遍历规则表的方法,是自右向左

例子:#test p{ color:#999999}:先查询到p元素,再找到上一级id为test的元素。这样遍历的效率很低。
为什么:如上图,生成的样式对象,遍历的顺序,自然是从树的低端向上遍历。

计算样式的一些困难:

1.样式数据是非常大的结构,保存这样是的数据是很耗内存的。
2.选择器迭代太深,造成太多的无用遍历。
3.样式规则涉及非常复杂的级联,定义了规则的层次
(理解:<head>里引用的外部样式表,会被局部样式表中同一属性的设置取代。
还有例如body内对font的设置本来会应用于孩子元素,但是如果body的孩子元素定义font属性,则会被后者取代)。
解决办法:共享样式数据。(元素可以共享样式数据的条件就是他们的状态是”一致“的。)

###面试问答Q&A:
1.浏览器解析过程?(生成DOM树和css样式表对象)
2.渲染过程?(通过css样式表对象,通过规则计算生成渲染树,结合DOM树进行渲染)
3.渲染树和DOM树的关系?(不可见的dom元素不会被插入渲染树中。还有像一些节点的位置为绝对或浮动定位。
这些节点会在文本流之外,因此会在两棵树上的不同位置)
4.渲染时候的样式寻找规则?(从右向左,或是从css树底向上遍历寻找)
5.渲染最大的困难? (计算效率很低。
因为规则是从右向左,即计算的时候是从样式表树的底端向上遍历的,引起许多问题
具体体现就是计算的时候耗内存,遍历太多导致冗余,级联复杂导致父子的样式替换)
6.如何解决渲染计算的问题?条件是什么?(共享样式数据,条件是元素的状态一致)
7.针对渲染计算的问题,如何在编写css的时候就尽量避免?

1.dom深度尽量浅。
2.减少inline javascript、css的数量。
3.使用现代合法的css属性。
4.不要为id选择器指定类名或是标签,因为id可以唯一确定一个元素。
5.不要给类选择器指定标签,类,代表具有一类属性的标签,不仅是一个,虽然可以实现,但是降低了效率。
6.避免后代选择符,尽量使用子选择符。原因:子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符:#tp>p{}
7.避免使用通配符,举一个例子,.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd
(就是要对dom树上的所有节点进行遍历他的父级元素),然后匹配.mod,这样的性能耗费可想而知.

微信前端开发框架 mui|前端开发用多多的框架|前端框架开发效率

» 本文来自:前端开发者 » 《【问答】浏览器前端解析、渲染》
» 本文链接地址:https://www.rokub.com/4228.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!