2021面试题库整理集
一，html与css
1，页面导入样式，使用link与@import有什么区别？
(1) 从属关系：link是html标签，@import是css提供的
(2) 加载差异：页面加载时，link会同时加载，而@import引入的css会在页面加载完成后加载
(3) 兼容性，@import不兼容ie5以下浏览器
(4) Link可以通过js操作dom插入link标签改变样式，@import不能
2，描述块级元素与行内元素的区别？行内元素与块级元素有哪些？Img是什么元素？如何制定元素以块级元素展示
(1) 区别：
① 行内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直方向排列；
② 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文字或其它行内元素
③ 行内元素设置width，height无效，margin上下无效，padding上下无效
(2) 列举
① 行内元素：span,a,em,strong,i,input,select
② 块级元素：div，ul，ol，li，h1-6，p
(3) img和input属于行内替换元素，height/width/padding/margin均可用。效果等同于块级元素
(4) Display:block
3，H5有哪些新特性？
(1) 语义化标签：header,footer,section,nav,aside,article
(2) 增强型表单：imput新增了多个type
(3) 新增表单元素：datalist，keygen，output
(4) 新增表单属性：placehoder，require，min,max
(5) 音频，视频：video，audio
(6) Canvas，地理定位，拖拽
(7) 本地存储，localStorage-没有时间限制的数据存储，sessionStorage—针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
(8) 新事件：onresize，onscroll,onerror,onplay,onpause,ondrag,onmousewheel
(9) webSocket:单个tcp链接上的全双工协议
4，css选择器有哪些？优先级
(1) 通配符选择器（*）：
(2) 元素选择器
(3) Id选择器
(4) Class选择器
(5) 后代选择器
(6) 子元素选择器
(7) 相邻选择器
① 优先级：！Import>内联>ID选择器>class选择器>标签选择器
5，什么叫css盒模型？有几种盒模型？Margin与padding的区别
(1) Css盒模型是css技术的一种思维模式。每个盒模型有内容（content），填充（padding），边框（border），外边距（margin）组成
(2) Css盒模型又两种，IE盒模型和w3c标准盒模型，其中IE模型width=content+padding+border，而标准盒模型width=content
(3) Margin是自身容器边框到另一个容器边框的距离，就是容器的外边距
(4) Padding是自身容器边框到自身内容之间的距离，是为内边距
6，说说你对语义化的理解
(1) 根据内容的结构化使用合适的语义化标签，让浏览器的爬虫和机器更好的解析，同时增加代码的可读性及可维护性
7，Html与xhtml的区别
(1) Xhtml必须被正确地嵌套
(2) Xhtml标签必须小写
(3) Xhtml空标签必须关闭
(4) Xhtml文档必须有根元素
8，div+css布局的好处
(1) 代码精简，且结构与样式分离，易于维护
(2) 代码量减少了，页面加载速度更快，用户体验提升
(3) 对seo搜索引擎更加友好，且h5又新增了许多语义化标签更是如此
(4) 允许更多炫酷的页面效果，丰富了页面
(5) 符合w3c标准，保证网站不会因为网络应用的升级而淘汰
9，盒模型及如何转换
(1) Box-sizing:content-box(w3c盒模型，标准盒模型)
(2) Box-sizing：border-box（IE盒模型，又名怪异盒模型）
10，实现水平垂直居中的几种方式
(1) Flex
① Display：flex；justify-content:center;align-items:center;
(2) 定位
.box {
position: relative;
height: 100px;
width: 100px;
background-color: pink;
}
.box-center{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 50px;
height: 50px;
background-color: greenyellow;
}
或者
.box {
position: relative;
background-color: pink;
}
.box-center{
position: absolute;
left: 50%;
top: 50%;
transform：translate(-50%,-50%)
margin: auto;
width: 50px;
height: 50px;
background-color: greenyellow;
}
11，flex兼容性问题
(1) IE9（包括IE9）以下不支持，IE10-11部分支持，但是需要-ms-前缀
(2) 其他主流浏览器包括安卓ios基本支持
12，font样式的便捷写法
(1) Font：font-style font-variant font-weight font-size/line-height font-family
13，边界塌陷
(1) 块元素的top跟bottom外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距塌陷
14，负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面
15，常见的浏览器内核有哪些
(1) Trident内核：IE内核，360
(2) Gecko内核：netscape6以上版本
(3) Presto内核：opera7及以上版本
(4) Webkit内核：safri，chrome等
16，前端性能优化方式
(1) 减少DOM操作
(2) 部署前，图片压缩，代码压缩
(3) 优化js代码结构，减少冗余代码
(4) 减少http请求，合理设置http缓存
(5) 使用内容分发cdn加速
(6) 静态资源缓存
(7) 图片延迟加载
17，对前端工程化的理解
(1) 开发规范
(2) 模块化开发
(3) 组件化开发
(4) 开发仓库
(5) 性能优化
(6) 项目部署
(7) 开发流程
(8) 开发工具
18，Opacity的兼容性处理：
(1) IE：filter.alpha(opacity)
(2) Mozilla: -moz-opacity
(3) Safari:-khtml-opacity
19，rem布局的优缺点
(1) 相对于em的好处是：不会发生逐渐增大或者减少字体尺寸的情况，因为始终继承根元素的字体尺寸。Rem单位不仅可以应用于字体大小，还可以用于设定宽高等其他大小，使页面可以适配不同屏幕尺寸。估rem一般用于移动端
20，什么是css预处理后处理
(1) Css预处理器是用一种专门定义的编程语言，为css增加编程特性，可以在css中使用变量，循环，嵌套等功能，将css作为目标生成文件，让css更加简洁，可读性强等好处，主要有三种css预处理器，sass，less，stylus，通常使用webpack构建工具将它们生成的文件转换成css文件
(2) Css后处理器是对css进行处理，并最终生成css预处理器，属于广义上的预处理器。后处理器通常采用autoprefixer的方案，根据定义的browser list自动添加前缀
21，meta viewport的六个属性
(1) 设置宽度：width
(2) 设置高度:height
(3) 页面初始缩放值：initial-scale
(4) 允许用户最小缩放值：minimum-scale
(5) 允许用户最大缩放值：maximum-scale
(6) 是否允许用户进行缩放：user-scalable
22， 1像素边框的问题：原因：有些手机分辨率比较高，是二倍屏，三倍屏，在css中定义border为1px时，这些手机的物理像素就可能是2,3像素（看起来比1px粗很多）
解决办法：通过背景图实现；通过transform：scale(0.5)实现，通过viewport+rem
22，严格模式和混杂模式-如何区分这两种模式，区分他们有何意义？
(1) 定义：DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用声明样的文档类型定义（DTD）来解析文档。支持html5标准的主流浏览器都认识这个声明
(2) 声明文档的解析类型（document。compatMode），避免浏览器的怪异模式
Js逻辑面试题
1，判断js类型的方式
(1) Typeof:可以判断出’string’,’number’,’boolean’,’undefined’,’symbol’,但判断typeof(null)时值为‘object’，判断数组和对象时值均为‘object’
(2) Instanceof：原理是构造函数的prototype属性是否出现在对象原型链中的任何位置
(3) Object.prototype.toString.call():常用于判断浏览器内置对象，对于所有基本的数据类型能进行判断，即使是null和undefined
(4) Array.isArray():用于判断是否为数组
2，ES5和ES6分别有几种方式声明变量
(1) ES5有两种：var与function
(2) ES6有六种:let，const，class，和import
① 注意：let，const，class声明的全局变量再也不会和全局对象属性挂钩
3，闭包的概念？优缺点
(1) 优点：
① 避免全局变量的污染
② 希望一个变量长期储存在内存中（缓存变量）
(2) 缺点：
① 内存泄露（消耗）
② 常驻内存，增加内存使用量
4，数组去重的方法
(1) ES6的Set
① Let arr=[1,1,2,3,4,5,5,6]
② Let arr2=[…new Set(arr)]
(2) Reduce()=》更多介绍JS reduce()方法详解，使用reduce数组去重 - 听风是风 - 博客园 (cnblogs.com)
let arr = arr.reduce((accumulator, current) => {
return accumulator.includes(current) ? accumulator : accumulator.concat(current);
}, []);
(3) Filter()
let arr = arr.filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null]
5，DOM事件有哪些阶段？谈谈对事件代理的理解
(1) 分为三大阶段：捕获阶段–目标阶段–冒泡阶段
(2) 事件代理简单来说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时（例如‘click’），再通过条件判断，执行事件触发后的语句（例如‘alert(e.target.innerHTML)’）
(3) 好处；使代码更简洁；节省内存开销
6，执行机制，事件循环
(1) Javascript语言的一大特点就是单线程，同一时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。Js语言的设计者意识到这个问题，将所有任务分成两种，一种是同步任务，另一种是异步任务，在所有同步任务执行完之前，任何的异步任务是不会执行的。
7，promise：面试概率较大的一个问题
(1) Promise是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise是一个对象，从它可以获取异步操作的消息。Promise提供一个统一的api，各种异步操作都可以用同样的方法进行处理
(2) Promise的两个特点
① 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中），fulfilled（已成功），rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是promise这个名字的由来。
② 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种结果：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不再改变，这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
(3) promise是一个构造函数
(4) Promise的原型方法
① Promise.prototype.then():为promise实例添加状态改变时的回调函数。
② Promise.prototype.catch():用于指定发生错误时的回调函数
③ Promise.prototype.finally():finally方法用于指定不管promise对象最后状态如何，都会执行的操作。该方法是ES2018引入标准的
④ Promise.all():用于将多个promise实例，包装成一个新的promise实例
⑤ Promise.allSettled():接受一组promise实例作为参数，包装成一个新的promise实例。
⑥ Promise.any():ES2021引入，接受一组promise实例作为参数，包装成一个新的promise实例返回。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态
⑦ Promise.resolve()：有时需要将现有对象转为promise对象，promise.resolve()方法就起到这个作用
⑧ Promise.try():不管同步还是异步，照常执行
⑨ Promise的链式调用
8，http详解
(1) 一次完整的http事务流程
① 域名解析
② 发起tcp的三次握手
③ 建立tcp连接后发起http请求
④ 服务器响应http请求，浏览器得到html代码
⑤ 浏览器解析html代码，并请求html代码中的资源
⑥ 浏览器对页面进行渲染呈现给用户
⑦ 连接结束
9，用什么解析ip：
(1) 从网址到IP地址的转换，称为DNS解析，DNS解析是一个递归查询的过程
10，三次握手
(1) 第一次握手：建立连接。客户端发送连接请求报文段
(2) 服务端收到请求，并返回
(3) 传输数据
11，http状态码跟作用
(1) 1**：服务器收到请求，需要请求者继续执行操作
(2) 2**：成功，操作被成功接收并处理
(3) 3**：重定向，需要进一步的操作以完成请求
(4) 4**：客户端错误，请求包含语法错误或者无法完成请求
(5) 5**：服务器错误，服务器在处理请求的过程中发生了错误
12，浏览器的渲染过程：
(1) 浏览器解析html源码，然后创建一个DOM树：在dom树中，每一个html标签都有一个对应的元素节点，并且每一个文本也都有一个对应的文本节点，DOM树的根节点就是documentElement，对应的是html标签
(2) 浏览器解析css代码，然后创建一个CSSOM树
(3) 根据dom树和csssom来构建一个渲染树（render tree）
(4) 当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上
13，reflow（重排，回流）和repaint（重绘）？
(1) Reflow：浏览器要花时间去渲染，当它发现了某个部分发生了变化并且影响了布局，就需要倒回去重新渲染
(2) Repaint：如果只是改变了某个元素背景颜色或者文字颜色等，不影响元素周围或内部布局，就只会引起浏览器的repaint，重绘其中一部分
(3) 它们之间的比较：reflow比repaint更花费时间，也就更影响性能，尽量避免回流
(4) 什么时候会发生reflow（回流）？
① 页面初始化的时候
② 操作DOM的时候（增加或删除DOM元素）
③ 某些元素的尺寸改了（边距，填充，边框，宽高）
④ Css的属性发生变化（隐藏display：none）
⑤ 内容改变（文本或图片改变而引起的计算值的宽高改变）
⑥ 浏览器窗口尺寸改变（当resize事件发生时）
14，如何减少reflow/repaint?
(1) 不要逐个修改dom样式，可以预先定义好css的class，然后修改dom的className，将多个需要进行相同操作的元素一次修改
(2) 不要把DOM节点的属性值放在一个循环里当成循环的变量
(3) 当动画元素使用fixed或者position时脱离了文档流，那么在修改他们的css时不会发生reflow
(4) 不要使用table布局，因为可能很小的一个改动都会造成整个table的重新布局
(5) 在内存中多次操作节点，完成后再添加到文档中
(6) 如果要对一个元素进行复杂的操作，可以先隐藏它（display：none），操作完成后再显示
(7) 对于需要经常去除的引起浏览器重排的属性值，要缓存到变量中
15，为什么先引入css文件，再引入js文件
(1) Js代码下载是阻塞下载，不可以和其他代码并行下载和解析；css的加载不会阻塞dom树的解析
(2) 页面加载时，按照从上到下，从左到右的顺序加载，如果将js放在前面，会立即执行，阻塞后续的资源下载和执行，同时使静态页面迅速显示
(3) 部分js的执行依赖于前面的样式
(4) Js一般是处理功能，所以不需要提前加载
16，避免或者减少页面白屏时间，尽可能提高css加载速度
(1) 使用CDN
(2) 压缩css
(3) 合理利用缓存
(4) 减少http的请求，合并css文件
17，页面性能优化？
(1) 16全可用
(2) 将样式表放在头部，将脚本放在底部
(3) 减少重排和重绘
18，js继承 (68条消息) JavaScript 原型链和继承面试题_木木木森林-CSDN博客_js原型链继承面试题
(1) 原型链继承
① 重点；让新实例的原型等于父类的实例
// 父类
function SuperType (colors = ['red', 'blue', 'green']) {
this.colors = colors;
}
// 子类
function SubType () {}
// 继承父类
SubType.prototype = new SuperType();
// 以这种方式将 constructor 属性指回 SubType 会改变 constructor 为可遍历属性
SubType.prototype.constructor = SubType;
let superInstance1 = new SuperType(['yellow', 'pink']);
let subInstance1 = new SubType();
let subInstance2 = new SubType();
superInstance1.colors; // => ['yellow', 'pink']
subInstance1.colors; // => ['red', 'blue', 'green']
subInstance2.colors; // => ['red', 'blue', 'green']
subInstance1.colors.push('black');
subInstance1.colors; // => ['red', 'blue', 'green', 'black']
subInstance2.colors; // => ['red', 'blue', 'green', 'black']
② 特点：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（实例不会继承父类实例的属性！）
③ 缺点
新实例无法向父类构造函数传参
继承单一
所有实例都会共享父类实例的属性
(2) ，借用构造函数继承
(3) 组合继承：组合继承使用 call 在子类构造函数中调用父类构造函数
// 组合继承实现
function Parent(value) {
this.value = value;
}
Parent.prototype.getValue = function() {
console.log(this.value);
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent();
const child = new Child(1)
child.getValue();
child instanceof Parent;
(4) 原型式继承
(5) 寄生式继承
(6) 寄生组合式继承
19，call：语法fn.call(obj,…args)
(1) 功能：执行fn，使this为obj，并将后面的n个参数传给fn
20，apply：语法：fn.apply(obj,arr)
(1) 功能，执行fn，使this为obj，并arr数组中元素传给fn
21，bind：语法：fn.bind(obj,…args)
(1) 功能：返回一个新函数，给fn绑定this为obj，并制定参数为后面的n个参数
22，区别call()/apply()/bind()
(1) Call（obj）/apply(obj):调用函数，指定函数中的this为第一个参数的值，bind(obj);返回一个新的函数，新函数内部会调用原来的函数，且this为bind（）指定的第一参数的值
23，节流
(1) 理解：在函数多次频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次
(2) 场景：页面滚动(scroll)，DOM元素的拖拽(mousemove),抢购点击(click),播放时间，进度条信息
(3) 功能：节流函数在设置的delay毫秒内最多执行一次（简单来说就是我上个锁，不管你点了多少下，时间到了我才解锁）
- 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return
-
//节流throttle代码： function throttle(fn,delay) { let canRun = true; // 通过闭包保存一个标记 return function () { // 在函数开头判断标记是否为true，不为true则return if (!canRun) return; // 立即设置为false canRun = false; // 将外部传入的函数的执行放在setTimeout中 setTimeout(() => { // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。 // 当定时器没有执行的时候标记永远是false，在开头被return掉 fn.apply(this, arguments); canRun = true; }, delay); }; } function sayHi(e) { console.log('节流：', e.target.innerWidth, e.target.innerHeight); } window.addEventListener('resize', throttle(sayHi,500));
24，防抖
(1) 理解；在函数频繁触发是，在规定之间以内，只让最后一次生效
(2) 场景：搜索框实时联想(keyup/input),按钮点击过快，多次请求，窗口调整
(3) 功能：防抖函数在被调用后，延迟delay毫秒后调用，没到delay时间，你又点了，清空计时器重新计时，直到真的等了delay这么多秒
- 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
- 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟
//防抖debounce代码：
function debounce(fn,delay) {
var timeout = null; // 创建一个标记用来存放定时器的返回值
return function (e) {
// 每当用户输入的时候把前一个 setTimeout clear 掉
clearTimeout(timeout);
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 处理函数
function handle() {
console.log('防抖：', Math.random());
}
//滚动事件
window.addEventListener('scroll', debounce(handle,500));25，节流与防抖的区别
26，数组去重
function unique(arr) {
const res = []
const obj = {}
arr.foreach((item) => {
if (obj[item] === undefined) {
obj[item] = true
res.push(item)
}
})
return res
}
//其他方法
//Array.from(new Set(array))
//[…new Set(array)]
27，Typeof数据类型的判断
(1) 对于原始类型来说，除了null都可以显示正确的类型，但对于对象来说，除了函数都会显示object，像数组和对象都是object，所以想判断一个对象的正确类型，这个时候需要使用instanceof
28，Instanceof
(1) [] instanceof array // true
29，Constructor
(1) ([]).constructor=Array //true
30，原型与原型链
(1) 原型是一个对象，用于实现对象的属性继承，可以理解为对象的父亲，一个函数的原型的原型A.prototype为constructor，每个对象都有一个_proto_指向他的原型
(2) 原型链是由原型对象组成，每个对象都_proto_属性，指向创建对象的构造函数的原型，_proto_将对象连接起来组成了原型链，是一个用来实现继承和共享属性的有限对象链
31，扁平化把一个二维数组转变成一维数组
(1) Flat()方法会移除数组的空项
① Let arr=[1,2,[3,4],[5,6]]
② Let brr=[].concat(…arr);
32，XSS攻击与预防
(1) Xss；跨站脚本攻击，就是攻击者想尽一切办法将可执行代码注入网页，打开网页将执行恶意代码（比如获取用户cookie，token）。常见三种xss，储存型XSS,反射性XSS,DOM型XSS
33，XSS预防：
(1) 输入检查：针对不同场景限制允许输入的字符，限制输入长度与格式
(2) 输出检查：严格的输出编码，html编码，js编码，css编码，url编码
(3) 设置CSP（content-security-policy）http header；通过自建白名单的方式增加XSS的工具难度，由浏览器进行拦截
(4) Cookie设置httpOnly属性，阻止js读取cookie
(5) 验证码操作，防止脚本冒充用户提交危险操作
34，CSRF攻击与预防
(1) CSRF攻击(cross site request forgery):跨站请求伪造，攻击者借助受害者的凭据（cookie）伪装成用户向服务器发送伪造请求
① 攻击者诱使用户进入第三方网站
② 在第三方网站中向被攻击网站发出请求
③ 利用用户在被攻击网站先前已经获取的注册凭证，绕过网站对请求的验证，从而冒充用户进行某项操作
④ 预防：对响应头的cookie设置sameSite属性
⑤ 验证referer
⑥ 使用token，放弃cookie对用户的校验
34，中间人攻击及攻击手段
(1) 中间人攻击，当数据离开一个端点前往另一个端点时，数据传输的过程是对数据失去控制的过程，此时当一个中间人位于两个端点之间对数据进行劫持转发，称之为中间人攻击
35，HSTS(防止301/302重定向劫持)
(1) 从http不安全的域名重定向为https的安全域名
36，http2特性
(1) 二进制分帧：http2把原先的http信息划分为颗粒度更小的帧，并对其进行二进制编码。比如http1中的头部信息现在位于header帧，body信息位于data帧。（header或者data也可以分多个帧存放，比如header帧1+header帧2）
(2) 多路复用：http2中所有请求共用一个tcp连接。具体的说，客户端向服务器发送多个请求，这些请求会被分成多个帧在TCP链路中并行传输，当请求到达服务端时，因为同一个请求所在的流都是同一个，所以根据帧头中的stream Identifier字段重新组合解析就能得到完整的请求
(3) 头部压缩：http2提出了hpack压缩方式用于减少每次请求中header的数据量
(4) 服务器端推送：服务器端推送除了可以响应原始请求外还可以将其他资源推送到客户端（推送的资源需要遵守同源策略）
37，列举解释所有http请求方式
(1) Get：向特定资源发出请求（查）
(2) Post：向特定资源提交数据（增）
(3) Delete：删除指定资源（删）
(4) Put：更新数据（改）
(5) Options：返回服务器支持的http请求方法（比如cors跨域的预检请求）
(6) Head：向服务器所要与get请求一致的响应头
(7) Trace：返回服务器接收到的请求，主要用于测试诊断
(8) Connect：http1中预留给能讲连接方式改为管道方式的代理服务器
(9) Patch：对put方法的补充，对一直资源进行局部更新，比如更新表中某个字段需要传入该字段更新值
38，点击一个按钮浏览器会做些什么
(1) 创建当前event实例
(2) 当前事件经由事件循环放置于事件队列
(3) 同步任务执行完毕执行该事件
(4) 事件捕获阶段（自dom顶层向目标节点）
(5) 目标事件（执行事件）
(6) 冒泡阶段（自目标节点向dom顶层冒泡）
39，网络的五层模型
(1) 应用层
(2) 传输层
(3) 网络层
(4) 数据链路层
(5) 物理层
40，介绍SSL/TLS
(1) SSL（安全套接层）与TLS（传输层安全）协议是为网络通信提供安全及数据完整性的一种安全协议，换而言之就是通过非对称加密生成对称加密密钥的过程
(2) Tips：1996年SSL3.0问世，1999年SSL3.1被标准化更新为TLS1.0，所以TLS1.0=SSL3.1；
41，简述PWA：渐进式web应用（progressive web app），实际上就是使用web技术编写一个网页的应用，添加app Manifest与servive worker实现PWA的安装与离线功能
42，BFC(Black formatting context)即块级格式化上下文，它是一块独立的渲染区域，只有blcok-level bos（块级盒）参与，它规定了内部的blcok-level box如何布局，并且内部元素的渲染和外界互不影响
43，层叠上下文
(1) 网页及其每个元素都有一个坐标系统，而html元素沿着其相对于用户的一条虚幻的z轴排开，层叠上下文就是对这些html元素的一个三维构想，众html元素基于其元素属性按照优先级顺序占据这个空间
44，从输入URL到页面展示的过程
(1) 对网址进行DNS域名解析，得到对应的IP地址
(2) 根据这个IP，找到对应的服务器，发起TCP的三次握手
(3) 建立tcp连接后发起http请求
(4) 服务器响应http请求，浏览器得到html代码
(5) 浏览器解析html代码，并请求html代码中的资源（如js，css，图片等）（先得到html代码，才能去找这些资源）
(6) 浏览器对页面进行渲染呈现给用户
(7) 服务器关闭tcp连接
45，堆栈内存和闭包作用域
(1) 基本类型直接存，引用类型先开个堆往堆里面存
(2) 引用类型都是一个堆，每一个堆都有一个16进制的地址，能给我们直接访问（对象堆里储存的是键值对，函数对里储存的是代码字符串–函数既是函数也是对象，作为丢下的时候存储prototy，length，name等键值对）
46，new一个函数发生了什么？
(1) 创建一个全新的对象
(2) 这个对象会执行prototype连接，将这个新对象的prototype链接到这个构造函数prototype所指向的对象
(3) 这个新对象会绑定到函数调用的this
(4) 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象
47，闭包是什么？
(1) 闭包是指有权访问另外一个函数作用域中的变量的函数
(2) 闭包产生的本质：当前环境中存在指向父级作用域的引用
(3) 什么是闭包：闭包是一种特殊的对象，它由两部分组成，执行上下文（代号A），以及在该执行上下文创建的函数（代号B），当B执行时，如果访问了A中变量对象的值，那么闭包就会产生，且在浏览器中使用这个执行上下文A的函数名代指闭包
(4) 如何产生闭包
① 返回函数
② 函数当做参数传递
(5) 闭包的应用场景
① Bind
② 模块
48，宏任务与微任务：js异步任务的两种分类。
(1) 当微任务与宏任务没被嵌套时，先执行微任务，再执行宏任务,当宏任务与微任务嵌套时，请查询详细资料
(2) 宏任务
① SetTimeout
② setInterval
③ setImmediate
④ requestAnimationFrame
(3) 微任务
① Process.nextTick
② MutionObserver
③ Promise.then catch finally
Vue面试题
1，vue框架的优点是什么？
(1) 轻量级框架：只关注图层，大小只有几十k
(2) 简单易学，文档通顺清晰，语法简单
(3) 数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新
(4) 组件化开发，工程结构清晰，代码维护方便
(5) 虚拟dom节点加载html节点，运行效率高
2，什么是MVVM
(1) Model-view-modelview的缩写，是一种脱胎于MVC模式的设计模式
(2) Model代表数据层，负责存放业务相关的数据
(3) View代表视图层，负责在页面上展示数据
3，vue组件之间传值的方法
(1) 父组件向子组件传值
① 父组件在子组件标签中绑定自定义属性
② 子组件通过props属性进行接收
(2) 子组件向父组件传值
① 父组件在子组件标签中绑定自定义事件
② 子组件通过this.$emit()方法触发自定义事件，传值给父组件
(3) 兄弟组件之间的传值：
① 共同传给父组件，再由父组件分发（状态提升）
② 使用vuex
③ 利用bus事件总线
4，vue生命周期钩子函数
(1) Beforecreate
(2) Created
(3) beforeMount
(4) Mounted
(5) beforeUpdate
(6) Updated
(7) beforeDestory
(8) Destroyed
5，为什么vue组件中data必须是一个函数？
(1) 如果data是一个对象，当复用组件时，因为data都会指向同一个引用类型地址，其中一个组件的data一旦发生修改，则其他重用的组件中的data也会被一并修改。如果data是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题
6，vue中computed和watch有什么区别
(1) 计算属性computed：
① 支持缓存，只有依赖数据发生变化时，才会重新进行计算函数
② 计算属性内不支持异步操作
③ 计算属性的函数中都有一个get（默认具有，获取计算属性）和set（手动添加，设置计算属性）方法
④ 计算属性是自动监听依赖的变化，从而动态返回内容。
(2) 侦听属性watch：
① 不支持缓存，只要数据发生变化，就会执行侦听函数
② 侦听属性内支持异步操作
③ 侦听属性的值可以是一个对象，接受handler回调，deep，immediate三个属性
④ 监听是一个过程，在监听的值发生变化时，可以触发一个回调，并做一些其他的事情
7.css预编译语言（sass,less,stylus）的几种区别
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。
预处理器语法一般包括：变量，嵌套，混合Mixins，运算，导入import，函数。
1.变量
/* 1、Scss的变量必须是$开始*/
$mainColor: #000;
h1{
color: $mainColor;
}
/* 2、Less 的变量名使用 @ 符号开始*/
@mainColor: #000;
h1{
color: @mainColor;
}
/* 4、Stylus 的变量名不要用 @ 开头， =赋值 */
mainColor = #000;
h1{
color: mainColor;
}
2.嵌套：在CSS中相同的parent引用多个元素，你需要一遍一遍的去写parent。用CSS预处理器，就可以少些很多单词，而且父节点关系一目了然。
/*Scss、less、Stylus的嵌套,伪类嵌套都是使用&*/
nav {
color: #000;
font-size: 16px;
a {
color: #0000cc;
font-size: 18px;
&.first {
color: red;
}
}
}
/*Stylus的嵌套还可以这样写*/
nav
color #000
font-size 16px
a
color #0000cc
font-size 18px
&.first
color red
3.Mixin混合：CSS预编译工具允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上
/*Scss、less混合语法*/
.circle{
border-radius: 100%;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle
}
.big-circle{
width: 100px;
height: 100px;
.circle
}
/*Stylus Mixin混合语法*/
circle{
border-radius: 100%;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
circle
}
.big-circle{
width: 100px;
height: 100px;
circle
}
3-1、混入可以传递参数
/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle
*/
.circle($radius){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle(5px)
}
3-2、混入可带默认值
/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle，：改为=
*/
.circle($radius:5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle
}
/* 这是Stylus样例 */
circle($radius=5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
circle
}
4.运算
/* 这是Scss样例 */
$test:300px;
.test_01{
width: $test + 20px;//
height: $test*2 ;
color: #ccc - 10;
}
/* 这是Less样例 */
@test:300px;
.test_01{
width: @test + 20px;//
height: @test*2 ;
color: #ccc - 10;
}
/* 这是Stylus样例 */
test=300px
.test_01{
width: test + 20px;//
height: test*2 ;
color: #ccc - 10;
}
5.函数
6.导入
@import 'reset.scss' //scss中导入样式
@import "reset"; // less导入默认导入为less文件
@import "reset.css" // Stylus导入默认导入为css文件
————————————————
版权声明：本文为CSDN博主「古月边城」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42738504/article/details/114905634