# 前言
一起重温下 HTML，CSS 和 JS 中核心的知识点，浏览器的解析渲染原理，CSS面向对象编程，最后通过实践 Promise 封装一个Ajax请求(面试专用)。
# 前端基础知识源码地址
# 通过本章读者可以学习到什么？
- 浏览器的解析原理是如何，服务端传输过来的
text/html字符串是如何绘制成页面？ - H5 的 Meta 标签配置是如何，不同属性有什么作用？
- CSS 面向对象编程，BEM的规范又是什么，它们两者是如何结合？
- CSS 主流的布局，如何轻松应对页面布局？
- Promise 的实现原理，应用场景，以及如何和 async await 配合使用？
# 浏览器解析原理
# 浏览器总的解析原理
浏览器的解析过程：浏览器文档流 -> html DOM结构 --> CSS结合 --> 布局 --> 绘制页面。
HTML的渲染过程中，DOM 和 CSSOM 结构可以并行渲染。
# 第一步 HTML 转换成 DOM
服务端返回
text/html格式的文档流， HTML 字符串描述了一个页面的结构，浏览器会把 HTML 字符串解析成 DOM 树形结构。
# 第二步 生成 CSSOM 结构
CSS 样式可以在 WEB 页面里映射成 CSSOM（CSS对象模型），它和 DOM 结构比较像, 不是增量模式，而是组合模式。
# 第三步 CSSOM 树和 DOM 树合并成渲染树
# 第四步 完整 DOM 结构
DOM 结构有两个规则：一个是 HTML 文档对象，一个是通过接口获取 DOM 元素。通过
document.getElementById()以获取元素节点
# 性能优化策略
基于上面介绍的浏览器构建原理，DOM 树型结构的构建顺序，可以对页面渲染做些优化，提升体验。
基于上面介绍的浏览器构建原理，DOM 树型结构的构建顺序，可以对页面渲染做些优化，提升体验。
- JS优化：
<script>标签加上 defer属性 和 async属性， 不阻塞页面文档解析，控制脚本的下载和执行。- defer属性： 用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
- async属性： HTML5 新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码
Preload优化： preload(预加载) 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源
preload 有如下配置属性，
<link>为标签,ref="preload"为预加载属性配置，href="/test.css"为加载的资源，as="style"为加载的资源类型。
# 用例代码
我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用，同时也可以预加载图片，字体等文件。
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
// 1. 浏览器可以预先加载style.css, main.js的资源
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script"&g
