一,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样式表
- 随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置