为金三银四总结了一些基础八股文，其中多有借鉴大佬们的，起初只是为自己准备的，所以总结的答案也是按照我个人更能理解的能记住的话术，心血来潮想要发出来(其实是想要首发的矿石)，一是给自己备份，二是分享给懒得全网翻八股的小伙伴们，如有答案错误的可以在评论中指出，前端菜鸟虚心求教
（另外矿石咋用好呢）
1 .如何理解HTML语义化
就是正确的标签做正确的事，比如h是标题、header是页眉等，好处有便于阅读，增强了代码的可读性，有利于搜索引擎优化，在没有CSS样式的情况下页面也是有结构的。
2 .块级元素、内联元素
块元素：div、h1、h2这样的单独占一行的元素
行元素：span、i这种多个在一行的元素
3.盒模型
盒模型就是一个盒子里面装着HTML元素，或者说一个HTML元素就是一个盒子，盒子由content、padding、border、margin组成。盒模型分为标准盒模型和怪异盒模型，区别是设置方式和宽高计算方式不同，标准盒模型设置是box-sizing: content-box，width/height就是content部分的width/height，怪异盒模型设置用box-sizing:border-box，width/height是content+padding+border的width/height。 5.offsetWidth
offsetWidth = content + padding + border
clientWidth = content + padding
6.margin纵向重叠****
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的也会重叠
解决：创建BFC、加透明边框
7.margin 负值问题
margin-top和margin-left负值，元素向上或向左移动
margin-bottom负值，下面元素上移，自身不动
margin-right负值，右面元素左移，自身不动
8.BFC
BFC是块级格式化上下文，一块独立的渲染区域，内部渲染不影响外部
形成条件：
float不是none；
position是absolute或fixed；
overflow不是visible；
display是inline-block、table-cell、flex
可以用来解决margin重叠问题、清浮动
9.定位- position
relative：相对定位，相对本身原有位置定位
absolute：绝对定位，相对于已经定位的最近的父元素定位(没有就是body)，会脱离文档流
fixed：固定定位，相对于浏览器窗口定位，脱离文档流
sticky：粘性定位，可以用来达到吸顶效果
static：默认值，会忽略top、bottom等声明
10.清除浮动
1.在浮动元素后面的元素样式中添加：clear：both
2.浮动元素父元素添加伪元素样式：
.clearFix: after {
display: table;
content: ‘’;
clear: both;
}
兼容IE低版本.clearFix: { zoom: 1 }
3.浮动元素父元素开启BFC
11.CSS 选择器及优先级
id选择器、类选择器、标签选择器、通配符选择器、属性选择器、伪类选择器、后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）
!Important >内联样式(01000)>id选择器(100)>类选择器(10)>标签选择器(1)>通配符选择器>继承
12.实现两栏布局（左侧固定 + 右侧自适应）
① 利用浮动，左面元素左浮，固定宽度，右面元素设置margin-left为左侧元素宽度值
② 利用浮动，左面元素左浮，宽度固定，右面元素设置overflow:hidden开启BFC
③ 利用flex布局，左面元素宽度固定，右面设置flex: 1
④ 利用定位，父元素设置相对定位，左侧设置绝对定位定宽，右侧元素设置margin-left为左侧宽度
⑤ 利用定位，父元素设置相对定位，左侧定宽，右侧绝对定位，left为左侧元素宽度，其余方向定位为0
12.圣杯布局和双飞翼布局
三栏布局，中间一栏最先加载，两侧宽度固定，中间自适应
圣杯布局：
过程：
dom把center放在left和right前面；
左右定宽，中间100%宽度；
三栏设置float：left，footer清除浮动；
container设置padding-left和padding-right，为左右两栏留出位置；
left用margin-left：-100%拉回同一行，然后用定位左移；
right用margin-right：-right宽度拉回同一行
双飞翼布局：
过程
中间的center部分用父div包裹一层放到最前面；
左右定宽，中间设置100%；
三栏设置左浮动；
left用margin-left：-100%拉回上层；
right用margin-left：-right宽度拉回上层；
center部分两边设置margin为左右栏留位置
技术总结：
使用浮动，中间使用padding或者margin防止被覆盖，两侧栏使用margin负值以便和中间栏横向重叠，使用定位固定到两侧。
13.居中
水平居中：
① 行内元素：父元素设置text-align: center；
② 块元素设置为inline-block之后给父元素设置text-align：center；
③ 块元素用绝对定位+left50%+transform：translateX（-50%）；
④ 设置margin：0 auto；
⑤ 绝对定位+left：50%+margin-left负值；
⑥ 绝对定位+定宽+left/right: 0+margin: 0 auto
⑦ flex
垂直居中：
① 行内元素：设置line-height=父元素height
② 绝对定位+top50%+transform: translateY(-50%)
③ 绝对定位+top50%+margin-top负值
④ 绝对定位+top/bottom: 0+margin: auto 0
⑤ flex
14.实现三角符号
盒子宽高均为零，三面边框皆透明
Div {
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
15.line-height如何继承
有具体数值：直接继承数值
比例的：继承比例
百分比的：继承百分比计算后的值
16.隐藏页面中某个元素的方法
opacity：0 占空间且可交互
visibility：hidden 占空间没有交互
display：none不占空间也没有交互
17.rem
1rem等于html元素的font-size大小，默认值为16
1em等于父元素font-size大小，默认也是16
18.flex
容器属性：
flex-direction：主轴方向；值可取row*、row-reverse、column、column-reverse
flex-wrap：主轴如何换行；值可取nowrap*、wrap、wrap-reverse
flex-flow：主轴方向和主轴如何换行的缩写；默认为row、nowrap
justify-content：项目在主轴上的对齐方式；值可取flex-start*、flex-end、center、space-between、space-around
align-items：项目在交叉轴上如何对齐；值可取flex-start、flex-end、center、stretch*、baseline
align-content：有多跟轴线的对齐方式；值可取flex-start、flex-end、center、stretch*、space-
between、space-around
项目属性：
order：定义项目排列顺序，值越小越靠前
flex-grow：放大比例，默认0
flex-shrink：缩小比例，默认1，负值无效
flex-basic：在放大之前，项目占据的主轴空间，浏览器根据这个值计算是否有多余空间，默认auto，即项目本来大小
flex：flex-grow|flex-shrink|flex-basic的缩写默认是0 1 auto；快捷值有：auto(1 1 auto)和none(0 0 auto)
align-self：项目可以有与其他项目不同的对齐方式，可以覆盖align-items属性，默认是auto，即继承父元素的align-items，没有就等同于stretch，取值除了auto其他与align-items一致
19.JS 数据类型
值类型：Number、String、Boolean、Undefined、Null、Symbol、BigInt，存在栈里
引用类型：Object、Array、function以及特殊的基本包装类型等，保存在堆内存
20.数据类型判断
① typeof：能识别值类型、函数，但不能具体识别null、对象和数组，都返回Object
② Instanceof：能判断对象类型，能区分数组、对象和函数，原理是判断在原型链上是否能找到该类型的原型
③ Object.prototype.toString.call()：可以精准判断数据类型
21.如何判断变量是不是数组
① Array.isArray(arr)
② arr.proto === Array.prototype
③ arr instanceof Array
④ Object.prototype.toString.call(arr)
22.何时使用===和==
除了用来和null比较，都用===
23.var、let、const
var是ES5的语法、let和const是ES6的语法
var有变量提升，可以先使用后声明，let不可以，会产生暂时性死区
var和let定义的变量，可以修改，const定义常量，不可修改
let和const有块级作用域，var没有
24.JS垃圾回收机制
标记清除：当变量进入执行环境时被标记，离开执行环境时也被标记，垃圾回收器会销毁标记上离开环境的值并回收值所占用的空间
引用计数：记录被引用次数，如果次数为0就可以回收
25.作用域和作用域链
作用域：变量的合法使用范围，决定了变量的可见性
作用域链：如果一个变量在当前作用域没找到，会向上级作用域查找，直到全局作用域，这个过程形成的链就是作用域链
26.原型和原型链
每个引用类型都有显示原型prototype
每个实例都有隐式原型_proto_
实例的_proto_指向对应构造函数的prototype
原型是构造函数的所有实例可以共享的一个属性对象
原型链：读取对象的某个属性时，如果自身没有，则会去其隐式原型也就是其构造函数的显示原型上查找，没有的话会一直往上找，一直到Object.prototype，这个过程形成的链就是原型链
27.this不同场景的取值
① 当做普通函数被调用时，this指向window
② 使用了call、apply、bind方法，要看传入的值
③ 当做对象的方法被调用，指向调用的对象
④ 在class的方法中调用，指向当前实例本身
⑤ 箭头函数中，指向上层作用域
28.闭包
闭包是能够读取到其他函数内部的变量，因为作用域链上变量的查找是从内到外的，所以闭包也可以理解成函数内部的函数。
形成条件：函数套函数，内部函数引用外部函数的局部变量
作用：保护变量，外部不可以直接访问；保存变量，使变量一直保存在内存里
29.call、apply、bind的区别
三者都是改变this指向，第一个参数都是this要指向的对象，也都可以用后面参数传参
call和apply是对函数的直接调用，bind返回的是一个函数，需要再加个括号来调用
call和bind参数传入是可以用逗号分隔，apply需要传入一个数组
call和apply参数需要一次性传入，bind参数可以分多次传入
30.new运算符的实现机制
首先创建一个空对象
空对象的_proto_指向构造函数的prototype
把函数的this绑在新对象上，执行构造函数的代码，给新对象绑定属性
判断构造函数是否有自己的return，有的话返回该值，没有返回新对象
31.同步异步的区别
异步基于js是单线程语言，异步不阻塞代码执行，同步会阻塞代码执行
32.事件循环
① 函数入栈，执行到异步任务时把异步任务放到WebAPIs里，直到栈清空
② 同时WebAPIs里完成异步事件后，会把回调函数放到任务队列里，宏任务微任务分别放置
③ 栈里清空后先清空微任务
④ 微任务清空后去宏任务队列取第一个执行，执行完查看微任务队列是否有任务，有的话清空，然后再取一个宏任务
33.宏任务和微任务
宏任务：setTimeout、setInterval、Ajax、DOM事件
微任务：Promise async/await
微任务早于宏任务执行
微任务是在DOM渲染前触发、宏任务是在DOM渲染后触发
微任务是JS语法规定的，宏任务是浏览器规定的
34.Promise有哪三种状态？如何变化？
① 有pending、fulfilled、rejected三种
② 可以从pending变到fulfilled或pending变到rejected
③ 变化不可逆
35.执行上下文
当JS执行一段可执行的代码时，会创建对应的执行上下文，每个执行上下文都含有三个重要属性：变量对象、作用域链、this
36.DOM操作常用API
创建：createElement、createDocumentFragment
修改：appendChild、removeChild
查询：document.getElementById、document.getElementByTagName、document.querySelector、document.querySelectAll
元素属性：setAttribute、getAttribute
37.attribute和property的区别
① property是DOM对象属性、attribute是标签上的属性
② property只有自带的基本属性、attribute也包含标签上的自定义属性
② 取值和赋值不同：attribute用set和get方法，property用.就可以
② property的值能从attribute得到同步，也就是说改变attribute中的值，property中对应的值也会变，但反之不会
38.一次性插入多个DOM节点，考虑性能
const listNode = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 树中
const frag = document.creatDocumentFragment()
// 执行插入
for(let x=0; x < 10; x++) {
const li = document.creatElement('li')
li.innerHTML = 'List item' + x
frag.appendChild(li)
}
// 都完成之后，再插入到 DOM 树中
listNode.appendChild(frag)
39.优化DOM操作性能
① DOM查询做缓存
② 频繁操作改成一次性操作
40.如何识别浏览器类型
navigator.userAgent.indexOf(‘Chrome’)
41.分析拆解url各个部分
https://ke.qq.com/user/index/index.html?a=111#/plan/b=2222&term_id=333
location.href // https://ke.qq.com/user/index/index.html?a=111#/plan/b=2222&term_id=333
location.protocol // https:
location.pathname // /user/index/index.html
location.search // ?a=111
location.hash // #/plan/b=2222&term_id=333
42.事件冒泡和事件捕获
事件从子元素传递到父元素叫冒泡
事件从父元素传递到子元素叫捕获
43.阻止事件冒泡
event.stopPropagation()
44.阻止默认行为
event.preventDefault()
45.http和https区别和优缺点
① http：超文本传输协议，明文传输，https是加密的http，更安全
② http默认端口是80，https是443
③ http是无状态连接，省时间
④ https需要ca证书，费用高
46.https协议的工作原理
47.TCP三次握手
第一次握手：客户端发送syn(seq=j)包到服务器
第二次握手：服务器端收到syn包并发送自己的syn包，发送了ack(ack=j+1)和syn(syn=k)
第三次握手：客户端收到服务器的ack+syn包，并返回确认包ack(ack=k+1)
48.TCP为什么不能是两次握手
防止旧的请求信息发送到服务器端，重复连接，引起连接混乱。
49.TCP四次挥手
第一次挥手：客户端发送一个FIN给服务器
第二次挥手：服务器收到FIN后发送一个ACK给客户端，确认序号为收到序号+1
第三次挥手：服务器端发送FIN给客户端
第四次挥手：客户端收到FIN后，发送一个ACK给服务器端，确认序号为收到序号+1
50.为什么连接是三次，关闭是四次
因为服务器收到FIN后，有可能还有数据需要处理或者发送，要先发个确认报文给客户端，表示收到关闭请求，等数据处理完之后再发送FIN包关闭连接
51.TCP和UDP的区别
① TCP有面向链接，UDP无链接
② TCP更可靠，UDP不可靠
③ TCP效率低，UDP效率高
④ TCP连接只能是一对一，UDP可以一对多
52.TCP怎么保证传输的有序可靠
① 确认应答和序列号：TCP会给数据编号，也就是序列号。传输时，每次接收到数据后，也会给对方传输确认应答，应答里包含了确认序列号，告诉发送方接收到了哪些数据，下一次数据从哪开始发。TCP还会将收到的数据根据序列号排序，并且去掉重复的序列号的数据。
② 超时重传：数据发送后需要先保留在缓冲区，如果在超时之前收到了对方应答，就释放缓冲区，如果没收到，需要重新发送数据
③ 连接管理：三次握手、四次挥手
④ 流量控制：接收方会把窗口值告诉发送方，如果接收不过来，就把窗口值缩小，用的是滑动窗口协议，
⑤ 拥塞控制：慢开始、拥塞避免、快重传、快恢复
53.跨域问题
浏览器有同源策略，协议、域名、端口三个中有一个不同都是不同源，加载图片、CSS和js可以无视同源策略
解决：
① JSONP
script标签的src属性可以访问跨域的js脚本，利用这个特性，可以在src中访问跨域的地址，并设置回调函数，在回调函数里接收后端返回的数据
② 跨域资源共享(CORS)
在请求头里设置Access-Control-Allow-Origin
③ window.postMessage()
54.Cookie、sessionStorage、localSorage的区别
① cookie存储限制是4KB，sessionStorage和localStorage最大为5M
② cookie会被传递到服务器，sessionStorage和localStorage不会
③ cookie在设置的过期时间之前有效，localStorage一直有效，除非手动删除，sessionStorage浏览器关闭就会被删除
55.常见http状态码
1×× 服务器收到成功
2×× 请求成功 200：成功
3×× 重定向；301：永久重定向；302：临时重定向；304：资源未修改
4×× 客户端错误；404：资源未找到；403：没权限
5×× 服务端错误；500：服务器错误；504：网关超时
56.http常见的header
Requset Headers：
Accept：浏览器可接收的数据格式
Accept-Encoding：浏览器可接受的压缩算法，如gzip
Accept-Languange：浏览器可接收的语言，如zh-CN
Connection：keep-alive一次TCP连接重复使用
cookie
Host
User-Agent（简称UA）：浏览器信息
Content-type：发送数据的格式，如application/json
Response Headers：
Content-type：发送数据的格式，如application/json
Content-length：返回数据的大小，多少字节
Content-Encoding：返回数据的压缩算法，如gzip
Set-cookie：
缓存相关的Headers：
Cache-Control：控制强制缓存
Expries：也是控制缓存过期的，已被Cache-Control代替
Last-Modified：资源的最后修改时间
Etag：资源的唯一标识
57.浏览器重绘和重排
布局改变会导致重排和重绘，样式改变会导致重绘
重排必定会重绘，重绘不一定重排
避免：
集中修改样式，不要一条一条的修改
不要把DOM节点的属性值放在循环里当变量
尽量只修改position为absolute和fixed的元素
58.http缓存
缓存优点：减少不必要的传输，减轻服务器负担，加快客户端加载速度
强缓存：服务器返回的response header里的cache-control，再次请求时，如果缓存没有过期，就直接读取缓存，过期了就请求服务器获取新的数据
协商缓存：服务器返回的header里会带有etag和last-modified，etag是每个文件的唯一的hash值，last-modified是最后一次修改时间，每次请求时把这两个值带着发给服务器，etag对应请求头里的if-none-matched，last-modified对应if-modified-since，如果资源没更改，服务器会返回304，浏览器使用本地缓存，有更改会返回新的数据和新的etag和laat-modified值
59.浏览器输入 url 到页面渲染全过程
① DNS域名解析，会在浏览器缓存、操作系统缓存、路由缓存、ISP的DNS服务器、根服务器中获取ip地址
② 建立TCP连接
③ 发起http请求
④ 服务器响应请求并返回结果
⑤ 关闭TCP连接
⑥ 浏览器渲染
--构建DOM树
--构建CSS规则树
--结合DOM树和规则树生成渲染树
--布局
--绘制页面
60.new object和object.create的区别
① New Object继承Object，object.create继承指定对象，新对象的proto属性指向该对象
② object.create没有原型上的属性和方法
61.CSS3新特性
① 边框：border-radius、box-shadow、border-image
② 背景：background-origin、background-size
③ 过渡：transition
④ 动画：animation
⑤ transform：可以对元素进行旋转、缩放、移动或倾斜
⑥ 选择器：first-child、last-child、checked
⑦ 颜色：rgba
⑧ 弹性布局：flex
⑨ 媒体查询
⑩ clac()：动态计算长度值，比如calc(100% - 20px)
62.ES6新特性
① let、const
② 模板字符串
③ 解构
④ 函数的参数默认值
⑤ 扩展运算符
⑥ 箭头函数
⑦ for of
⑧ class类
⑨ 导入导出：import、export
⑩ promise、async/await
11.Symbol
12.Set
63.HTML5新特性
① 语义化的标签：header、footer、article
② 增强表单：新的input输入特性：color、date、week；表单元素：progress、datalist；新增的表单属性：placehoder、required
③ 音频和视频：audio、video元素
④ 绘图：canvas、SVG
⑤ 定位：getCurrentPosition()获取用户位置
⑥ 拖放：元素都可以拖放，还可以在拖动时检查拖动的数据
⑦ Web Worker：可以通过加载一个脚本，创建一个独立的线程，在主线程之外运行
⑧ Web Storage：本地存储
⑨ WebSocket：此协议为客户端和服务端提供了一种全双工通信机制，没有同源的限制
