JavaScript 面试题集合--2021.1.18

1. link和@import的区别

1.link是XHTML标签，除了加载css外，还可以定义rss等其他事务；@import属于css范畴，只能加载css。
2.link引用css时，在页面载入的同时加载；@import需要页面网页完全载入之后加载。
3.link是XHTML标签，没有兼容性问题；@import是在css2.1i提出的，对低版本浏览器不支持。
4.link支持js控制dom去改变样式；@import不支持。
5.link方式的样式权重高于@import的权重。

2. XHTML和HTML的区别

1.XHTML是基于可扩展标记语言（XML);HTML是基于标准通用标记语言（SGML)。
2.XHTML对于大小写敏感，标准的XHTML标签都是用小写，HTML对大小写不敏感。
可以认为XHTML是符合XML标注的HTML，对语法的苛刻程度和其他基于XML的语言一样。

3. JS中的定时器

1.setTimeout 只会执行一次。
2.setInterval 会一直重复执行

4. cookies sessionStorage和localstorage的区别

1.存储大小： cookie数据大小不能超过4k；sessionStorage和localStorage存储大小限制稍大，可达到5m或更大。
2.有效时间： localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionstorage数据存在当前浏览器，窗口关闭后自动删除；cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭。
3.数据和服务器之间的交互方式： cookie的数据会自动的传递到服务器，服务器也可以写cookie到客户端；sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

5. 渐进增强和优雅降级

1.渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才能支持的功能）
2.优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
3.区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

6.浏览器内核

IE–Trident、
FF(Mozilla)–Gecko、
Safari–Webkit、
Chrome–Blink（WebKit的分支）、
Opera–原为Presto，现为Blink。

7.浏览器的重绘与回流

1.浏览器渲染原理
浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM（文档对象模型），如果有css，会根据css生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合并产生渲染树，有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局。最后把节点绘制到浏览器上。

css的加载和解析不会阻塞html文档的解析
css的解析会阻塞js的执行，必须等到CSSOM生成后才能执行js
js的执行会阻塞html文档的解析
html一边解析一边显示
css必须完全解析完毕才能进入生成渲染树环节

创建DOM树—创建CSSOM树—执行脚本—生成渲染树—生成布局—绘制

2.重绘： 当页面元素样式改变不影响在文档流中的位置时（如background-color,visibity)，浏览器指挥将新的样式赋予元素并进行重新绘制操作。

3.回流：当改变的操作影响文档内容或结构，或者元素位置时，就会触发回流：

	DOM操作（对元素的增删改、顺序变化等）
	内容变化，包括表单区域内的文本变化
	css属性的更改或者重新计算
	增删样式表内容
	修改class属性
	浏览器窗口变化（滚动或缩放）
	伪类样式激活（：hover等）

回流一定会触发重绘，而重绘不一定会触发回流。

4.重绘基本无法避免，只能将回流对性能的影响减到最小：

1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className：

2. 把 DOM 离线后修改。如： a> 使用 documentFragment 对象在内存里操作 DOM。 b> 先把 DOM 给
   display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。 c>
   clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4. 尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。

5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow

6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。