前端面试投递day2

2023.3.4周六，投递金山前端两天......决心认真的记录一下，弥补一下罪恶的前两年大学生活......也为了后面能找到份工作......

1.回流和重绘

DOM性能大部分被这两个问题消耗。

1.1重绘

DOM树没有元素增加或删除，指颜色等不改变布局的属性变化，只重构CSS树。

1.2回流

DOM树有元素被增加或删除，页面布局发生改变，需要重新构建DOM树，耗能更多。

回流必定重绘，但重绘不一定回流。

Vue和react增加了虚拟DOM技术，目的就是减少回流和重绘的消耗。(question:虚拟DOM)

页面至少经历一次回流，就是页面刚加载的时候！

1.3减少重绘和回流措施：

• 使元素脱离文档流(个人理解：不影响其他元素布局)

脱离文档流的过程(1)：隐藏元素，进行多重改变,最后将其显示出来，这样只触发两次重排

• 用某个片段在DOM树之外构建一个子树，再把它拷贝回文档

• 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。

2.meta标签的作用

2.1概括

* 标签不会显示在页面上，对机器可读，用于:如何显示内容、重新加载页面、关键词等功能。

2http-equiv

http-equiv属性使添加http头部内容，想浏览器传回一些有用的信息

Expires:设置网页的到期时间。
Refresh:自动刷新并指向新页面。
Set-Cookie:如果网页到期，存盘的cookie被删除。
Window-target:强制页面在当前窗口以独立的页面显示出来
content-Type:设定页面使用的字符集。
Pragma:禁止浏览器读缓存。

2.3name

用于描述网页，对于一些浏览器兼容性问题，name属性是最常用的。

keywords:告诉搜索引擎，网站的关键字
description:用一段文字描述网站的主要内容
robots:告诉搜索机器人哪些页面需要索引
author:标注网页作者

2.4content

当有http-equiv或name属性的时候，一定要有content属性对其进行说明。

2.5charset

2.6作用：

• 帮助主页被各大搜索引擎登录

• 定义页面使用的语言，各种属性的配置信息(内核，强制显示，全屏......)

3.CSS选择器

按照优先级顺序

!important,内联样式权重最高
id选择器
class选择器、伪类选择器、属性选择器
标签选择器、伪元素选择器
通配选择器

复合选择器

交集选择器:选择器1 选择器2...{}

并集选择器:选择器1，选择器2，选择器3...{}

css3新增

属性选择器

通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。

为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。

[attr*="val"] 匹配属性包含特定值的元素。

[attr^='val']

[attr$='val']

[attr='val']匹配元素等于特定值的元素

伪类选择器 :

E:first-child

E:last-child

E:nth-child(n)

E:nth-last-child(n)

常见的：

E:hover

E:focus

E:checked

伪元素选择器

before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。图片文字的应用。

before选择器用于在某个元素之前插入内容。

: before {

content:文字或其他内容

}

after选择器用于在某个元素之后插入内容。

: after {

content:文字或其他内容

}

4.script标签中defer和async的区别

html

正常情况下执行，遇到script标签，首先要下载js脚本，然后加载js脚本，然后进行后续的解析。

defer

遇到script，异步下载js脚本，等页面文档解析完成后，依次解析js脚本。

async

异步下载js脚本，下载完成后，停止html解析，进行js脚本解析。

5.js的数据类型

基本数据类型

undefined(未定义)、null(空的)、number(数字)、boolean(布尔值)、String(字符串)、Symbol(先pass)

重点捡几个写一些：

undefined和null的区别:

1. ==的时候为true，===的时候为false

2. null代表空值，代表一个空对象指针，表示该处不应该有值

应用：作为函数的参数，表示该函数的参数不是对象。

            作为对象原型链的重点。

3. undefined表示缺少值，此处应该有一个值，但是还没定义

变量被声明，但没有赋值。

调用函数，应该提供的参数未提供。

对象中没有被赋值的属性，属性值为undefined。

函数没提供返回值，return后面什么都没有。

4. 相似性：在if中都被转为false

                undefined被转为NaN，null转为0

number中的NaN:

1.Not a Number

2.一个不能被解析的数字

Number('abc') // NaN
Number(undefined) // NaN

3.失败的操作

Math.log(-1) // NaN
Math.sqrt(-1) // NaN
Math.acos(2)  // NaN

4.一个运算为NaN

NaN + 1 // NaN
10 / NaN  // NaN

5.唯一一个和自身不相等的值

NaN === NaN  // false

6.判别：将isNaN()和typeof结合来判断

function isValueNaN(value) {
	return typeof value === 'number' && isNaN(value)
}

值是否与本身不相等（NaN是唯一有这样特征的值）

function isValueNaN(value) {
	return value !== value
}

引用数据类型

除了基本数据，万物皆对象！

Object : array , function ,

区别

基本数据类型存储在栈中，占空间小。

引用数据类型存放在堆中，但是在栈中存放着具体内容的引用地址，通过这个地址来快速查找对象。