本文涵盖了前端开发中的关键概念，包括CSS的尺寸单位如px、rem、em、vw、vh，JavaScript的变量提升、Map和forEach的区别，事件循环EventLoop的宏任务与微任务，以及CSS布局技巧如Flex布局。此外，还涉及到了浏览器渲染、垃圾回收机制、JavaScript的继承方法等核心知识点。
统计来自牛客网
第二部分：
目录
1、说一说CSS尺寸设置的单位
得分点 px、rem、em、vw、vh
标准回答
- px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。
- em：相对长度单位，在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。
- rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小。
- vw：相对长度单位，相对于视窗宽度的1%。
- vh：相对长度单位，相对于视窗高度的1%。
加分回答
- rem应用：在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改
- vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。
2、说几个未知宽高元素水平垂直居中方法
得分点
`position` `transform` `flex` `justify-content` `align-items` `vertical-align` `text-align`
标准回答
未知宽高元素水平垂直都居中的实现方法：
1. 设置元素相对父级定位`position:absolute;left:50%;right:50%`，让自身平移自身高度50% `transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式
2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中
`justify-content:center; align-items:center` ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中
3. 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中
`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持
4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中
`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `，这种方式兼容性较好
加分回答
京东的移动端顶部京东logo，使用的是`display:flex`这种模式
3、说一说JS变量提升？
得分点 Var声明的变量声明提升、函数声明提升、let和const变量不提升
标准回答 变量提升是指JS的变量和函数声明会在代码编译期，提升到代码的最前面。 变量提升成立的前提是使用Var关键字进行声明的变量，并且变量提升的时候只有声明被提升，赋值并不会被提升，同时函数的声明提升会比变量的提升优先。 变量提升的结果，可以在变量初始化之前访问该变量，返回的是undefined。在函数声明前可以调用该函数。
加分回答 使用let和const声明的变量是创建提升，形成暂时性死区，在初始化之前访问let和const创建的变量会报错。
4、说一说map 和 forEach 的区别？
得分点 map创建新数组、map返回处理后的值、forEach()不修改原数组、forEach()方法返回undefined
标准回答
map 和 forEach 的区别：
map有返回值，可以开辟新空间，return出来一个length和原数组一致的数组，即便数组元素是undefined或者是null。
forEach默认无返回值，返回结果为undefined，可以通过在函数体内部使用索引修改数组元素。
加分回答 map的处理速度比forEach快，而且返回一个新的数组，方便链式调用其他数组新方法，比如filter、reduce
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10); // arr2 = [16, 25]
5、说一说事件循环Event loop，宏任务与微任务？
得分点 任务挂起、同步任务执行结束执行队列中的异步任务、执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate、I/O（Node.js）Promise、MutonObserver、Object.observe、process.nextTick（Node.js）每个宏任务中都包含了一个微任务队列
标准回答
浏览器的事件循环：执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。
异步任务又分为宏任务和微任务。
- 宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。
- 微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务
宏任务包含：执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate，I/O（Node.js）
微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）
加分回答 浏览器和Node 环境下，microtask 任务队列的执行时机不同 - Node端，microtask 在事件循环的各个阶段之间执行 - 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行
6、说一下Diff算法？
7、说一说三栏布局的实现方案
8、说一下浏览器垃圾回收机制？
9、说一说js继承的方法和优缺点？
10、说一说defer和async区别？
11、说一下浏览器如何渲染页面的？
得分点 dom树、stylesheet、布局树、分层、光栅化、合成
标准回答 浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。
加分回答 分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层 光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域
12、说一说new会发生什么？
得分点 创建空对象、为对象添加属性、把新对象当作this的上下文、箭头函数不能作为构造函数
标准回答 `new` 关键字会进行如下的操作：
- 1. 创建一个空的简单JavaScript对象（即`{}`）；
- 2. 为步骤1新创建的对象添加属性`__proto__`，将该属性链接至构造函数的原型对象 ；
- 3. 将步骤1新创建的对象作为`this`的上下文 ；
- 4. 如果该函数没有返回对象，则返回`this`。
加分回答 `new`关键字后面的构造函数不能是箭头函数。
13、说一下token 能放在cookie中吗？
得分点 能、不设置cookie有效期、重新登录重写cookie覆盖原来的cookie
标准回答 能。 token一般是用来判断用户是否登录的，它内部包含的信息有：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串）
`token`可以存放在`Cookie`中，`token` 是否过期，应该由后端来判断，不该前端来判断，所以`token`存储在`cookie`中只要不设置`cookie`的过期时间就ok了，如果 `token` 失效，就让后端在接口中返回固定的状态表示`token` 失效，需要重新登录，再重新登录的时候，重新设置 `cookie` 中的 `token` 就行。
加分回答
token认证流程
- 1. 客户端使用用户名跟密码请求登录
- 2. 服务端收到请求，去验证用户名与密码
- 3. 验证成功后，服务端签发一个 token ，并把它发送给客户端
- 4. 客户端接收 token 以后会把它存储起来，比如放在 cookie 里或者 localStorage 里
- 5. 客户端每次发送请求时都需要带着服务端签发的 token（把 token 放到 HTTP 的 Header 里）
- 6. 服务端收到请求后，需要验证请求里带有的 token ，如验证成功则返回对应的数据
14、说一下浏览器输入URL发生了什么？
15、说一说盒模型？
得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小
标准回答 CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。
标准模型，给盒设置 `width` 和 `height`，实际设置的是 content box。`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。
怪异盒模型，给盒设置 `width` 和 `height`，包含了`padding`和`border `，设置的 `width` 和 `height`就是盒子实际的大小
默认情况下，盒模型都是标准盒模型
设置标准盒模型：`box-sizing:content-box`
设置怪异盒模型：`box-sizing:border-box`
16、说一说伪数组和数组的区别？
得分点 类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历
标准回答 伪数组它的类型不是Array，而是Object，而数组类型是Array。可以使用的length属性查看长度，也可以使用[index]获取某个元素，但是不能使用数组的其他方法，也不能改变长度，遍历使用for in方法。
伪数组的常见场景：
- -函数的参数arguments
- -原生js获取DOM：document.querySelector('div') 等
- -jquery获取DOM：$(“div”)等 加分回答 伪数组转换成真数组方法 -Array.prototype.slice.call(伪数组) -[].slice.call(伪数组)
- -Array.from(伪数组) 转换后的数组长度由 `length` 属性决定。索引不连续时转换结果是连续的，会自动补位。
17、说一说如何实现可过期的localstorage数据？
得分点 惰性删除、定时删除
标准回答 localStorage只能用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。所以要实现可过期的localStorage缓存的中重点就是：如何清理过期的缓存。 目前有两种方法，一种是惰性删除，另一种是定时删除。
惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。实现方法是，存储的数据类型是个对象，该对象有两个key，一个是要存储的value值，另一个是当前时间。获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。
定时删除是指，每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程，获取所有设置过期时间的key判断是否过期，过期就存储到数组中，遍历数组，每隔1S（固定时间）删除5个（固定个数），直到把数组中的key从localstorage中全部删除。
加分回答 LocalStorage清空应用场景：token存储在LocalStorage中，要清空。
18、说一说axios的拦截器原理及应用？
得分点 请求（request）拦截器、响应（response）拦截器、Promise控制执行顺序、每个请求带上相应的参数、返回的状态进行判断（token是否过期）
标准回答 axios的拦截器的应用场景：
- 请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。
- 返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。
xios为开发者提供了这样一个API：拦截器。
拦截器分为 请求（request）拦截器和 响应（response）拦截器。
拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。
加分回答 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。从浏览器中创建 XMLHttpRequests,从 node.js 创建 http 请求,支持 Promise API,可拦截请求和响应，可转换请求数据和响应数据，可取消请求，可自动转换 JSON 数据，客户端支持防御 XSRF
19、说一说创建ajax过程？
得分点 new XMLHttpRequest()、设置请求参数open()、发送请求request.send()、响应request.onreadystatechange
标准回答 创建ajax过程：
1. 创建XHR对象：new XMLHttpRequest()
2. 设置请求参数：request.open(Method, 服务器接口地址);
3. 发送请求: request.send()，如果是get请求不需要参数，post请求需要参数request.send(data)
4. 监听请求成功后的状态变化：根据状态码进行相应的处理。
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
console.log(XHR.responseText); // 主动释放,JS本身也会回收的
XHR = null;
}
};加分回答
POST请求需要设置请求头 readyState值说明
- 0：初始化,XHR对象已经创建,还未执行open
- 1：载入,已经调用open方法,但是还没发送请求
- 2：载入完成,请求已经发送完成
- 3：交互,可以接收到部分数据
- 4：数据全部返回 status值说明
- 200：成功
- 404：没有发现文件、查询或URl
- 500：服务器产生内部错误
20、说一下fetch 请求方式？
得分点 Fetch函数就是原生js、没有使用XMLHttpRequest对象、头部信息、请求信息、响应信息等均分布到不同的对象
标准回答 fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。Fetch函数就是原生js，没有使用XMLHttpRequest对象。fetch()方法返回一个Promise解析Response来自Request显示状态（成功与否）的方法。
加分回答
XMLHttpRequest的问题
- -所有的功能全部集中在一个对象上, 容易书写出混乱而且不容易维护的代码
- -采用传统的事件驱动模式, 无法适配新的 Promise API Fetch API的特点
- -精细的功能分割: 头部信息, 请求信息, 响应信息等均分布到不同的对象, 更利于处理各种复杂的数据交互场景
- -使用Promise API, 更利于异步代码的书写
- -同源请求也可以自定义不带 cookie，某些服务不需要 cookie 场景下能少些流量
21、说一下有什么方法可以保持前后端实时通信？
得分点 轮询、长轮询、 iframe流、WebSocket、SSE
标准回答
保持前后端实时通信的方法有以下几种：
轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。其缺点也很明显：连接数会很多，一个接受，一个发送。而且每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率。优点就是实现简单，无需做过多的更改。缺点是轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担
长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，如果没有新消息，就一直等待。有新消息，才会返回给客户端。在某种程度上减小了网络带宽和CPU利用率等问题。由于http数据包的头部数据量往往很大（通常有400多个字节），但是真正被服务器需要的数据却很少（有时只有10个字节左右），这样的数据包在网络上周期性的传输，难免对网络带宽是一种浪费。优点是做了优化，有较好的时效性。缺点是保持连接会消耗资源; 服务器没有返回有效数据，程序超时。
iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。优点是消息能够实时到达；浏览器兼容好。缺点是服务器维护一个长连接会增加开销；IE、chrome、Firefox会显示加载没有完成，图标会不停旋转。
WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发和客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。缺点是浏览器支持程度不一致，不支持断开重连。
SSE(Server-Sent Event)是建立在浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。SSE 是单向通道，只能服务器向浏览器发送，因为 streaming 本质上就是下载。 优点是SSE 使用 HTTP 协议，现有的服务器软件都支持。SSE 属于轻量级，使用简单；SSE 默认支持断线重连；
加分回答
- 轮询适用于：小型应用，实时性不高
- 长轮询适用于：一些早期的对及时性有一些要求的应用：web IM 聊天
- iframe适用于：客服通信等
- WebSocket适用于：微信、网络互动游戏等
- SSE适用于：金融股票数据、看板等
22、说一下重绘、重排区别如何避免？
23、事件扩展符用过吗(...)，什么场景下？
得分点 等价于apply的方式、将数组展开为构造函数的参数、数组字符串连接、浅拷贝
标准回答
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
常见的场景：
等价于apply的方式、将数组展开为构造函数的参数、字面量数组或字符串连接不需要使用concat等方法了、构造字面量对象时,进行浅克隆或者属性拷贝
加分回答 只能用于可迭代对象 在数组或函数参数中使用展开语法时, 该语法只能用于可迭代对象： var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
剩余语法（剩余参数） 剩余语法(Rest syntax) 看起来和展开语法完全相同，不同点在于, 剩余参数用于解构数组和对象。
从某种意义上说，剩余语法与展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。
function f(...[a, b, c]) {
return a + b + c;
} f(1) // NaN (b and c are undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
