一，H5+CSS篇
浏览器内核：
- 1、IE浏览器内核：Trident内核，也是俗称的IE内核；
- 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
- 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
- 4、Safari浏览器内核：Webkit内核；
- 5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
0. html语义化
参考：https://blog.csdn.net/qq_39735040/article/details/86715585
1. h5新特性（这道题一般甲方和一些大公司问的比较多，或者是比较资深一些的面试官，他们比较注重基础）
1）canvas 。
2） video 和 audio 标签。
3）语义化标签 article、footer、header、nav、section
4）表单控件，calendar、date、time、email、url、search
5) 本地离线存储 localStorage和 sessionStorage
6）媒体查询 @media
2. css3新特性（同上，重点回答红色标注）
1.媒体查询
2.过渡 transition：
3.动画 animation：
4.形状转换 transform:
5.选择器
6.阴影 box-shadow
7.边框 border-image
8.背景 background-clip
9.反射 -webkit-box-reflect:
10.文字 换行 ，超出省略号
11.颜色 rgba
12.渐变
13.Filter（滤镜）
14.弹性布局 Flex（布局）
15.栅格布局 grid
16.多列布局
17.盒模型（ie盒模型） box-sizing:border-box
3.ie盒子和标准盒子的区别（这道题问的概率也比较大）
参考：https://www.cnblogs.com/shun1015/p/12411273.html
简单的说两者 都 包括margin、border、padding、content
标准盒子实际的宽高：content的宽高
ie盒子实际的宽高：content的宽高加上padding和border
4.什么是BFC
块级格式化上下文，每个盒子独占一行，互不影响
5.css定位的方法有哪几种（position）
relative（相对定位）：依据自身位置进行定位
absolute（绝对定位）：如果它的父元素相对定位则相对于父元素定位，否则依据根元素（html,body）定位
fixed（固定定位）: 根据浏览器窗口进行定位
static（静态定位）：默认值，没有定位
6.rem和em的区别
rem相对于根元素font-size的大小，em相对于它的父元素font-size的大小
7. 图片与图片之间有缝隙，css怎么解决
将图片转换为块级元素：display:block;
8. cookie和localstorage与sessionstorage区别
cookie：仅存在于浏览器端，会话级，可以设置时长和存储路径，以字符串类型存储，不超过4kb。缺点：随http请求一起被发送到服务端，增加了请求数据量，不安全
localStorage和sessionStorage：一个永久级一个会话级，存储容量大，最大5M，不会随http请求一起被发送到服务端，减少了请求数据量，提供更简单易用的API，setItem和getItem
9. 元素水平垂直居中的方法
参考：https://www.cnblogs.com/shun1015/p/14378436.html
10.css浏览器兼容性问题
1.CSS Hack (这个是面试官告诉的)
理解hack：https://blog.csdn.net/qq_31635733/article/details/81660897
看下面一段代码，我们发现其实就是加个背景色background-color:#dddd00，但是在低版本浏览器可能就没效果，所以说为了在低版本浏览器上也生效就用到了hack，就是在代码上加上符号*号， *background-color:#dddd00;还有些加_，等其他的符号，这就是hack的用法。
*background-color:#dddd00; /* ie 7*/IE8 hack background-color:red 0; /* ie 8/9*/IE9 hack background-color:blue 90;火狐，傲游，浏览器通用 background-color:red!important;
2.利用插件解决浏览器兼容性问题
11. 浮动布局的优点？有什么缺点？清除浮动有哪些方式？
参考：https://blog.csdn.net/cake_eat/article/details/109096773
12. css圣杯布局
参考：https://blog.csdn.net/u012137648/article/details/106167157
二，js篇
1.js中数组的方法（首先记前四个）
unshift()：在第一位新增
push()：在最后一位新增
shift()：删除第一位
pop(): 删除最后一位
concat(): 合并数组
reverse()：反转数组
slice()：截取指定位置的数组
splice(): 删除指定位置
sort(): 排序
join()：数组转字符串
以下es5新增
indexOf()：查询并返回数据的索引
forEach()：会遍历数组所有的项
map()：同forEach，同时回调函数返回数据，组成新数组返回
filter()：同forEach，过滤，返回过滤之后的数组
every()：同forEach，同时回调函数返回布尔值，全部为true，由every返回true
some()：同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true
2.es6新增的一些特性
参考：https://www.cnblogs.com/shun1015/p/12267126.html
let变量和const
模板字符串：`$`，用于字符串的拼接
...拓展运算符：用于展开数组，合并数组/对象，
对象的解构赋值
for...of: 遍历对象
箭头函数
class
promise
3.var,let,const三者的区别
参考：https://blog.csdn.net/unionz/article/details/80032048
1.块级作用域（也就是{ }）
ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。
ES6 中新增了块级作用域。块作用域由 { } 包括，if语句和 for语句里面的{ }也属于块作用域。
` 2.区别
var声明变量存在变量提升，let和const不存在变量提升
var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
3.const定义对象的属性是否可以改变
4.promise
参考：https://www.cnblogs.com/qianguyihao/p/12660393.html
5.js兼容性问题
参考：https://www.cnblogs.com/kingwu/p/9556506.html
参考：https://www.cnblogs.com/shun1015/p/14700055.html
在第三行比较两个日期大小的时候，在IE浏览器/苹果手机出现比较不了的情况（2021-05-20 需要转成 2121/05/21的格式）
1 var date1 = "2021-05-20"; 2 var date2 = "2021-05-21"; 3 if (new Date(date1).getTime() > new Date(date2).getTime()) {} 4 if (new Date(date1.replace(/-/g,'/')).getTime() > new Date(date2.replace(/-/g,'/')).getTime()) {}
6.js中浅拷贝和深拷贝的方法
浅拷贝
-
- ES6 的 Object.assign()
- ES7 的...解构运算符
深拷贝：https://blog.csdn.net/m0_37686205/article/details/91571275
使用递归拷贝
使用JSON 对象实现深拷贝
通过jQuery的extend方法实现深拷贝
lodash函数库实现深拷贝（lodash.cloneDeep()）
7.原型对象和构造函数有何关系，说一下原型链
参考：https://www.cnblogs.com/shun1015/p/13443141.html
8.继承的方式
参考：https://zhuanlan.zhihu.com/p/261762048
9.如何让if(a == 1 && a == 2)条件成立？
1 var a = { 2 value: 0, 3 valueOf: function () { 4 this.value++; 5 return this.value; 6 } 7 }; 8 console.log(a == 1 && a == 2); //true
10.重绘和回流
参考：https://www.cnblogs.com/echolun/p/10105223.html
11.BOM对象模型
参考：https://www.cnblogs.com/shun1015/p/14051010.html
三，vue篇
参考：https://www.cnblogs.com/queenya/p/13572754.html
参考：https://juejin.cn/post/6844904166742048782#heading-11
1. watch和computed的区别
1.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
2.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
2.vue指令
v-html, v-text, v-bind, v-on, v-for, v-if, v-else, v-show
3.描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？
- 初次渲染过程：
- 解析模板调用render 函数
- 触发响应式，监听 data 属性 getter，setter
- 执行 render 函数，生成 vnode, patch(elem, vnode)
- 更新过程：
- 修改 data，触发 setter （此前在 getter 中 已被 监听）
- 重新执行 render 函数，生成 newVnode
- patch(vnode, newVnode)
四，react篇
参考：https://segmentfault.com/a/1190000018604138
参考：https://blog.csdn.net/eyeofangel/article/details/88797314
五，webpack
0.vue-loader 作用
vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
1. 有哪些常见的Loader？他们是解决什么问题的？
- file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
- url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
- source-map-loader：加载额外的 Source Map 文件，以方便断点调试
- image-loader：加载并且压缩图片文件
- babel-loader：把 ES6 转换成 ES5
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
- eslint-loader：通过 ESLint 检查 JavaScript 代码
2. 有哪些常见的Plugin？他们是解决什么问题的？
- define-plugin：定义环境变量
- commons-chunk-plugin：提取公共代码
- uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
3.Loader和Plugin的不同？
- 不同的作用
- Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
- Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
- 不同的用法
- Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
- Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
4.webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
- 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
- 确定入口：根据配置中的 entry 找出所有的入口文件；
- 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
- 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
5.如何利用webpack来优化前端性能？（提高性能和体验）
用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。
- 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
- 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
- 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
- 提取公共代码。
6.如何提高webpack的构建速度？
- 多入口情况下，使用CommonsChunkPlugin来提取公共代码
- 通过externals配置来提取常用库
- 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
- 使用Happypack 实现多线程加速编译
- 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
- 使用Tree-shaking和Scope Hoisting来剔除多余代码
7.怎么配置单页应用？怎么配置多页应用？
单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可，这里不再赘述
多页应用的话，可以使用webpack的 AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：
- 每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
- 随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置