前端的面试宝典

·  阅读 521
前端的面试宝典

以下面试内容: 用来帮助自己巩固基础知识,并给即将步入前端的你,祝顺利步入开发之路。

技巧

  • 遇到比较抽象的题目就具体化(举例),遇到比较具体的题目就抽象化(阐述)
  • 抽象题目搜知乎,掘金,代码题目搜Stackoverflow或博客
  • 【xxx的原理】这种题目一般都是说源代码思路,但你不需要看源码,直接看别人的博客即可(再次强调,不要用百度,百度我采的雷太多了555)

HTML

1、HTML中的语义化标签

  • 是什么:简单来说,可以理解为:用正确的标签做正确的事情。
  • 怎么做:实现方法是遇到标题就用h1到h6,遇到段落就用p,遇到文章就用article,主要内容用main,边栏用aside,导航用nav,...(就是找到中文对应的英文)
  • 解决了什么问题:明确了HTML的书写规范
  • 优点是:适合搜索引擎检索;适合人类阅读;有利于团队维护。
  • 缺点无。

2、HTML5有哪些新特性

  • 文章相关:header main footer nav section acticle figure mark
  • 多媒体相关:video audio svg canvas
  • 表单相关:type=email type=tel
  • 缓存技术: localStorage sessionStorage Cookie 三者的异同点

3、Canvas和SVG的区别是什么

区分题目:答题思路为:先说一,再说二,再说相同点,最后说不同点。

  • Canvas主要是用笔刷来绘制2D图形的。
  • SVG主要是用标签来绘制不规则矢量图的。
  • 相同点:都是主要用来画2D图形的。
  • 不同点:
    1. Canvas画的是位图,SVG画的是矢量图。
    2. SVG节点过多时渲染慢,Canvas性能更好一点,但写起来更复杂。
    3. SVG支持分层和事件,Canvas不支持,但是可以用库实现。

4、meta viewport是做什么的?怎么写

控制页面在移动端不要缩小显示。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

见MDN已废弃:  该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性.MDN @viewport

5、H5是什么?

移动端页面 《HTML5的影响力,将超出你我的想象!》

css3

1、有哪些新特性

  • css3选择器(基本选择器,属性选择器,伪类选择器)
  • css3边框与圆角(css3圆角border-radius 盒阴影box-shadow 边框图像 border-image)
  • css3的背景与渐变(background-image,linear-gradient线性渐变)
  • css3过渡(transition)
  • css3变换(transform)
  • css3动画(animation)
  • flex布局

2、BFC是什么

概念题,答题思路是【是什么,怎么做,解决了什么问题,优点是,缺点是,怎么解决缺点】

  • 是什么:块级格式化上下文
  • 怎么做:
  1. 浮动元素(元素的float不是none复制代码
  2. 绝对定位元素(元素的position为absolute或fixed)
    复制代码
  3. 行内块元素
    复制代码
  4. overflow值不为visiable的元素
    复制代码
  5. 弹性元素(displayflex或inline-flex元素的直接子元素)
    复制代码
  • 解决了什么问题:
  1.  清除浮动
    复制代码
  2.  防止方向margain重叠
    复制代码
  3.  某些古老的布局方式会用到(已过时)
    复制代码

更详细bfc请看csdn

3、如何实现垂直居中

如果.parent的hight不写,只需要padding: 10px 0;就能将.child垂直居中;如果.parent的height写死了,就很难把.child居中。能不写height就千万别写height.

  • flex
  • table自带功能
  • div模拟table
  • 100%高度的after before加上inline block
  • margin-top -50%
  • translate -50%
  • absolute margin auto

4、css选择器优先级如何确定

  • 选择器越具体,其优先级越高
  • 相同优先级,出现在后面的,覆盖前面的
  • 属性后面加!important的优先级最高,但是要少用

5、如何清除浮动

方法一:

.clearfix:after {
    content: '';
    display: block;/* 或者table */
    clear: both;
}
.clearfix {
    zoom: 1; /* IE兼容*/
}
复制代码

方法二:

给父元素加上overflow:hidden;
复制代码

6、两种盒模型的区别?

区分题目,答题思路为:先说一,再说二,再说相同点,最后说不同点

  • 第一种盒模型是content-box,即width指定的是content区域宽度,而不是实际宽度,公式是
    • 实际宽度  = width + padding + border
      复制代码
  • 第二种盒模型是border-box,即width指定的是左右边框外侧的距离,公式为
    • 实际宽度 = width
      复制代码
  • 相同点是都是用来指定宽度的,不同点是border-box更好用。(border-box是IE最早提出来的,总算做了一件好事)

7、flex怎么用,常用属性有哪些

  • display: flex
  • flex-decoration: row(定义主轴方向)
  • flex-wrap: wrap(换行)
  • justify-content: space-between(定义了项目在主轴方向的对齐方式)
  • align-items: center(属性定义项目在交叉轴上如何对齐) 详见阮一峰文档

8、重绘回流是什么呢?

  • 回流:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程(如:页面渲染初始化;删除dom节点,即打断骨头;rendom树变化,比如减少padding,即抽脂手术;窗口resize事件触发;获取浏览器的某些属性如offset,scollTop,width.)
  • 重绘:当诸如颜色背景等不会引起布局变化,而只需要重新渲染的过程 display:none和visibility:hidden会产生回流与重绘吗?
  1.  displaynone指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint
    复制代码
  2.  visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint
    复制代码

总结:

  •   回流一定会引起重绘,重绘不一定会引起回流。
    复制代码
  •   避免性能影响:
     css: 避免使用table布局
          避免设置多层内嵌样式
     javascript:
        避免频繁操作DOM
        对于大量插入DOM的操作,建议使用文档片段,也就是documenntFragment.
    复制代码

掘金宝藏文章

9、怎么降低重绘回流的次数呢?

  •  放弃传统操作DOM的时代,基于Vue/React开发
    复制代码
  •  CSS3 硬件加速(GPU加速)transform / opacity / filters 等等会触发硬件加速,不会引发重绘和回流
    复制代码
  •  动画效果应用到position属性为absolute / fixed 的元素上(脱离文档流)
    复制代码
  •  集中样式更改[创建样式类,为dom动态添加类]
    复制代码

掘金宝藏文章

10、flex:1的原理是什么呢?

flex-grow 、flex-shrink 、flex-basis这三个样式的合集,全写状态为flex:0 1 auto,简写为flex: 1

11、rem和em的区别是什么

  • rem: 相对于标签的font-size去决定大小,例如html标签font-size为14px,则2rem === 28px
  • em: 相对于自身的font-size去决定大小,自身没有font-size则继承祖先级元素的font-size

JAVASCRIPT

1、JS的数据类型有哪些

答案是8个 string number boolean null undefined bigint symbol object

2、原型链是什么

举例:

    a = [];
    b = array.prototype;
    c = object.prototype
    a.__proto__ = b
    b.__proto__ = c
    c.__proto__ ... = null
复制代码

原型链: 原型链是一条对象隐式原型不断往上指向的一条指向链,尽头是object的隐式原型,也就是null

作用:构造函数原型上的东西可以让实例们共享,从而节省了空间

3、JS的new做了什么

创建临时对象/新对象 绑定原型 指定this=临时对象 执行构造函数 返回临时对象

4、call,apply,bind有什么区别

相同点:call()、apply()、bind() 都是用来重定义 this 这个对象的,第一个参数都是 this 的指向对象

不同点:

  • 第二个参数差别,call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
  • apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
  • bind 除了返回是函数以外,它的参数和 call 一样

5、this关键字到底是什么

this就是call一个函数时,传入的第一个参数。

如果你的函数调用形式不是call形式,请按照转换代码将其转化为call形式 this是什么?

6、JS的立即执行函数是什么

是什么:声明一个匿名函数,然后立即执行它。这种做法就是立即执行函数

怎么做: -(function(){alert('我是匿名函数')}()) // 用括号把函数包起来

  • function(){alert('我是匿名函数')})() // 用括号把函数包起来
    复制代码
  •      !function(){alert('我是匿名函数')}() // 求反,我们不在意值是多少,只想通过语法检查
    复制代码
  •      +function(){alert('我是匿名函数')}()
    复制代码
  •      -function(){alert('我是匿名函数')}()
    复制代码
  •      ~function(){alert('我是匿名函数')}()
    复制代码
  •      void function(){alert('我是匿名函数')}()
    复制代码
  •      new function(){alert('我是匿名函数')}()
    复制代码
  •      var x = function(){return '我是匿名函数'}()
       
    复制代码

    解决了什么问题: 在es6之前【在let出现之前】,只能通过它来创建局部作用域

    优点: 兼容性好

    缺点: 丑, 对新人不友好,看不懂,尤其是括号套括号的形式【其实是为了实现es6中let一样的作用效果,将变量变成局部作用域】

    怎么解决缺点: 使用es6的block+let语法,即 {let a = '我是局部作用域' console.log(a) // 能读取a } console.log(a) // 找不到a

7、Promise,Promise.all,Promise.race分别是什么,怎么用

8、手写AJAX

9、函数防抖和节流

函数的防抖和节流优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize, scroll,鼠标的mouseover,mousemove,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大的浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。

函数防抖:在事件被触发n秒后在执行回调,如果在这n秒内又被触发,则重新计算。

函数节流: 每隔一段事件,只执行一次函数

相同点:都可以通过使用setTimeout实现 目的都是,降低回调执行频率。节省计算资源

不同点: 函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout和setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高效率。

 函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。
复制代码

10、深拷贝【11111】

b是a的一份拷贝,b中没有对a中对象的引用。

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

如何实现深拷贝

  1. 可以用递归去复制所有的层级属性
  2. 序列化和反序列化

栗子:

JSON的序列化和反序列化
var a = {b:1,c:[1,2,3],d:{d1:'123',d2:'33333'}};
var a2 = JSON.parse(JSON.stringify(a));
a2.b= 22;
console.log(a);// 1
console.log(a2);// 22
缺点:
不支持function
不支持undefined
不支持引用
不支持正则表达式
不支持Date
var a = {b:1,c:function(){},d:{d1:'123',d2:'33333'}};
var a2 = JSON.parse(JSON.stringify(a));
a2.b= 22;
console.log(a);
console.log(a2);


复制代码

image.png

如果你的数据类型包含了json不支持的数据类型(函数,undefined,date,正则,引用,)请问该怎么克隆?答案:递归 思路:

  • 递归 看节点的类型(8种) 如果是基本类型就直接拷贝 如果是object就分情况讨论
  • object分为 普通object-for in? 数组array-Array 初始化 函数 function- 怎么拷贝?闭包 日期Date-怎么拷贝?

11、不用class如何实现继承,class如何实现继承

吧哩吧啦巴黎~~~~

12、事件委托

概念:简单来说,事件就是onclick,onmousemove等等,委托就是把自己的事拜托给别人做,让别人来完成.

原理:利用事件冒泡的机制

优点:提高javascript性能,减少内存消耗;动态增加DOM元素 缺点:层级过多,冒泡过程中可能会被中间层阻止;如果把所有事件都用事件委托,可能会出现事件误判,即不该触发事件的被绑定了

13、闭包是什么

回答方式1:

正常情况下,函数外部无法读取函数内部的值,当然只有通过变通的方法,那就是闭包去实现,通过在函数内部嵌套函数,return出外层函数内部的变量, 那么外部就可以取到该变量了、

好处:可以读取外层函数内部的变量;封装对象的私有属性和方法;让这些变量始终保存在内存中,闭包可以使得它诞生的环境一直存在。

缺点:外层函数每次运行,都会生成一个新的闭包,而这个闭包又会保留外层函数的内部变量,所以内存消耗很大。因此不能滥用闭包,否则会造成网页的性能问题。

回答方式2: 是什么: 闭包是JS的一种语法特性。

     闭包 = 函数+自由变量
复制代码

怎么做?

    var count
    function add() { // 访问了外部变量的函数
        count += 1
    }
复制代码

把上面代码放在非全局环境里,就是闭包

注意,闭包不是count,闭包也不是add,闭包是count+add组成的整体 怎么制造一个非全局环境呢?答案是立即执行函数:

    count x = function() {
        var count
        function add() {
            count += 1;
        }
     }()
复制代码

但是这个代码什么用也没有,所以我们需要用return add,即:

    count add2 = function() {
        var count
        return function add() { // 访问外部变量的函数
            count += 1;
            }
  }()
  
此时add2其实就是add,我们可以调用add2

add2() <==>  add() <==> count += 1 
复制代码

至此,我们就实现了一个完成的闭包的应用

注意:闭包 !== 闭包的应用,但是面试官问你的时候,你一定要答闭包的应用,这是规矩 解决了什么问题: 避免污染全局环境(因为用的是局部变量)

提供对局部变量的间接访问

维持变量,使其不被垃圾回收

优点: 简单好用

缺点:

闭包使用不当可能会造成内存泄漏

注意,重点是使用不当,不是闭包

闭包会造成内存泄漏,这句话以讹传讹很多年了,层级旧版本IE导致的问题,居然被传成这样了

怎么解决缺点:

慎用少用不用

14、async/await怎么用,如何实现捕获

15、如何实现数组去重

1. 利用ES6 Set去重
复制代码
2. 利用reduce和includes
function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
复制代码
3.利用filter和indexof
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
复制代码

数组的更多方法

16、==和===

相等运算符===:比较两个值是否相等

严格相等运算符===:比较他们是否为“同一个值”。【值和类型】

如果两个值不是同一类型,严格相等运算符===就返回false,而相等运算符==会将他们转换成同一个类型。

17、什么是cors,什么是jsonp,什么是跨域

cors: 跨域资源共享

跨域:跨域问题的出现主要时因为浏览器的同源策略,即浏览器必须保证只有协议+端口+域名 一幕一样才允许发Ajax请求。为了突破同源策略,所以需要跨域。

jsonp:

18、如何用正则实现trim{}

删除字符串的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等

var str = " Runoob "; alert(str.trim());
复制代码

19、手写深拷贝

20、手写Promise.all

21、手写简化版Promise

22、手写发布订阅

DOM

1、事件委托

2、用mouse事件写一个可拖拽的DIV

前端性能优化

1、前端性能优化的几种方式

  • 防抖,节流
  • 资源懒加载,预加载
  • 开启Nginx,gzip压缩
  • 代码优化【事件代理,事件的节流和防抖,页面的回流和重绘,event loop事件循环机制,代码优化】
  • 文件采用按需加载
  • 图片优化,采用svg图片或者字体图标
  • 浏览器缓存机制

2、什么是同源策略

一个域下的js脚本未经允许的情况下,不能访问另一个域下的内容。通常判断跨域的依据是协议,域名,端口号是否相同,不同则跨域。同源策略是对js脚本的一种限制,并不是对浏览器的限制,像img,script脚本请求不会有跨域限制。

  • 跨域通信的几种方式 解决方案:
  • jsonp(利用script标签没有跨域限制的漏洞实现。缺点:只支持get请求)
  • cors(设置Access-control-allow-origin:指定可访问资源的域名)
  • postMessage
  • websocket是HTML5的一个持久化的协议,它实现了浏览器和服务器的全双工通信,同时也是跨域的一种解决方案
  • node中间件代理
  • nginx反向代理
  • 日常工作中用的最对的跨域方案是cors和nginx反向代理

HTTP

1、HTTP状态码知道有哪些,分别是什么意思

2、HTTP缓存有哪几种

3、GET和POST的区别

4、Cookies VS localStorage VS SessionStorage VS Session

5、从输入url到页面加载发生了什么?

- 首先在浏览器中输入URL
- 查找缓存:浏览器先查看浏览器缓存-系统缓存-路由缓存是否有该页面,如果有则显示页面内容如果没有则进行下一步。
- DNS域名解析
- 建立TCP连接
- 发起HTTP请求
- 服务器响应请求并返回结果
- 关闭TCP连接
- 浏览器渲染
复制代码

框架VUE

1、watch和computed的区别是什么

2、Vue有哪些生命周期钩子函数,分别怎么用

3、Vue如何实现组件间通信

4、Vue数据响应式怎么做到的

5、Vue set是做什么的

6、Vuex你是怎么用的

7、VueRouter你是怎么用的

8、路由守卫是什么

框架React

1、受控组件和非受控组件

2、react有哪些生命周期函数,分别怎么用(ajax请求放在哪个阶段)

3、react如何实现组件间通讯

4、shouComponentUpdate 有什么用

5、虚拟DOM是什么

6、什么是高阶组件

7、react diff的原理是什么

8、redux是什么

9、connect的原理是什么

Angular

Typescript

1、never类型是什么

2、Typescript比起javascript有什么优点

Webpack

1、有哪些常见的loader和plugin,你用过哪些

2、loader和plugin的区别是什么

3、如何按需加载代码

4、如何提高构建速度

4、转义出的文件过大怎么办

安全

1、什么是XSS, 如何预防

2、什么是CSRF, 如何预防

点击加关注 后续知识点有: javascript, es6, typescript, HTTP, vue,angular,webpack等等。

2022年一直会更新下去的哦。希望各位小可爱程序猿们,多多提供面试中遇到的知识点和问题,还有理解的不到位的地方大家多多提出宝贵意见。感恩大家,成长一直在路上

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改