2021前端面试题汇总（暂无答案，后续有时间补充）

Css

  1. css盒模型的理解。

    CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，
    但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。

  2. 弹性布局、以及常用的属性。

    display : flex 声明当前容器时弹性容器 （默认从左到右子元素水平排列）

flex-direction : row 从左到右排列 （主轴水平）
flex-direction : row-reverse 从右到左排列 （主轴水平）
flex-direction : column 从上到下排列 （主轴垂直）
flex-direction  : column-reverse 从下到上排列 （主轴垂直）

flex-wrap : nowrap 不换行
flex-wrap : wrap 换行
flex-wrap : warp-reverse 从下到上（第一行在下方）

justify-content : flex-start 左对齐
justify-content : flex-end 右对齐
justify-content : center 居中
justify-content : space-between 平均分开
justify-content : space-around 两边有空格

order 整数，越小越靠前，默认为0

align-items : flex-end 垂直
flex-grow : 扩张因子，默认为0
flex-shrink : 收缩因子，默认为1
    
align    -self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
align-self: flex-end 元素位于容器的结尾。

     

  3. 清除浮动

    1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
    2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
    3.使用after伪元素清除浮动（推荐使用）
    .clearfix:after{
    content:"",
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix{
    *zoom:1; // ie6清除浮动的方法，*号只有ie6-ie7执行，其他浏览器不执行
    }

  4. 什么是BFC

    BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，
    块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

    作用：使 BFC 内部浮动元素不会到处乱跑；
和浮动元素产生边界。


    1：防止垂直margin重叠；
    2：避免浮动元素和其他元素重叠；
    3：清除内部浮动。

    哪些元素会生成BFC？
    • 根元素
    • float属性不为none
    • position为absolute或fixed
    • display为inline-block, table-cell, table-caption, flex, inline-flex
    • overflow不为visible
     

     

Js

  1. 判断数据类型的方法

    typeof 缺点：typeof null 的值为 Object，无法分辨是 null 还是 Object 

    instanceof 能判断对象类型，不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型  
     缺点：只能判断对象是否存在于目标对象的原型链上
     Object.prototype.toString.call()  缺点：不能细分为谁谁的实例
     一种最好的基本类型检测方式 Object.prototype.toString.call() ;它可以区分 null 、
     string 、boolean 、 number 、 undefined 、 array 、 function 、 object 、
     date 、 math 数据类型。
     

  2. 0.1+0.3= 0.4； 0.1+0.2 > 0.3；

    0.1+0.2 > 0.3 的原因总结：
进制转换：js 在做数字计算的时候，0.1 和 0.2 都会被转成二进制后无限循环 ，但是 js 采用的 IEEE 754 二进制浮点运算，
    最大可以存储 53 位有效数字，于是大于 53 位后面的会全部截掉，将导致精度丢失。
对阶运算：由于指数位数不相同，运算时需要对阶运算，阶小的尾数要根据阶差来右移（0舍1入），尾数位移时可能会发生数丢失的情况，影响精度。

  3. ==与===的区别 (问了三次)

    ===是严格意义上的相等，会比较两边的数据类型和值大小 数据类型不同返回 false 数据类型相同，但值大小不同，返回 false 
==是非严格意义上的相等， 两边类型相同，比较大小；两边类型不同，根据下方表格，再进一步比较
     Null == Undefined ->true
     String == Number ->先将 String 转为 Number，在比较大小
     Boolean == Number ->现将 Boolean 转为 Number，在进行比较
     Object == String，Number，Symbol -> Object 转化为原始类型

  4. 如何实现数组中第n个重复的字符或者数值。

  5. 对闭包的理解

    函数执行，形成私有的执行上下文，使内部私有变量不受外界干扰，起到保护和保存的作用。
作用：
1：避免命名冲突。
2：解决循环绑定引发的索引问题；
3：变量不会被销毁；
4：可以使用函数内部的变量，使变量不会被垃圾回收机制回收。
应用：
1：设计模式中的单例模式；
2：for循环中的保留i的操作；
3：防抖和节流；

    防抖就是防止重复执行，只有在停止动作一定时间后才会执行，就是重复触发，实际只会在停止触发后，执行最后那次。

    节流就是在一定时间内重复触发但只会满足一定条件才会执行（一般是两次间隔时间超过一定数值）。

    4：函数柯里化。(是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，
    并且返回接受余下的参数而且返回结果的新函数的技术)
缺点：
不正当的使用闭包，可能会出现内存泄露的问题。

  6. 浏览器渲染时，怎么让js先执行处理

  7. 箭头函数的this指向（问了两次）

  8. 解构赋值 
    从数组和对象中提取值，对变量进行赋值，这被称为解构。
    如果解构失败，变量的值等于undefined。
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，
    变量必须与属性同名，才能取到正确的值。

     

  9. JS、ES、TS的联系 
    ES和JS的关系是，前者是后者的规格，后者是前者的一种实现。
    ECMAScript是标准语言，JavaScript是ECMAScript的实现，TypeScript是JavaScript的超集。

     

  10. es6中常用的有哪些？

    1：声明了变量let和const常量；
2：支持变量的解构赋值；
    3：扩展了js的核心对象；
    4：增加了promise；
    5：支持Class定义类，extends继承类；
    6：支持了Module模块化；
    7：支持迭代接口和生成器。

     

  11. let、const、var的区别

    var存在变量提升，可重复声明同一变量，声明的变量均可改
let没有变量提升，不可重复声明同一变量，声明的变量均可改
const没有变量提升，不可重复声明同一变量，声明的基本数据类型不可改，引用类型可改属性，不可只声明变量而不赋值

  12. 如何实现数组去重

    //数组
const arr = [2,7,5,7,2,8,9];
console.log([...new Set(arr)]); // [2,7,5,8,9];
//对象
const list = [{age:18,name:'张三'},{age:18,name:'李四'},{age:18,name:'王五'}]
let hash = {};
const newArr = list.reduce((item, next) => {
    hash[next.age] ? '' : hash[next.age] = true && item.push(next);
    return item;
}, []);
console.log(list，newArr);

  13. 遍历数组的方法，map与filter的区别（问了两边）

    1. forEach：循环数组中每一个元素并采取操作，没有返回值，可以不用知道数组长度
2. map方法：遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变
3. filter方法：过滤通过条件的元素组成一个新的数组，原数组不变
4. some、every方法：
       some函数遍历数组中是否有符合条件的元素，返回boolean值；
       ecery函数遍历数组中是否每个元素都符合条件，返回boolean值。
    5. reduce方法
6. for……of 方法

  14. splice、slice的使用

    splice——splice(start, num, item1, item2, ...)——从start索引开始，截取num个元素，并插入item1、item2到原数组里，影响原数组

slice——slice(start, end)——从start开始，截取到end - 1，如果没有end，则截取到最后一个元素，不影响原数组

  15. 对promise的理解，promise中的参数

    Promise对象是一个构造函数，用来生成Promise实例。

     

  16. promise里包含setTimeOut，执行的顺序（事件循环机制）（问了两次）

    Promise比setTimeout()先执行。

因为Promise定义之后便会立即执行，其后的.then()是异步里面的微任务。

而setTimeout()是异步的宏任务

     

  17. setTimeOut的理解，传入的callback是怎么执行的（线程考点）

  18. 浏览器网址输入url到展示页面的过程（问了三次）

    DNS 解析:将域名解析成 IP 地址
TCP 连接：TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接：TCP 四次挥手
    为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力，第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。

  19. 浏览器的垃圾回收机制、内存泄漏

    什么是内存泄漏？
 内存泄露是指不再用的内存没有被及时释放出来，导致该段内存无法被使用就是内存泄漏 
为什么会导致的内存泄漏？
内存泄漏指我们无法在通过 js 访问某个对象，而垃圾回收机制却认为该对象还在被引用，因此垃圾回收机制不会释放该对象，
    导致该块内存永远无法释放，积少成多，系统会越来越卡以至于崩溃。 
    垃圾回收机制都有哪些策略？ 
    标记清除法 
       垃圾回收机制获取并标记他们，然后访问并标记所有来自它们的引用，然后在访问这些对象并标记它们的引用…
    如此递进结束后若发现有没有标记的（不可达的）进行删除，进入执行环境的不能进行删除 。
    引用计数法 
      当声明一个变量并给该变量赋值一个引用类型的值时候，该值的计数    +1，当该值赋值给另一个变量的时候，
    该计数+1，当该值被其他值取代的时候，该计数-1，当计数变为 0 的时候，
    说明无法访问该值了，垃圾回收机制清除该对象。

  20. 对发布订阅设计模式的理解，如何用代码实现

  21. 页面首次加载时间，怎么减少加载的时间

    1：减少http请求（合并文件、合并图片）；
2：尽可能减少dom元素；
3：压缩js和css代码；
4：使用CDN；
    5：服务器启用gzip压缩功能：将要传输的文件压缩后传输到客户端再解压，在网络传输 数据量会大幅减小。
    在服务器上的Apache、Nginx可直接启用，也可用代码直接设置传输文件头，增加gzip的设置，也可从 
    负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。服务器性能不是很好的网站，要慎重考虑。
    6：图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，
    浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，
    即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
    7：使用多域名负载网页内的多个文件、图片

     

  22. 怎么做到只让浏览器缓存css、图片等静态资源，js不进行缓存

  23. http协议的理解

  24. http缓存 
    强缓存：发送过得请求强行缓存，有效期内直接使用，不用重发请求；
    协商缓存：如果缓存过期，缓存的数据没有发生改变，服务器返回304，不返回内容。数据就能继续使用了。

     

  25. HTTP分哪些部分，token存储在哪，发送请求时放哪。（问了两次）

    http请求组成：状态行、请求头、消息主体三部分组成
    http响应的组成：状态行、响应头、响应正文三部分组成
    
存储在客户端,(localStorage,sessionStorage,cookies)
发送请求时放在请求头中

    localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。

    localStorage 除非主动删除数据，否则数据永远不会消失

    sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。

    只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。

    但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

    

    cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 
    

    存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

    

    建议：
    由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适
    

    原因:
    

    sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
    每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据。

    










    

     
    










    26. 

  26. 

    HTTP2、HTTP3的新特性。
    

    

    HTTP2新特性：

    

      

    1. 使用二进制格式传输，更高效、更紧凑。
      2. 

    2. 对报头压缩，降低开销。
      3. 

    3. 多路复用，一个网络连接实现并行请求。
      4. 

    4. 服务器主动推送，减少请求的延迟。
      5. 

    5. 默认使用加密。
      6. 

    

    HTTP3新特性：
    

      

    1. 减少了握手的延迟(1-RTT 或 0-RTT)
      2. 

    2. 多路复用，并且没有 TCP 的阻塞问题
      3. 

    3. 连接迁移，(主要是在客户端)当由 Wifi 转移到 4G 时，连接不会被断开。
      4. 

    

    27. 

  27. 

    xml与json请求的区别。
    

    

    数据体积方面，JSON相对XML来讲，数据的体积小，传递的速度更快些
数据交互方面，JSON与JavaScript的交互更加方便，更容易解析处理，更好地进行数据交互
数据描述方面，JSON对数据的描述性比XML较差
传输速度方面，JSON的速度要远远快于XML
    

    

    28. 

  28. 

    操作虚拟DOM,为什么要操作虚拟DOM，这样有什么好处？
    

    

    虚拟DOM本质上是javascript对象，是对真实DOM的抽象表现。状态变更时，记录新树和旧数的差异，最后把差异更新到真正的dom中。

优点：
    1：减少dom操作，减少了回流和重绘；
    2：保证性能的下限，虽然性能不是最佳，但是他具备局部更新的能力，所以大部分时候还是比正常的DOM性能高很多的。

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢
    

    

    29. 

  29. 同源策略，跨域处理

    

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

    

    30. 

  30. 

    怎么解决跨域。
    

    

    解决方案：
1.jsonp(利用script标签没有跨域限制的漏洞实现。缺点：只支持GET请求)
2.CORS(设置Access-Control-Allow-Origin：指定可访问资源的域名)
3.postMessage(message, targetOrigin, [transfer])(HTML5新增API 用于多窗口消息、页面内嵌iframe消息传递),
    通过onmessage监听传递过来的数据
4.Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。
5.Node中间件代理
6.Nginx反向代理
7.各种嵌套iframe的方式，不常用。
8.日常工作中用的最对的跨域方案是CORS和Nginx反向代理
    

    

    31. 

  31. 

    axios的全局配置的token、auth，存储在哪里。
    

    

    axios 的是一种异步请求，用法和 ajax 类似，安装 npm install axios --save 即可使用，
    请求中包括 get,post,put, patch ,delete 等五种请求方式，解决跨域可以在请求头中添加 Access-Control-Allow-Origin，
    也可以在 index.js 文件中更改 proxyTable 配置等解决跨域问题
    

    

     
    

    32. 



Angular


    

  1. 

    angular的数据绑定
    

    

    答案：脏检查机制。

解析：
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model中数据有变化时，
    view 也会同步更新，显然，这需要一个监控。
    
原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 
    就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。
    当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。
    

    

     
    

    2. 

  2. 

    angular打包怎么区别环境打包
    

    

    不管是angular还是vue，一般项目的打包环境配置、启动配置都是在package.json中,然后不同框架又有对环境区分的方式,
    都是使用进程中的process.env.NODE_ENV去配置等于development还是
    

    

     
    

    3. 

  3. 

    angularJS的scop、controller的理解与使用
    

    4. 

  4. 

    angular的打包、路由的理解、数据双向绑定、使用到的设计模式
    

    5. 



Vue


    

  1. 

    怎么理解MVM、MVVM （问了两次）
    

    

    在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，
    然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

    https://baijiahao.baidu.com/s?id=1596277899370862119&wfr=spider&for=pc
    

    

     
    

     
    

     
    

    2. 

  2. 

    vue的生命周期
    

    

    vue是一个构建数据驱动的渐进性框架，他的目标是通过API实现响应数据绑定和视图更新。
    每个Vue实例在创建时都会经过一系列的初始化过程，vue的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，
    目的就是为了完成一些动作或者事件

create阶段：vue实例被创建
beforeCreate: 创建前，此时data和methods中的数据都还没有初始化
created： 创建完毕，data中有值，未挂载
mount阶段： vue实例被挂载到真实DOM节点
beforeMount：可以发起服务端请求，去数据
mounted: 此时可以操作Dom
update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染
beforeUpdate
updated
destroy阶段：vue实例被销毁
beforeDestroy：实例被销毁前，此时可以手动销毁一些方法
destroyed


    router是进行路由跳转的，route里面放的是路由信息，是传参使用

    VUE中的$nextTick的作用是DOM渲染完后，在执行回调函数用。
    

    

     
    

    3. 

  3. 

    vuex的理解。
    

    4. 

  4. 

    webpack的理解与使用
    

    

    简单来说，webpack是一个项目打包工具，它可以让我们进行模块化开发，解决模块间的依赖关系，
    最后将各个模块资源整合在一起生打包成一个或多个包（bundle），
    并且在打包过程中还可以进行图片压缩、less转成css、ES6转ES5、TypeScript转成JavaScript等文件处理。
    webpack作用是：处理开发过程中的js代码，能够让我们进行模块化开发，同时解决js间的相互依赖。
    

    

     
    

    5. 

  5. 

    对单页面的理解？
    

    

    SPA（single-page-application）仅仅在web页面初始化的时候加载相对应得HTML、JavaScript和css。
    一旦页面加载完成，SPA不会因为页面的操作而进行页面的重新渲染和跳转；
    取而代之是利用路由机制实现HTML内容的变更，ui与用户的交互，避免页面重新加载和渲染。

    优点    ：
    1.用户体验好，速度快，避免了不必要的加载页面
2.对服务器的压力小
3. 前后端分离，架构比较清晰，利于维护

缺点:
1.SEO 优化难度比较大
2.首次加载时间比较相对比较长
3.单页面不能用浏览器的前进后退功能
4.页面复杂度提高很多
    

    

     
    

    6. 



其他


    

  1. 

    Rxjs模块的使用，怎么理解它的
    

    2. 







            

            
posted @ 
2021-10-09 17:30 
十九遇你。 
阅读(66) 
评论(0) 
 
收藏 
举报