金山前端面试题

1 回流和重绘，如何减少？

回流是指页面元素的位置、大小改变引起布局的改变，需要重新构建渲染树

重绘是指页面的颜色等不影响布局改变的样式发生改变，需要重新构建CSSOM树

1. 对需要进行复杂布局的元素，可以在一开始将其隐藏，最后再将其显示，这样就只会触发两次重排
2. 对单个元素多次改变的样式操作合并位一次
3. 将需要改变位置、大小的元素位置设为fixed或absoluted，这样它样式的改变就不会影响其他元素

2 meta标签的属性

1. name：用于描述网页
   name属性中包含content便于搜索引擎机器人查找信息和分类信息

（1）keywords：用于告诉搜索引擎网站关键字
（2）description：用于告诉搜索引擎网站的主要内容
（3）robots：用于告诉搜索机器人哪些页面需要索引
（4）author：标注网页的作者

2. http-equiv：http文件头，向浏览器传回一些有用的信息

（1）Expires：设置网页的到期时间
（2）Pragma：禁止浏览器从本地计算机的缓存中访问页面内容
（3）Refresh：自动刷新并指向新页面
（4）Set-Cookie：如果网页过期，存盘的cookie将被删除
（5）Window-target：强制页面在当前窗口以独立页面显示
（6）content-Type：设定页面使用的字符集

meta标签的功能：

1、帮助主页被各大搜索引擎登录
2、定义页面的使用语言
3、自动刷新并指向新的页面
4、实现网页转换时的动画效果

3 CSS选择器有哪些？

按照优先级排序：

（1）id选择器
（2）class选择器、伪类选择器、属性选择器
（3）标签选择器、伪元素选择器

注：内联样式和！important权重优先级更高

4 script标签中defer和async的区别

1. defer：js脚本的执行需要等到所有文档元素解析完成之后，DOMContentLoaded事件触发执行之前
2. async：文档的加载和js脚本的加载是并行进行的，但脚本下载完成后会停止HTML解析，执行脚本，脚本解析完继续HTML解析

5 js的数据类型

一个八个：Boolean、Array、String、Number、Object、Symbol、undefined、null

6 怎么判断js的数据类型

1. typeof
2. toString.call()
3. constructor

7 JS中set和map的区别

1. set类似于数组，所有元素只有key没有value，value就是key，不允许出现键值重复
2. map类似于对象，区别在于map的值不作为键，键和值是分开的，键不能重复和修改，但值可以

8 Js中set和Array的区别

• set的值不能重复

9 Js中map和object的区别

• 在object中，键必须为简单数据类型（string、symbol或整数），而在map中key可以为js的任意数据类型
• map的大小可以通过size属性直接获取，object的大小必须通过自行获取
• map是可迭代对象，object无法被for…of直接迭代，但可以通过object.keys()
• map元素的顺序遵循插入的顺序

10 遍历对象的方法

1. for…in
2. for…of
3. Object.keys

11 浏览器缓存

浏览器的缓存过程如下：

• 开始加载，域名解析，DNS缓存
• 本地缓存（memory缓存）
• Http缓存
• 服务端缓存

DNS缓存

网址包含的域名和端口指向唯一的ip地址，通过域名查找ip地址的过程就是dns解析，这个过程会对网络请求带来一定的损耗，所以浏览器在第一次获取到IP地址后，会将其缓存起来，下次相同域名再次发起请求时，浏览器会先查找本地缓存，如果缓存有效，则会直接返回该ip地址，否则会继续开始寻址之旅

DNS查询过程如下：

1. 首先搜索浏览器自身的DNS缓存，如果存在，则域名解析到此完成；
2. 如果浏览器自身的缓存没有找到对应的条目，会尝试读取操作系统的hosts文件看是否存在对应的映射关系，如果存在，则域名解析到此完成；
3. 如果没有对应的映射关系，则查找本地dns服务器（ISP服务器），如果存在，则域名解析到此完成；
4. 如果本地dns服务器还没有找到，则向根服务器发出请求，进行递归查询

本地缓存

几乎所有的网络请求资源都会根据相关的策略被浏览器自动加入本地缓存中，当数据量过大时，即使网页不关闭，缓存依然失效

Http缓存：强制缓存和协商缓存

（1）强制缓存
包含两个控制字段“Expires和Cache-control（优先级较高）

当客户端发出一个请求到服务器，服务器希望你把资源缓存起来，于是在响应头中加入了这些内容

Cache-control：max-age=3600 //缓存时间3600s
Expires:Thu, 10 Nov 2020 08:45:11 GMT //达到指定时间过期

Cache-control为http/1.1中的内容，expires为http/1.0中的内容

之后当客户端准备再次请求相应的地址时，它会先去缓存中寻找是否有缓存的资源，流程如下：
发出请求->是否有匹配的缓存？->缓存是否还有效？->不请求服务器，直接使用缓存

（2）协商缓存
当发现缓存无效时，它并不会简单的把缓存删除，而是先向服务器发出一个带缓存的请求

If-Modified-Since: Thu, 30 Apr 2020 08:16:31 GMT  //这个资源上一次修改的时间
If-None-Match: W/"121-171ca289ebf"  //资源的编号

If-None-Match的优先级高于If-Modified-Since

此时可能产生两个结果：

• 缓存失效：服务器再次给予一个正常的响应，同时可以附带上新的缓存指令，浏览器缓存新的内容
• 缓存有效：服务器返回304重定向，并且响应头带上新的缓存指令，浏览器做出相应的缓存动作

当浏览器再次访问一个已经访问过的资源时，它会这样做：

1. 根据相关字段判断是否命中强制缓存，如果命中，就直接使用缓存
2. 如果没有命中强制缓存，就发送请求到服务器中检查是否命中协商缓存
3. 如果命中协商缓存，服务器会返回304告诉浏览器使用本地缓存
4. 否则，返回最新的资源

12 js是单线程吗，说说单线程的好处

节省内存，节约上下文切换时间

13 浏览器的事件循环机制

事件循环是浏览器解决js单线程运行时不会阻塞的一种机制，即异步方法

为什么js是单线程？

如果js同时有两个线程，一个在某个DOM节点上添加内容，一个用于删除该DOM节点，这是浏览器应该以哪个线程为准？

任务队列

js为单线程意味着所有任务都需要排队，前一个任务执行完后再执行下一个任务。任务可分为两种：同步和异步。同步任务是指在主线程上排队执行的任务，异步任务是指不进入主线程、而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

异步任务包括宏任务和微任务

• 宏任务：script、setTimeout、setInternal、UI渲染
• 微任务：promise.then、mutationObserver

事件循环

1. 整体script（作为第一个宏任务）开始执行时，会将所有代码分为两个部分：同步任务、异步任务
2. 同步任务会直接进入主线程依次执行
3. 异步任务会再分为宏任务和微任务
4. 宏任务、微任务会进入到不同的事件表中，并在里面注册回调函数，每当指定的事件完成时，事件表会将这个函数移到事件队列中
5. 当主线程的任务执行完毕，主线程为空时，会检查微任务的事件队列，如果有，就全部执行，如果没有就执行下一个宏任务

14 常见的浏览器安全问题

1. XSS：跨站脚本攻击
   通过非法的非本站点HTML标签或js进行攻击
   常见操作：
   1、利用虚假输入表单骗取用户个人信息
   2、利用脚本窃取用户的cookie值
   3、显示伪造的文章图片

防范手段：内容安全策略（CSP），通过建立白名单告诉浏览器哪些外部资源可以加载和执
2. CRSF：跨站请求伪造，通过恶意引导用户一次点击劫持cookie进行攻击

15 浏览器数据存储方式

16 vue组件通信

1、父子组件之间：子组件$emit发送事件，父组件v-on监听子组件发送过来的事件
2、事件总线
3、vuex管理状态，通过mutations或actions变更state中的值

17 vue中key的作用

首先需要知道虚拟DOM，虚拟DOM是为了解决浏览器性能而设计出来的，如果一次操作中需要多次更新DOM,虚拟DOM并不会立即操作DOM，而是将这些操作更新的diff内容保存在本地js文件中，最后将该js一次性绑定到DOM树上。

总之，为了减少页面渲染，引出虚拟DOM，将所有视图上的更新先反映再虚拟dom上，再利用虚拟dom一次性更新视图

而key的作用就是为了高效更新虚拟DOM，如果不加key值，对于相同节点diff算法更新如下：

这样就比较蠢，先把C->F,D->C,E->D，最后再插入E,没有效率

所以我们需要使用key给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置插入新的节点。

18 vue的diff算法

很难理解！！！！

19 webpack流程

这有点多，难背i

20 webpack的优化

21 webpack中loader和plugin的区别

22 前端怎么做性能优化