Http / 浏览器 篇
（1） Http 状态码有哪些？分别表示什么？
参考回答：
分类 分类描述 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4** 客户端错误，请求包含语法错误或无法完成请求 5** 服务器错误，服务器在处理请求的过程中发生了错误 200： OK，请求成功，一般用于 GET 和 POST 请求。
400：（Bad Request）请求无效
产生原因：
（1）前端提交数据的字段名称和字段类型域后台的实体没有保持一致；
（2）前端提交到后台的数据应该是 json 字符串类型，但是前端 没有将对象 JSON.stringify 转化成字符串。
401：当前请求需要用户验证
403：服务器已经得到请求，但是拒绝执行。
404：（Not Found）服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置“您请求的资源未找到”的个性化页面。
500：服务器内部错误，无法完成请求
502： （Bad Gateway）作为网关或者代理工作的服务器尝试执行请求时，从远端服务器接收到了一个无效的响应。
（2）从浏览器输入 url 到页面显示，中间经历了什么？
https://blog.csdn.net/qiaoboss_7/article/details/120844952（3）cookie 和 session 的区别？localStorage 和 sessionStorage 的区别？
参考回答：
CSS篇
（1）link标签和import标签的区别？
参考回答：
link属于html标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载；
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别；
link方式引用的样式权重高于@import。
（2） flex布局
参考回答 ：
（3）BFC（块格式化上下文，用于清除浮动，防止margin重叠等）
参考回答：
直译成：块格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会域float box重叠。
BFC是页面的一个独立容器，子元素不会影响到外面。
计算BFC的高度时，浮动元素也会参与计算。
哪些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption、flex、inline-flex的元素
overflow不为visible的元素
（4）垂直居中的方法
参考回答：
（1）margin：auto法
定义为上下左右为0，margin：0可以实现脱离文档流的居中。
html:
<div> <img src='mm.png' /> </div>css:
div { width: 400px; height: 400px; position: relative; border: 1px solid red; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }（2）css3属性：transform
子元素设置position：absolute；left： 50%；top： 50%；transform：translate（-50%， -50%）。
（3）flex布局
将父元素设置为flex，并且设置align-items： center；justify-content： center
（4）table-cell（未脱离文档流）
将父元素display：table；子元素设置未单元格 display：table-cell
（5）margin负值法
父元素固定宽高，子元素利用定位。
.container { width: 500px; height: 400px; border: 1px solid red; position: realtive; } .child { width: 480px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; /*高度的一半*/ margin-left: -240px; /*宽度的一半*/ border: 1px solid yellow; }
（5）怎样隐藏一个元素？
参考回答：
（1）opacity：0 。可以隐藏元素，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件，那么点击该区域，也能触发点击事件的。
（2）visibility：hidden。可以隐藏元素，但不会改变页面布局，看但是不会触发该元素已经绑定的事件。
（3）display： none。可以隐藏元素，并且会改变页面布局，可以理解未页面把该元素删除掉了。
（6）css的权重优先级？
参考回答：
以下是优先级从高到低：
！important -> 内联样式(style) -> ID选择器 -> 类class -> 标签选择器(div) | 属性选择器[attr=''] | 伪类(:hover;focus) -> 伪对象(:before; :after) -> 通配符(*) -> 继承(inherit)。
（7） 介绍以下盒模型？
参考回答：
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。
标准盒模型：一个块的总宽度=margin + border + padding + content
设置盒模型：box-sizing：border-box
（8） css 的定位方式有哪些？
参考回答：
相对定位（relative）：相对定位的元素是在文档的正常位置偏移给定的值，但是不影响其他元素的偏移。元素未脱离文档流。
绝对定位（absolute）：绝对定位的元素脱离了文档流。在布置文档流中其他元素时，绝对定位元素不占据空间。绝对定位的元素是相对于自身父级做出的偏移。
固定定位（fixed）：固定定位也属于绝对定位，元素也会脱离文档流，但是是相对于浏览器的定位。
（9）
参考回答：
javaScript篇
（1） 类的继承和创建？
参考回答：
（2） Js定时器？
参考回答：
Js定时器---setTimeout 和 setInterval 的区别？有什么优缺点？如何使用 setTimeout 实现 setInteval 的功能？_qiaoboss_7的博客-CSDN博客
（3）Js中如何判断基本数据类型和引用数据类型？
参考回答：
（4）JS事件委托（代理）和事件冒泡机制？
参考回答：
（5）js如何清除cookie？
参考回答：
（6）如何解决前端跨域问题？
参考回答：
（7）JS深拷贝（deepClone）和浅拷贝（shallowClone）
参考回答：
（8）JS函数防抖（debounce）和节流（throttle）
参考回答：
（9）说下你对前端路由的理解？
参考回答：
（10）简单说下对 Promise 的理解？
参考回答：
（11）下面代码输出什么？
代码：
console.log(a); var a = 2; console.log(a); a = 3; console.log(a);输出结果：undefined、2、3
（12）js 中 window 和document 的区别？
参考回答：
简单来说：document 是 window 的一个对象属性。
一。指代不同
1.document 对象：代表给定浏览器窗口中的 HTML 文档。
2.window 对象：表示浏览器中打开的窗口。
二。作用不同
1.document 对象：使用 document 对象可以对 HTMK 文档进行检查、修改或添加内容，并处理该文档内部的事件。
2.window 对象：浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
三。使用方式不同
1.document 对象：在 web 页面上， document 对象可以通过 window 对象的 document 属性引用，或直接引用。
2.window 对象：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
（13） GET 和 POST 的区别？
参考回答：
区别 Get Post 参数 参数通过url传递 参数放在 request body 中 参数长度 get 请求在url 中传递的参数是有长度限制的 post 没有长度限制 安全性 get 请求没有 post 安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息 比 get 安全 编码方式 get 请求只能进行 url 编码 支持多种编码方式 参数保留 get 请求参数会被完整保留在浏览器历史记录中 post 中的参数不会被保留 TCP链接 get 请求产生一个 TCP 数据包 post 产生两个 TCP 数据包
（14） 说一下如何理解前端模块化？
参考回答：
前端模块化：就是复杂的文件变成一个一个独立的模块，比如 JS 文件等等，分成独立的模块有利于重复（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了 commonJS 规范，AMD， CMD 规范等等，以及用于 JS 打包（编译等处理）的工具 webpack。
前端模块化规范有三种：commonJS 、AMD、CMD
commonJS用在服务器端， AMD 和 CMD 用在浏览器环境。
AMD 是 requireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD：提前执行（异步加载：依赖先执行） + 延迟执行。
CMD：延迟执行（运行到需加载，根据顺序执行）。
（15） 说一下 CommonJS、AMD 和 CMD。
参考回答：
一个模块是能实现特定功能的文件，有了模块就可以方便的使用别人的代码，想要什么功能就加载什么模块。
CommonJS：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载 require() 引入模块。
AMD（Async Module Definition）：中文名为异步模块定义的意思。
requireJS 实现了 AMD 规范，主要用于解决以下两个问题：
（1）多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器；
（2）加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长。
语法：requireJS 定义了一个函数 define，它是全局变量，用来定义模块。
requireJS 的例子：
// 定义模块 define([ 'require', 'dependency' ], function() { 'use strict'; var name = 'Tom'; function printName() { console.log(name); } return { printName: printName }; }); // 加载模块 require([ 'myModule' ], function(my) { my.printName(); })总结 AMD 规范：require() 函数在加载依赖函数的时候是异步加载的，这样浏览器就不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。
因为网页在加载 JS 的时候会停止渲染，因此我们可以通过异步的方式去加载 JS，而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。
（16）JavaScript 的全局属性和全局函数？
参考回答：
全局属性：
属性 描述 Infinity 代表正的无穷大的数值 NaN 指示某个值是不是数字值 undefined 指示未定义的值 全局函数：不属于任何对象的属性和方法。对呀 Global 来说，所有在全局作用域中定义的属性和方法，都是 Global 对象的属性。
（17） 谈谈你对this 的理解？
参考回答：
框架篇
1.React
（1）三大框架的区别？
参考回答：
（2）React在循环渲染时，为什么要设置key？如何正确设置key？
参考回答：
（3）组件通讯有哪几种方式？
参考回答：
（4）react 中组件性能优化有哪些方式？
参考回答：
（5）谈谈redux的工作原理？
参考回答：
https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
2.Vue
3.Angular
4.Node.js
（1）
参考回答：
（2）
参考回答：
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
