前言：
今天我们对“ajax前端渲染”大约比较看重，我们都需要知道一些“ajax前端渲染”的相关文章。那么小编在网摘上收集了一些有关“ajax前端渲染””的相关资讯，希望咱们能喜欢，咱们一起来学习一下吧！浏览器内核
不同的浏览器内核，渲染过程也不完全相同，但大致流程都差不多。
基本流程
1.HTML 解析
首先要知道浏览器解析是从上往下一行一行地解析的。
解析的过程可以分为四个步骤：
1. 解码（encoding）
传输回来的其实都是一些二进制字节数据，浏览器需要根据文件指定编码（例如UTF-8）转换成字符串，也就是HTML 代码。
2. 预解析（pre-parsing）
预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。
3. 符号化（Tokenization）
符号化是词法分析的过程，将输入解析成符号，HTML 符号包括，开始标签、结束标签、属性名和属性值。
它通过一个状态机去识别符号的状态，比如遇到<，>状态都会产生变化。
4. 构建树（tree construction）
注意：符号化和构建树是并行操作的，也就是说只要解析到一个开始标签，就会创建一个 DOM 节点。
在上一步符号化中，解析器获得这些标记，然后以合适的方法创建DOM对象并把这些符号插入到DOM对象中。
<html><head> <title>Web page parsing</title></head><body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div></body></html>
浏览器容错进制
你从来没有在浏览器看过类似”语法无效”的错误，这是因为浏览器去纠正错误的语法，然后继续工作。
事件
当整个解析的过程完成以后，浏览器会通过DOMContentLoaded事件来通知DOM解析完成。
2. CSS 解析
一旦浏览器下载了 CSS，CSS 解析器就会处理它遇到的任何 CSS，根据语法规范解析出所有的 CSS 并进行标记化，然后我们得到一个规则表。
CSS 匹配规则
在匹配一个节点对应的 CSS 规则时，是按照从右到左的顺序的，例如：div p { font-size :14px }会先寻找所有的p标签然后判断它的父元素是否为div。
所以我们写 CSS 时，尽量用 id 和 class，千万不要过度层叠。
3. 渲染树
其实这就是一个 DOM 树和 CSS 规则树合并的过程。
注意：渲染树会忽略那些不需要渲染的节点，比如设置了display:none的节点。
计算
通过计算让任何尺寸值都减少到三个可能之一：auto、百分比、px，比如把rem转化为px。
级联
浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素，所以它使用一个叫做specificity的公式，这个公式会通过：
标签名、class、id是否内联样式!important
然后得出一个权重值，取最高的那个。
渲染阻塞
当遇到一个script标签时，DOM 构建会被暂停，直至脚本完成执行，然后继续构建 DOM 树。
但如果 JS 依赖 CSS 样式，而它还没有被下载和构建时，浏览器就会延迟脚本执行，直至 CSS Rules 被构建。
所有我们知道：
CSS 会阻塞 JS 执行JS 会阻塞后面的 DOM 解析
为了避免这种情况，应该以下原则：
CSS 资源排在 JavaScript 资源前面JS 放在 HTML 最底部，也就是 </body>前
另外，如果要改变阻塞模式，可以使用 defer 与 async，详见：这篇文章
4. 布局与绘制
确定渲染树种所有节点的几何属性，比如：位置、大小等等，最后输入一个盒子模型，它能精准地捕获到每个元素在屏幕内的准确位置与大小。
然后遍历渲染树，调用渲染器的 paint() 方法在屏幕上显示其内容。
5. 合并渲染层
把以上绘制的所有图片合并，最终输出一张图片。
6. 回流与重绘
回流(reflow)
当浏览器发现某个部分发现变化影响了布局时，需要倒回去重新渲染，会从html标签开始递归往下，重新计算位置和大小。
reflow基本是无法避免的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变化。
重绘(repaint)
改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。
每次重绘后，浏览器还需要合并渲染层并输出到屏幕上。
回流的成本要比重绘高很多，所以我们应该尽量避免产生回流。
比如：
display:none 会触发回流，而 visibility:hidden 只会触发重绘。
7. JavaScript 编译执行
大致流程
可以分为三个阶段：
1. 词法分析
JS 脚本加载完毕后，会首先进入语法分析阶段，它首先会分析代码块的语法是否正确，不正确则抛出“语法错误”，停止执行。
几个步骤：
分词，例如将var a = 2，，分成var、a、=、2这样的词法单元。解析，将词法单元转换成抽象语法树（AST）。代码生成，将抽象语法树转换成机器指令。
2. 预编译
JS 有三种运行环境：
全局环境函数环境eval
每进入一个不同的运行环境都会创建一个对应的执行上下文，根据不同的上下文环境，形成一个函数调用栈，栈底永远是全局执行上下文，栈顶则永远是当前执行上下文。
创建执行上下文
创建执行上下文的过程中，主要做了以下三件事：
创建变量对象参数、函数、变量建立作用域链确认当前执行环境是否能访问变量确定 This 指向
3. 执行
JS 线程
虽然 JS 是单线程的，但实际上参与工作的线程一共有四个：
其中三个只是协助，只有 JS 引擎线程是真正执行的JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行定时器触发线程：主要控制setInterval和setTimeout，用来计时，计时完毕后，则把定时器的处理函数推进事件队列中，等待 JS 引擎线程。HTTP 异步请求线程：通过XMLHttpRequest连接后，通过浏览器新开的一个线程，监控readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待JS引擎线程执行。
注：浏览器对同一域名的并发连接数是有限的，通常为 6 个。
宏任务
分为：
同步任务：按照顺序执行，只有前一个任务完成后，才能执行后一个任务异步任务：不直接执行，只有满足触发条件时，相关的线程将该异步任务推进任务队列中，等待JS引擎主线程上的任务执行完毕时才开始执行，例如异步Ajax、DOM事件，setTimeout等。
微任务
微任务是ES6和Node环境下的，主要 API 有：Promise，process.nextTick。
微任务的执行在宏任务的同步任务之后，在异步任务之前。
代码例子
console.log('1'); // 宏任务 同步setTimeout(function() { console.log('2'); // 宏任务 异步})new Promise(function(resolve) { console.log('3'); // 宏任务 同步 resolve();}).then(function() { console.log('4') // 微任务})console.log('5') // 宏任务 同步以上代码输出顺序为：1,3,5,4,2
标签： #ajax前端渲染
