# 一、如何设置获取盒模型的宽和高？

1. dom.style.width/height

   原理：这种方式只能取到 dom 元素内联样式所设置的宽高；也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的

2. dom.currentStyle.width/height

   原理：获取渲染后的宽高。但是仅 IE 支持

3. window.getComputedStyle(dom).width/height

   原理：与 2 原理相似，但是兼容性，通用性更好一些

4. dom.getBoundingClientRect().width/height

   原理： 计算元素绝对位置，获取到四个元素 left,top,width,height

# 二、Dom、CSS、JS 的关系？

DOM: 有解析和渲染

DOM 解析：把所写的各种 html 标签，生成一个 DOM TREE，相当于是生成了一个最原始的页面，一点样式都没有，毫无 CSS 修饰

DOM 渲染：浏览器会把本身默认的样式 + 用户自己写得样式整合到一起，形成一个CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一起，生成一个Render TREE，呈现出一个带有样式的页面

• DOM 与 CSS

1. css 的加载不会阻塞 DOM 的解析
2. css 的加载会阻塞 DOM 的渲染

• DOM 与 JS

1. JS（加载和执行） 都会阻塞 DOM 的解析
2. JS（加载和执行） 都会阻塞 DOM 的渲染

注：html 中每遇到 <script> 标签，页面就会重新渲染一次，因为要保证标签中的 JS 代码拿到的都是最新的样式

• CSS 与 JS

1. CSS 的加载阻塞 JS 的运行，不阻塞 JS 的加载

注：CSS 的渲染 GUI 线程和 JS 运行线程互斥

# 三、async 与 defer 的区别？

两者都不会阻止 DOM 的解析；DomContentLoaded(dom 元素是否加载完成)

1. 既没有 defer 也没有 async 属性，则浏览器遇到该 script 标签时，会立即加载并执行指定的脚本。执行完毕后，才继续解析后面的标签

2. 有 async 属性，浏览器遇到该 script 标签时，加载脚本的过程与解析后面标签的过程同时进行。加载完毕后，单独执行该脚本

3. 有 defer 属性，浏览器遇到该 script 标签时，加载脚本的过程与解析后面标签的过程同时进行。但是执行脚本的过程，在解析完所有元素之后才执行

# 四、HTML5 有哪些新标签

header,section,footer,aside,nav,main,article,figure,localStorage和sessionStorage，audio/video/svg等

注意：合理的标签做合理的事!