基础//渲染机制、页面加载

基础——渲染机制、页面加载

一、渲染机制

1）什么是DOCTYPE、作用、类型

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证， 如果文件代码不合法，那么浏览器解析时便会出一些差错。
（告诉浏览器现在用哪个文件类型）

• DOCTYPE类型：

HTML 5
HTML 4.01 Strict （该DTD包含所有HTML元素和属性，但不包括展示性和弃用性的元素font...）
HTML 4.01 Transitional  （该DTD包含所有HTML元素和属性，包括展示性和弃用性的元素font...）

2）浏览器渲染过程

3）重排reflow

每个元素都有自己的盒子，浏览器会根据各种样式计算并根据结果放到它该出现的位置。

触发：（说出2条即可）
① 增、删、改DOM节点时，会导致 Reflow 或 Repaint； 
② 移动DOM的位置，或者搞个动画的时候； 
③ 修改CSS样式时； 
④ Resize窗口时（移动端没这个问题），或是滚动时；
⑤ 修改网页的默认字体时；

4）重绘repaint

每个盒子都有自己的大小、位置即其它属性，例如颜色、字体大小确认下来后，浏览器会把元素各特性绘制一遍，在页面出现。

触发： 
DOM改动； 
CSS改动；

5）布局layout

Layout 主要是告诉 Render Tree（渲染树）每个元素的位置，渲染树的每个元素包含的内容都是计算过的。

二、页面加载

1 知识点

1.1 加载资源的形式

①输入 url（或跳转页面）加载 html

http://coding.m.imooc.com

②加载 html 中的静态资源

<script src="/static/js/jquery.js"></script>

1.2 加载一个资源的过程

① 浏览器根据请求的url交给dns域名解析，找到真实ip，向服务器发起http请求；
② 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、图片等）
③ 浏览器对加载到的资源进行语法解析，建立相应的内部数据结构（如HTML的DOM）
④ 载入解析到的资源文件，渲染页面，完成

1.3 浏览器渲染页面的过程

根据 HTML 结构生成 DOM Tree
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到

2 问答

题目：
*从输入url到得到html的详细过程
*window.onload 和 DOMContentLoaded 的区别

2.1 从输入url到得到html的详细过程

（同知识点1.2）

2.2 window.onload 和 DOMContentLoaded 的区别

window.onload——页面的全部资源加载完才会执行，包括图片、视频等
DOMContentLoaded——DOM 渲染完即可执行，此时图片、视频还没加载完