前端面试准备--10.渲染机制

2017-09-28 本文已影响165人飞菲fly

浏览器怎么渲染页面的？

浏览器渲染过程.PNG

1.什么是DOCTYPE及作用

DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
（DTD就是告诉浏览器我是什么文档类型，浏览器根据这个判断用什么引擎来解析和渲染它）

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错；（DOCTYPE就是直接告诉浏览器什么是DTD的，通知浏览器告诉当前的文档包含的是哪个DTD，也就是哪个文档类型。）

常见的DOCTYPE有哪些？

 HTML5
 <!DOCTYPE html>
 
 HTML 4.01 Strict(严格模式)
（该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素--比如：font）
 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
 HTML 4.01 Transitional（传统模式--宽松模式）
(该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素--比如font)
 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

浏览器渲染过程

html css js三个都会影响页面最后的呈现形式（*浏览器拿到html，css之后要干什么？）
浏览器渲染过程？
* 把html经过HTML Parser也就是DOM Parser转成DOM Tree（dom树）；
* css按照css规则和css解释器转成css Rules（cssOM Tree）；
* 两个树一整合Attachment，就形成了一个Render Tree（告诉浏览器我这个地方要渲染一个树的一个结构），Render Tree不包含html具体内容，也不知道位置是什么（layout之前Render TTree不知道某一个元素具体应该画在什么位置），通过layout就能精确的计算到要显示的DOM真正的位置、宽高、颜色，都在Render Tree呈现出来，最后开始Painting（浏览器通过DUI开始画图了）把我们的内容基本呈现出来，最后display大家在页面能看到网页效果了。

eg：在浏览器中输入一个url，发生了哪些事情？
--会有一个DNS解析，发送给服务器，服务器响应，响应过来到客户端浏览器这边就开始了渲染过程。

重排Reflow
- 定义：
  DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
- 触发Reflow：
  - 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint;
  - 当你移动DOM的位置，或是搞个动画的时候；
  - 当你修改CSS样式的时候；
  - 当你Resize窗口的时候（移动端没有这个问题），或者滚动的时候；
  - 当你修改网页的默认字体时；

--如何尽量避免触发reflow？

重烩Repaint
- 定义：（页面要呈现的内容统统画在屏幕上）
  当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint；
- 触发Repaint：
  - DOM改动
  - CSS改动
*如何避免最小程度的repaint？（如何减少repaint的频率）
repaint是无法避免，可以最大程度降低repaint；
先创建一个docuementFrag，然后把东西都放到片段中，最后向浏览器一次添加这些片段，最后到这repaint一次

布局Layout（浏览器的布局方式）

前端面试准备--10.渲染机制

猜你喜欢

热点阅读