面试题，后期还会更新

随便写写面试题，不是很全面，还会继续补充

一、浏览器和网络问题：
1、输入网址到页面显示的过程是什么？

用户输入ulr，按下enter之后，会发送到DNS获取对应域名的ip地址，然后客户端与服务器进行TCP连接，客户端对对应ip的服务器进行相应的http或者https请求，
服务器响应数据，返回指定的url数据或者错误信息，客户端下载数据，解析html源文件，实现网页的排版布局，最后分析超链接，显示在当前页面上。

2、js的运行机制是什么？

js是单线程语言，就是说是排队一个一个进行的，然后又拥有定时器这样的，这样就分为同步和异步，在异步又分为宏任务和微任务，
js的运行机制就是：先运行同步任务，在运行微任务，在进行宏任务。

3、TCP3次握手

第一次：客户端发送一个消息给服务器，告诉服务器我拥有发送的能力。
第二次：服务器返回一个消息给客户端，告诉客户端我拥有接收和发送的能力。
第三次：客户端发生一个数据给服务器，告诉服务器我拥有接收的能力。

4、TCP4次挥手

第一次：客户端发生消息给服务器说：我要来接收数据了。
第二次：服务器对客户端说：我要准备发数据了，准备接收。
第三次：服务器发送数据给客户端，并说，数据发送过来了。
第四次：客户端给服务器说：接收到数据啦，服务器可以关闭了。

5、http的原理

一个基于TCP传输协议的一个明文超文本传输。

6、web安全：常见攻击以及防御

（1）、CSRF攻击（跨站请求伪造）
1️⃣攻击流程：
①用户访问a.com，并保留登录凭证（cookie）
②攻击装引诱用户访问b.com
③b.com向a.com发生一个请求，浏览器会默认携带a.com的cookie
④a.com接收到数据的之后，对请求进行验证，并确认是受害者的凭证，误以为受害者自己发送过来的
⑤a.com以受害者的名义，执行了b.com发送的请求
⑥完成攻击
2️⃣攻击类型
①Get类型：只需要一个简单的HTTP请求
②POST类型：使用一个自动提交的表单
③链接类型
3️⃣CSRF特点
①CSRF通常发生在第三方域名
②CSRF不能获取到cookie，只是使用
4️⃣防护策略
①阻止不明外域的访问
同源检测
Samesite cookie
②提交时要求附加本域才能获得信息
CSRF Token
双重Cookie验证
5️⃣各个策略介绍
①同源检测
使用Origin Header来确定域名
使用Refeerer Header来确定域名
②Samesite Cookie：在set-cookie中新增Samesite属性
Samesite = Strict：表明这个Cookie任何情况下都不可能作为第三方Cookie
Samesite = Lax:宽松模式：假如这个请求是这种请求（改变了当前页面或者打开了新页面）且同时是个get请求，则这个Cookie可以作为第三方Cookie
③CSRF Tooken：用户打开页面时，服务器给这个用户生产了一个Token
将Token存放在服务器的Session中，之后每次页面加载时，使用js遍历整个DOM树，对于DOM中生成的所有a和from标签加入Token
页面提交的请求都要携带这个Token
服务器验证这个Token是否正确
④双重Token
用户访问网站时，想请求域名注入一个Cookie,内容为随机字符串
在前端想后端发起请求时，取出Cookie，并添加在url的参数中
后端接口验证Cookie中的字段与url参数中的字段是否一致，不一致则拒绝

（2）、XSS攻击（跨站脚本攻击）
1️⃣攻击方式
XSS，攻击者通过在目标网站注入恶意脚本，使之在用户的浏览器上运行，利用这些恶意脚本，攻击者可以获取用户的敏感信息，如：Cookie，SessionID等。注入方式有：
在HTML内嵌的文本中，恶意内容以script标签形成注入
在变迁的href src等属性中，包含javascript：等可执行代码
在onload、onerror、onclick等事件中注入不受控制的代码等待
2️⃣XSS分类
①存储型XSS
存储区：（恶意代码存放的位置）后端数据库
插入点：（由谁取得恶意代码，并插入到网页上）HTML
②反射型XSS
存储区：URL
插入点：HTML
③DOM型XSS
存储区：后端数据库/前端存储/URl
插入点：前端javascript
3️⃣攻击步骤
①存储型XSS
攻击者将恶意代码提交到目标网站的数据库中
用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在HTML中返回给浏览器
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
②反射型XSS
攻击者构造出特殊的URl，其中包含了恶意代码
用户打开带有恶意代码的URl时，网站服务器将恶意代码从URL中取出，拼接在HTML中返回给浏览器
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
③DOM型XSS
攻击者构造出特殊的URL，其中包含恶意代码
用户打开带有恶意代码的URl
用户浏览器接收到响应的数据后解析执行，前端javascript取出URL的恶意代码并执行
恶意代码窃取用户数据并发送到攻击者网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
三者区别：DOM型XSS攻击，取出和执行恶意代码由浏览器端完成，属于前端js自身安全的漏洞，其他两种XSS都属于服务端自身安漏洞
4️⃣防御策略
①防止HTML中出现注入
②防止javascript执行时，执行恶意代码
5️⃣防御步骤
①预防存储型和反射型XSS
改为纯前端渲染，把代码个数据分隔开
1、浏览器先加载一个静态的HTML，此HTML中不包含任何跟业务相关的数据
2、然后浏览器执行HTML中的javascript
3、javascript通过ajxs加载业务数据，调用DOM API更新到页面上
对HTML做充分转义
②预防DOM型XSS
在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等

如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端
render 阶段避免 innerHTML、outerHTML 的 XSS 隐患

DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等， 标签的
href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，
都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，如果项目中有用到这些的话，一定要避免在字符串中拼接不可信数据。

7、HTTP和HTTPS的区别

1️⃣ HTTPS协议需要到CA申请证书，一般免费的证书比较少，因而需要一定的费用
2️⃣ HTTP是超文本传输协议，信息是明文传输。HTTPS则是具有安全性的SSL/TLS加密传输协议
3️⃣ HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，HTTP是80，HTTPS是443
4️⃣ HTTP的连接很简单，是无状态的，HTTPS协议是由SSL/TSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全

二、HTML 语义化

1、为什么需要HTML5语义化

（1）、易维护、易修改
（2）、无障碍阅读支持
（3）、搜索引擎友好，利于SEO
（4）、面向未来的HTML，浏览器在未来可能提供更丰富的支持

2、HTML5新增的标签

 <header>头部标签
 <footer>尾部标签
 <nav>   导航标签
 <section>块级标签 
 <video> 视频标签
 <audio> 音频标签
 ...等等
 说出几个就好了 不用全部说

三、CSS

1、有多少种盒子模型？分别是什么？有什么区别？

2种，W3C盒子模型和 IE盒子模型
区别：W3C盒子模型：宽度 = width+padding+border+margin context-box（默认）
IE盒子模型： 宽度 = width + margin border-box

2、CSS选择器有哪些？优先级是怎样的？

选择器：id选择器，类选择器，标签选择器，相邻选择器，子选择器，后代选择器，通配符选择器，属性选择器，伪类选择器
优先级：!important>行内式>id选择器>类选择器>标签选择器>tag

3、如何让一个div水平垂直居中显示
（1）、定位方法
①

  div {
     border: 1px solid black;
     position: absolute;
     width: 200px;
     height: 100px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
  }

②

div {
   border: 1px solid black;
   position: absolute;
   width: 200px;
   height: 100px;
   left: 50%;
   top: 50%;
   transform: translate(-100px, -50px);
 }

③

div {
    border: 1px solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

④

div {
    border: 1px solid black;
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
}

（2）、flex布局
①

.app {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.son{
    border: 1px solid black;
    width: 200px;
    height: 100px;
}

4、display有什么值，并且说出他的作用？

none --隐藏
block --块级显示
inline-block --行内块显示
inline --内联
table --表格显示
list-item --项目显示

5、用css画一个三角形

div {
    width: 0px;
    height: 0px;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid skyblue;
}

6、display:none,visibility:hidden,opacity:0 有什么区别？
占据空间：

display:none ：不占据额外空间，会引起回流和重绘
visibility:hidden ：会占据额外空间，只会引起重绘
opacity:0 ：会占据而外空间，只会引起重绘

继承：

display:none ：不会被子元素继承，但是其自身隐藏，所以子元素也会被隐藏
visibility:hidden ：会被子元素继承，子元素可以通过设置 visibility:visible 重新显示
opacity:0 ：会被子元素继承，但子元素无法显示
事件绑定：
display:none ：不会触发
visibility:hidden ：不会触发
opacity:0 ：会触发
过渡动画：
display:none ：trasition 对其无效
visibility:hidden ：对其无效
opacity:0 ：对其有效
是否脱离文档流
display:none ：使元素脱离文档流，不会占据原来的空间，会引起页面的重排
visibility:hidden ：不会脱离文档流，元素不可视仍然占据原来的空间位置
opacity:0 ：不会脱离文档流，元素不可视仍然会占据原来的位置空间

7、css提高性能的方法有哪些？

1、避免过度约束
2、避免使用后代选择符
3、避免链式选择符
4、使用紧凑的语法
5、避免不必要的命名空间
6、避免没有必要的重复
7、最好使用表示语义的名字，一个好的类名是表述他是什么而不是他像什么
8、避免 !important，可以选择其他选择器
9、尽可能的精简规则，你可以合并不同类里的重复规则

8、浏览器怎么解析css选择器的？

css选择器是从右向左解析css，如果是从左向右的话，发现不符合规则的话，就会进行回溯，这样就会损失很多的性能。

9、前端布局的方式有哪些？

1、静态布局
2、弹性布局（flexbox）
3、自适应布局（bootstrap）
4、流式布局
5、响应式布局
6、浮动布局
7、定位布局

四、js

1、js的数据类型有哪些？
原始数据类型

1、number
2、string
3、boolean
4、underfined
5、null

引用数据类型

1、object(对象)
2、array(数组)
3、function（函数）

2、js原型和原型链

js中万物皆对象
__proto__是每一个对象又有的属性，prototype是函数对象特有的属性。
__proto__指向对象构造函数的protopyte，protopyte指向原型对象。

原型链

当访问一个对象的某个属性的时候，会先在这个对象的本身属性上找，如果没有找到，会去它的__proto__上找，即它的构造函数的prototype，
如果还没找到，会在构造函数的prototype的__proto__上找。这样一层层向上查找就会形成一个链式结构，称为原型链。

3、js继承

1、原型链继承
2、借用构造函数
3、组合继承
4、原型式继承
5、寄生式继承
6、寄生组合继承（最佳）
7、ES6 extends（最佳）

4、什么是闭包，闭包的作用和应用场景

闭包：闭包（closure）指有权访问另一个函数作用域中的变量的函数。
https://blog.csdn.net/tinglis/article/details/108631406?spm=1001.2014.3001.5501

5、js的排序方式：

1、冒泡排序
2、选择排序
3、插入排序
4、合并排序
5、快速排序
6、原生排序

6、节流和防抖
看我博客
https://blog.csdn.net/tinglis/article/details/114133691?spm=1001.2014.3001.5501

7、js定时器怎么把时间误差变成最小

（这里解释一下，为什么定时器会有误差。众所周知，js是一个单线程的语言，所以他一次只能处理一个事情，为了解决这个问题就出来了同步任务和异步任务，同步任务执行完成后执行异步任务，而异步任务又分为宏任务和微任务，微任务是先执行的，然后才是宏任务，而我们的定时器是宏任务，所以是最后执行的。）

（1）、使用动态计算定时时间的方式

逻辑：使用定时器时， 计算每次定时器执行的时间误差，在赋值给定时器的时间，因为是每次都赋值，所以使用的是setTimeout而不是setInterval。

let setTime =  new Date().getTime()
    let count = 0
    function fn(){
        count++
        let errTime = (new Date().getTime() - (setTime + count*1000))
        let nextTime =  (1000-errTime)>0?(1000-errTime):0
        console.log(count+'----'+nextTime);
        setTimeout(fn, nextTime);
    }
    setTimeout(fn, 1000);
    setInterval(() => {
        var i = 100000000;
        while(i-- > 0);
    }, 0);

（2）、多线程 – 使用 web Worker将定时函数作为独立线程执行

什么是 web Worker？
Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。

//html
var startTime = new Date().getTime();
    var count = 0;
    //耗时任务
    setInterval(function () {
      var i = 0;
      console.log(1123);
      while (i++ < 100000000);
    }, 0);
	//使用了 new Worker api
    let worker = new Worker("./worker.js");

//worker.js
var startTime = new Date().getTime();
var count = 0;
setInterval(function(){
    count++;
    console.log(count+'---'+(new Date().getTime() - (startTime + count * 1000)))
}, 1000)

8、js操作执行DOM事件的时候有几个阶段

js操作DOM事件的时候有3个阶段
（1）、捕获阶段
（2）、目标阶段
（3）、冒泡阶段

五、ES6

1、let和const

let不会产生变量的提升，在一个作用域内只能定义一个变量一次，let的值可以被改变
const不会产生变量的提升，只能被定义一次，const的值不可以被改变

2、map和set

set数组去重，map对象去掉重复的键值，

3、weakset和weakmap

weakset对象允许你将弱引用对象存储到一个集合中
weakset和set的区别
weakset只能储存对象引用，不能够放值，不会影响垃圾回收。而set对象都可以，会影响垃圾回收。 weakset不能遍历，没有size,
没有forEach, 不是可迭代对象。

weakmap对象是一组键值对的集合，其中就只有键是弱引用对象，而值可以是任意的。
和map相似，weakmap不能够遍历，没有size，没有foreach，不是可迭代对象。它的键只能是对象。不会影响垃圾

4、promise是什么

Promise 是异步编程的一种解决方案，有三种转态（等待，成功，失败），具体看下博客：
https://blog.csdn.net/tinglis/article/details/113588894?spm=1001.2014.3001.5501

5、ES6中的数据类型有哪些？那些是基本数据类型？

number,string,undefined,unll,boolean，symbol（基本数据类型）
object（复杂数据类型）

6、symbol的使用场景

symbol是一个独一无二的值，可以保证不会与其他的属性值发出冲突。
1：使用Symbol来作为对象属性名(key)
2：使用Symbol来替代常量
3：使用Symbol定义类的私有属性/方法

7、foreach有什么缺点和使用场景

1、forEach不能够中途中断，只能一直循环到结束
2、forEach只能循环数组，不能循环对象

六、vue

1、vue的生命周期有哪些

（1）、创建前 beforeCreate
（2）、创建后 created
（3）、加载前 beforeMount
（4）、加载后 mounted
（5）、更新前 beforeUpdate
（6）、更新后 updated
（7）、销毁前 beforeDestroy
（8）、销毁后 destroyed

2、如果要你写一个请求的话，你会写在哪个请求里面，为什么？

这个因人而异，可以写在created，beforeMount，mounted都可以，具体看自己喜欢。如果是需要操作DOM的写在beforeMount，mounted。

3、知道keep-alive是干什么的吗。如果要重新渲染需要用到哪个钩子函数

keep-alive是路由缓存，就是跳转路由配置了这个keep-alive的话，不刷新页面，也不会请求接口。
如果需要重新渲染的话，可以用到activated这个钩子函数。