jQuery面试题：（第二天）

目录

5.你知道jQuery中的选择器吗，请讲一下有哪些选择器？

6.重绘与回流(重排)的理解?

7.script标签中的async和defer

8.你在jQuery中使用过哪些插入节点的方法，它们的区别是什么？

---

5.你知道jQuery中的选择器吗，请讲一下有哪些选择器？

选择器大致分为:基本选择器，复合选择器，过滤选择器，属性选择器，表单选择器

6.重绘与回流(重排)的理解?

浏览器的渲染顺序原理:

1.解析文档（HTML、SVG、XHTML），生成 DOM Tree

2.解析CSS，生成 CSSOM Rule Tree

3.根据 DOM Tree 和 CSSOM Rule 生成 Rendering Tree

4.布局

5.绘制

“回流 / 重排”和“重绘”的定义

①、回流的定义 ：当Rendering Tree 中部分元素的尺寸大小、布局、隐藏等属性改变时，浏览器的布局需要调整，则需要重新渲染DOM。这个过程就叫回流。回流也叫重排（对整个页面进行重新排版）。

②、重绘的定义：当元素属性的改变不影响DOM Tree的结构，即不会影响浏览器的布局，只是外观发生变化（如background-color，visibility等），那么针对新样式对元素进行重新绘制过程成为重绘。

③、二者的联系：

回流一定会引起重绘，重绘不一定引起回流。

回流需要重新渲染DOM，也要重新处理Rendering Tree。即回流的开销比重绘要大。

何时发生回流,比较好理解的，DOM元素发生变化。

1.引起回流(DOM元素发生变化)总结：

① 关于DOM元素

页面初始化渲染

添加或删除可见元素

元素位置发生变化

元素的尺寸大小发生变化（width,height,padding,border-width,margin等）

② 访问特定属性

offsetTop、offsetLeft、offsetWidth、offsetHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight

clientTop、clientLeft、clientWidth、clientHeight

③ 特定事件发生

浏览器窗口尺寸改变，即resize事件

页面初始化渲染

2.引起重绘

引起重绘的因素比较单一 ：仅仅改变的是某元素的外观或者说风格，不影响整个页面的布局，不会影响DOM。

比如:color,background-color,visibility,border-radius,border-style,border-color等

3.如何减少回流 / 重绘

避免逐次改变样式，样式统一批量修改

如果是一个属性一个属性改，那么就会引起多次回流：

const ele = document.getElementById('test');
ele.style.width = '100px';
ele.style.height = '200px';
ele.style.border = '1px solid black'

以上引起三次回流。

可以合并到一个类里，统一添加进行优化：

adding-style{
	width: 100px;
	height: 200px;
	border: 1px solid red;
}
var ele = document.getElementById('test');
ele.className='adding-style';

7.script标签中的async和defer

script 标签用于执行和加载脚本，直接使用script 脚本的话，html 会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染

script 提供了两种方式来解决上述问题，async 和 defer , 这两个属性使得 script 都不会阻塞 DOM 的渲染

async：async的设置，会使得script脚本异步加载并在允许的情况下执行；async 的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行

defer：如果 script 标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染，如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script;defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行

8.你在jQuery中使用过哪些插入节点的方法，它们的区别是什么？

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore()

• 内添加

1.append()在文档内添加元素

2.appendTo()把匹配的元素添加到对象里

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到对象前

• 外添加

1.before()在元素之前添加

2.insertBefore()把匹配元素在对象前添加

3.after()在元素之后添加

4.insertAfter()把匹配元素在对象后添加