登记表问卷

  1. CSS常用选择器，选择器权重关系是什么？

https://www.yuque.com/cuggz/interview/evfmq3#0b8677193fdf161411b6ce2013b6ad29

https://www.cnblogs.com/zxjwlh/p/6213239.html

CSS常用选择器：
id选择器（#id）
类选择器（.class）
伪类选择器（li:last-child）
标签选择器（div, span, p）
属性选择器（a[ref=”attr”]）
后代选择器（ul>li）

选择器权重关系：
（!important > 行内样式）>ID选择器 > 类选择器=伪类选择器 > 标签选择器 > 通配符 > （继承 > 浏览器默认属性）
如果优先级相同，则最后出现的样式生效。

  1. 浏览器页面渲染的流程是什么（输入url后页面发生什么）？

1、输入网址
2、解析url
3、判断资源是否在缓存里
4、DNS解析，获取IP地址
5、获取目的主机MAC地址
6、三次握手建立tcp连接
7、客户端发送HTTP请求（如果是HTTPS，则需要进行TLS握手）
8、服务器处理请求，返回数据
9、页面渲染，构建DOM树以及CSSOM树，根据他们构建渲染树，布局完成后进行绘制
10、四次挥手释放连接

https://www.yuque.com/cuggz/interview/cdpgm0#6da1820b

  1. 常用的前端缓存数据方式有哪些？说出他们的优缺点。

URL：存储有限，数据直接放到url上面，不能放敏感信息
Cookie：存储有限，每次请求都会带上cookie，会造成请求资源浪费
DOM节点：H5标准通过data-xx为节点添加自定义属性，存储有限，DOM操作的时候非常方便。
本地存储（storage）：存储5M左右，可以永久存储和会话存储，api方便，只能存字符串。
indexDB：前端数据库，以键值对的方式存储，可以做离线应用，学习成本高，使用场景少。

  1. 说出 a 和 b的输出值，以及原因 let a = { n: 1 }; let b = a; a.x = a = { n: 2 }; console.log(a); console.log(b);

输出值：
{ n: 2 }
{ n: 1, x: { n: 2 } }

原因：
let a = { n: 1 }; 声明变量 a ，保存 { n: 1 } 对象的地址引用。
let b = a; 声明变量 b ，保存 a 指向的 { n: 1 } 对象的地址引用。
a.x = a = { n: 2 }; 首先看 a.x = a， { n: 1 } 对象中并没有 x ，因此会新建一个属性 x ，然后 a.x 等待赋值 a 指向的对象变为 {n: 1, x: undefined} 。接着看 a = { n: 2 }，a 会被重新赋值为对象 { n: 2 } 的引用，由于 a.x 在等待赋值，a.x 还是指向原来的 {n: 1, x: undefined} 对象，所以这里对象为 {n: 1, x: { n: 2 }}，因为 b 还指向该对象，所以并不会被清理。
所以最后变为：a = { n: 2 } ; b = {n: 1, x: { n: 2 }}。

https://blog.csdn.net/qq_33692349/article/details/103943242

曾晓灿

https://www.nowcoder.com/discuss/754981?type=post&order=time&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack

  1. 自我介绍

  2. 数组有哪些方法

https://zh.javascript.info/array-methods

  • arr.push(…items) —— 从尾端添加元素，
  • arr.pop() —— 从尾端提取元素，
  • arr.shift() —— 从首端提取元素，
  • arr.unshift(…items) —— 从首端添加元素。

arr.splice(start[, deleteCount, elem1,…, elemN])

它从索引 start 开始修改 arr：删除 deleteCount 个元素并在当前位置插入 elem1, …, elemN。最后返回已被删除元素的数组。
允许负向索引 从索引 -1（尾端前一位）删除 0 个元素，然后插入 3 和 4 arr.splice(-1,0,3,4);

arr.slice([start],[end])

它会返回一个新数组，将所有从索引 start 到 end（不包括 end）的数组项复制到一个新的数组。start 和 end 都可以是负数，在这种情况下，从末尾计算索引。
我们也可以不带参数地调用它：arr.slice() 会创建一个 arr 的副本。其通常用于获取副本，以进行不影响原始数组的进一步转换。

arr.concat(arg1, arg2…)

它接受任意数量的参数 —— 数组或值都可以。
结果是一个包含来自于 arr，然后是 arg1，arg2 的元素的新数组。
如果参数 argN 是一个数组，那么其中的所有元素都会被复制。否则，将复制参数本身。

arr.forEach(function(item, index, array){// … do something with item});

arr.forEach 方法允许为数组的每个元素都运行一个函数

[“Bilbo”,”Gandalf”,”Nazgul”].forEach((item, index, array)=>{alert(${item} is at index ${index} in ${array});});

  • item 是元素。
  • index 是它的索引。
  • array 是数组本身。

搜索数组

arr.indexOf、arr.lastIndexOf 和 arr.includes 方法与字符串操作具有相同的语法，并且作用基本上也与字符串的方法相同，只不过这里是对数组元素而不是字符进行操作：

  • arr.indexOf(item, from) 从索引 from 开始搜索 item，如果找到则返回索引，否则返回 -1。
  • arr.lastIndexOf(item, from) —— 和上面相同，只是从右向左搜索。
  • arr.includes(item, from) —— 从索引 from 开始搜索 item，如果找到则返回 true（译注：如果没找到，则返回 false）。


let result = arr.find(function(item, index, array){// 如果返回 true，则返回 item 并停止迭代// 对于假值（falsy）的情况，则返回 undefined});

arr.findIndex 方法（与 arr.find 方法）基本上是一样的，但它返回找到元素的索引，而不是元素本身。并且在未找到任何内容时返回 -1。

filter

find 方法搜索的是使函数返回 true 的第一个（单个）元素。
如果需要匹配的有很多，我们可以使用 arr.filter(fn)。
let results = arr.filter(function(item, index, array){// 如果 true item 被 push 到 results，迭代继续// 如果什么都没找到，则返回空数组});

map

arr.map 方法是最有用和经常使用的方法之一。
它对数组的每个元素都调用函数，并返回结果数组。
语法：

let result = arr.map(function(item, index, array){// 返回新值而不是当前元素})

reduce

当我们需要遍历一个数组时 —— 我们可以使用 forEach，for 或 for..of。
当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 map。

arr.reduce 方法和 arr.reduceRight 方法和上面的种类差不多，但稍微复杂一点。它们用于根据数组计算单个值。

let value = arr.reduce(function(accumulator, item, index, array){// …},[initial]);

该函数一个接一个地应用于所有数组元素，并将其结果“搬运（carry on）”到下一个调用。
参数：

  • accumulator —— 是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。
  • item —— 当前的数组元素。
  • index —— 当前索引。
  • arr —— 数组本身。

应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。
因此，第一个参数本质上是累加器，用于存储所有先前执行的组合结果。最后，它成为 reduce 的结果。

sort

arr.sort 方法对数组进行 原位（in-place） 排序，更改元素的顺序。(译注：原位是指在此数组内，而非生成一个新数组。)
它还返回排序后的数组，但是返回值通常会被忽略，因为修改了 arr 本身。

这些元素默认情况下被按字符串进行排序。
从字面上看，所有元素都被转换为字符串，然后进行比较。对于字符串，按照词典顺序进行排序，实际上应该是 “2” > “15”。
要使用我们自己的排序顺序，我们需要提供一个函数作为 arr.sort() 的参数。

let arr =[1,2,15];
arr.sort( (a, b) => a - b );
alert(arr);// 1, 2, 15

reverse

arr.reverse 方法用于颠倒 arr 中元素的顺序。

split 和 join

str.split(delim) 方法通过给定的分隔符 delim 将字符串分割成一个数组。
arr.join(glue) 与 split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。

Array.isArray

数组是基于对象的，不构成单独的语言类型。
所以 typeof 不能帮助从数组中区分出普通对象：

……但是数组经常被使用，因此有一种特殊的方法用于判断：Array.isArray(value)。如果 value 是一个数组，则返回 true；否则返回 false。

  1. 排序有哪些算法，问了选择排序的实现

https://blog.csdn.net/YongxiaWu/article/details/90238595?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link

  1. Promise有哪些API，all 和 race的区别

https://www.yuque.com/cuggz/interview/vgbphi#b879ec3363a87a7dbb933a053ed08707

race： https://blog.csdn.net/z18237613052/article/details/114829686?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242

all 就是如果所有的promise都resolved了，则all也resolved
race 就是以第一个完成的状态为自己的状态，可以规定某一个事情在一段时间内完成，完成不了就不做了。

  1. Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})
  1. 宏任务和微任务的区别

eventloop：https://www.cnblogs.com/gxw123/p/13301687.html

  1. setTimeout是不是到了那个时间点就一定执行？
  2. 项目图片懒加载怎么做，实现原理
  3. MVVM 和 MVC
  4. webpack常用配置有哪些
  5. Loader 和 Plugin 的区别

opacity 和 rgba