imooc（五）

1. 渲染机制

什么是DOCTYPE及作用 → 浏览器渲染过程 → 重排Reflow → 重绘Repaint → 布局Layout

1.1 什么是`DOCTYPE`及作用

DTD （document type definition，文档类型定义）是一系列的语法规则，用来定义 XML 或 (X)HTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

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

HTML 5

1	<!DOCTYPE html>

HTML 4.01 Strict

1
2

//该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

1
2
3

//该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

1.2 浏览器如何渲染页面

浏览器解析

1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、img等等）；

2、HTML 文件加载后开始构建 DOM Tree；

3、CSS 文件加载后开始解析和构建 CSS Rule Tree；

4、Javascript 脚本文件加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree

浏览器渲染

浏览器渲染主要有三个步骤：

1、解析。浏览器会解析HTML/SVG/XHTML，浏览器解析这三种文件会产生一个DOM Tree；解析CSS，产生style rules；解析Javacript，主要通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。

2、解析完成后，浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree。

3、调用操作系统Native GUI的API绘制。

1.3 重排 Reflow 和重绘 Repaint 注1 注2

Reflow

当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）

当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候。
当你修改CSS样式的时候。
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
当你修改网页的默认字体时。

注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

Repaint
当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。

屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。

2. JS运行机制

JavaScript 运行机制详解

如何理解JS的单线程 → 什么是任务队列 → 什么是Event Loop

异步任务：setInterval()和setTimeout、DOM事件、ES6中的Promise

3. 页面性能关于页面性能

题目：提升页面性能的方法有哪些？

1、资源压缩合并，减少HTTP请求；

2、非核心代码异步加载（异步加载的方式、异步加载的区别）

3、利用浏览器缓存（缓存的分类、缓存的原理）

4、使用CDN

5、预解析DNS

1 2	<meta http-equiv="x-dns-prefetch-control" content="on" /> <link rel="dns-prefetch" href="//host_name_to_prefetch.com" />

3. 1 异步加载的方式

1、动态脚本加载

(function(){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var tmp = document.getElementsByTagName('script')[0];
    tmp.parentNode.insertBefore(script, tmp);
})();
//兼容所有浏览器

2、defer

<script>标签的defer="defer"属性
defer属性规定是否对脚本执行进行延迟，直到页面加载为止
如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
兼容所有浏览器
此方法可以确保所有设置了defer属性的脚本按顺序执行

3、async

<script>标签的async="async"属性
async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
async属性规定一旦脚本可用，则会异步执行
async属性仅适用于外部脚本
此方法不能保证脚本按顺序执行

3.2 异步加载的区别

1、defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行；

2、async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

3.3 浏览器缓存注

强制缓存：

Expires：服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改下客户端时间，就能影响缓存命中的结果。

Cache-Control：是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示。

协商缓存：

Last-Modified、If-Modified-Since:

ETag、If-None-Match：

4. 错误监控

前端错误的分类 → 错误的捕获方式 → 上报错误的基本原理

4.1 前端错误的分类

即时运行错误：代码错误

资源加载错误

4.2 错误的捕获方式

即时运行错误的捕获方式：

1
2
3

1. try..catch

2.window.onerror

资源加载错误：

1.object.onerror

2.performance.getEntries()

3.Error事件捕获

延伸：跨域的JS运行错误可以捕获吗，错误提示什么，应该怎么处理？

1 2	1.在script标签增加crossing属性 2.设置js资源响应头Access-Control-Origin：*

4.3上报错误的基本原理

1、采用Ajax通信的方式上报

2、利用Image对象上报

1	(new Image()).src="http://baidu.com/test?r=bhhj";