前端面试题总结

一,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 的过程?

  • 初次渲染过程:
  1. 解析模板调用render 函数
  2. 触发响应式,监听 data 属性 getter,setter
  3. 执行 render 函数,生成 vnode, patch(elem, vnode)
  • 更新过程:
  1. 修改 data,触发 setter (此前在 getter 中 已被 监听)
  2. 重新执行 render 函数,生成 newVnode
  3. 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?他们是解决什么问题的?

  1. file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
  2. url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
  3. source-map-loader:加载额外的 Source Map 文件,以方便断点调试
  4. image-loader:加载并且压缩图片文件
  5. babel-loader:把 ES6 转换成 ES5
  6. css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
  7. style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
  8. eslint-loader:通过 ESLint 检查 JavaScript 代码

  2. 有哪些常见的Plugin?他们是解决什么问题的?

  • define-plugin:定义环境变量
  • commons-chunk-plugin:提取公共代码
  • uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码

  3.Loader和Plugin的不同?

  • 不同的作用
  1. Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
  2. Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
  • 不同的用法
  1. Loader在module.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)
  2. 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的构建速度?

  1. 多入口情况下,使用CommonsChunkPlugin来提取公共代码
  2. 通过externals配置来提取常用库
  3. 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
  4. 使用Happypack 实现多线程加速编译
  5. 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
  6. 使用Tree-shaking和Scope Hoisting来剔除多余代码  

  7.怎么配置单页应用?怎么配置多页应用?

单页应用可以理解为webpack的标准模式,直接在entry中指定单页应用的入口即可,这里不再赘述

多页应用的话,可以使用webpack的 AutoWebPlugin来完成简单自动化的构建,但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是:

  • 每个页面都有公共的代码,可以将这些代码抽离出来,避免重复的加载。比如,每个页面都引用了同一套css样式表
  • 随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置
原文地址:https://www.cnblogs.com/shun1015/p/14764303.html