liqiuyue9597 / front-end-interview Goto Github PK

Vue和React的key的作用一样

1. !important
2. 内联样式
3. id选择器
4. 类选择器
5. 元素选择器

::after是伪元素还是伪类？ （伪元素） --> 可以用来做什么

浏览器有哪些进程 --> 渲染进程里有哪些线程
进程：一个浏览器主进程（Brower Process）、一个GPU进程、一个网络进程、多个渲染进程和多个插件进程。

• 浏览器主进程
• 渲染进程
• GPU进程
• 网络进程
• 插件进程

渲染线程：

• JS引擎线程
• GUI渲染线程
• 定时触发器线程
• 事件触发线程 --> 宏任务和微任务的区别
• 异步HTTP请求线程

因为当时紧张嘴瓢，先问的我线程，我答的是浏览器的进程。然后面试官就说那你给我讲一下进程和线程的区别。

我回答：预先将图片链接放到data-url属性，如果图片到页面的高度相等就把图片的src赋值为data-url里的地址....等等等
面试官说这个方法会引起回流，还有没有其他方法。。。。

TCP/UDP区别 --> 应用场景分别是什么

如果前一个JS文件发生错误后面的会继续执行吗 --> 会（分块执行）

virtual DOM --> MVVM --> MVC

这类题一般都是连锁问

实现跨域的几种方法 --> 什么是CORS同源策略 --> 响应头要怎么设置才能跨域成功
     |                          |--->怎样算跨域（域名、端口号和协议）
     |--->websocket实现跨域的原理  

这道题不是一般的数组去重。。。
arr=[undefined, undefined, null, null, true, false, 'true', NaN, NaN, 'NaN', {}, {}, [], [], -0, 1, 0]
对这样一个arr去重
题解发在掘金上了。

leetcode 93题 中等难度

给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。
有效的 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成），整数之间用 '.' 分隔。
示例:
输入: "25525511135"
输出: ["255.255.11.135", "255.255.111.35"]

这道题在字节的前端面试算法里考察的频率非常高

强缓存/协商缓存 --> 304状态码 --> cache-control和Expire怎么设置（怎么用）

这道题是真的是一道比较经典的考题
闭包涉及：

1. 执行环境（全局和局部）
2. 环境栈
3. 作用域和作用域链 -->ES6有块级作用域
4. 垃圾回收/内存泄漏

字节的一道题：（如果不懂闭包很难做出来）
闭包的应用题

304 --> 讲一下协商缓存 --> Etag和Last modified的区别 --> 服务器怎么设置不要强缓存（cache-control:no-store 注意no-store与no-cache的区别）
因为浏览器缓存分为强缓存（cache-control和expires）和协商缓存(Etag/if-none-match和Last-modifined/if-modified-since)，所以面试官就串着把问题问了

面试官其实是怕我不知道TCP拥塞控制，所以先问我知道TCP慢启动算法吗。
然后就讲一下TCP拥塞控制的过程：

1. 慢启动算法：有小到大指数增长发送数据量；每收到一个报文确认就继续增长一次。（指数增长）
2. 拥塞避免算法：维护一个拥塞窗口的变量；只要网络不拥塞就试探将拥塞窗口调大。（加1）

第一秒输出1，第二秒输出4。。。
a = [1, 4, 5, 7, 9];

//第一种
for (let i in a) {
  setTimeout(() => {
    console.log(a[i]);
  }, i * 1000 + 1000);
}

//第二种
function sleep(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

(async function test(arr) {
  for (var i in arr) {
    await sleep(1000);
    console.log(a[i]);
  }
})(a);

1.CSS不会阻塞DOM解析，但是会阻塞DOM渲染；CSS阻塞JS执行，但不会阻塞JS文件下载
2.JS阻塞DOM解析，也就是JS会阻塞页面加载 --> script标签里的async和defer属性 --> DOMContentLoaded和load事件区别
因为浏览器设置JS引擎线程和GUI渲染线程是互斥的，所以JS肯定会阻塞页面加载。

因为我第二点回答错了，面试官就问我渲染进程里有哪些线程，尝试引导我。

首先讲事件的捕获和冒泡

代码题：
有上万个<li>标签，实现点击显示<li>标签里的内容

  <ul class="show">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

解题思路：用事件委派实现，不要傻傻地想着给每个<li>绑定事件。
事件委托：将事件统一绑定给元素的共同祖先元素。当后代元素上的事件触发时，会一直冒泡到祖先元素，进而实现只绑定一次事件可应用到多个元素上。

var ulList = document.getElementsByClassName('show')[0]

ulList.addEventListener('click', function(e){
  if(e.target.tagName === 'LI'){
    console.log(e.target.innerHTML)
  }
})

写的时候面试官顺带问e.target和e.currentTarget区别
e.target是指的触发当前事件的标签
e.currentTarget指的是绑定事件的标签（所以不会变）

ES6里新增的定义变量方式有哪些 --> let const var的区别 --> const定义的变量哪种情况下能修改 -->真正固定变量的命令(Obeject.freeze)

输入：[1,2,[3,4,[5,{a:1},[6]]]]

输出：[1,2,3,4,5,{a:1},6]

4种方式实现数组扁平化

387.字符串中的第一个唯一字符

买卖股票的最佳时机

CSS盒模型 --> box-sizing

block：独占一行，可以设置宽高
inline：不会独占一行，不能设置宽高
inline-block：不会独占一行，能设置宽高。比如<img>和<input>.
通常会引申到：margin和padding能对行内元素设置吗？

行内元素：

• 行内元素不会自动换行，设置宽高无效
• 行内元素设置margin和padding左右有效，上下无效

在 IIFE 中所建立的变量，都不会影响到全局执行上下文所建立的变量。也就是说放在 IIFE 里面的变量，并不会影响到其他外层的变量，也不会被外层的变量影响。

一道经典的面试题就需要IIFE解决。
按照顺序每隔一秒打印数组的元素。

var arr = [1,2,3,4,5]
for(var i=0; i<arr.length; i++){
  (function(index){
    setTimeout(function(){
      console.log(arr[index])
    },1000) 
  })(i)
}

1. tansform (to change the form of sth 使改变形态)：
   • 平移：translateX/Y/Z(平移元素，百分比是相对于自身计算的)
   • 缩放: scaleX/Y/Z
   • 旋转: rotateX/Y/Z
2. animation
3. transition（过渡）
   都可以实现。然后面试官问我：tansform 和animation 哪个性能更好

--> tansform更好，因为transform避免布局Layout与绘制paint（回流和重绘那一块的知识）

versions是一个项目的版本号列表，因多人维护，不规则 var versions=['1.45.0','1.5','6','3.3.3.3.3.3.3'] 要求从小到大排序，注意'1.45'比'1.5'大 。var sorted=['1.5','1.45.0','3.3.3.3.3.3','6']

let arr = [()=>{ return new Promise(res=>{ console.log("run1", Date.now()); res() }) }, ()=>{ return new Promise(res=>{ console.log("run2", Date.now()); res() }) },()=>{ return new Promise(res=>{ console.log("run3", Date.now()); res() }) }]
写一个函数实现Promise串行调用，按顺序输出run1,run2,run3

function promiseRun(arr) {
       (function iter(){
		if(arr.length) arr.shift()().then(iter)
	})()

}
//另一种
function promiseRun(arr) {
    let res = Promise.resolve();
	arr.forEach(fn=>{
		res = res.then(()=>fn()) // 关键是 res=res.then... 这个逻辑
	})
}
}

Promise提供的方法有.all和.race都是并行执行。
一般用async awit就能够串行执行，而且非常简洁明了。

我自己是只知道common JS和ES6的模块化规范，至于AMD和CMD我没用过就直接没说。问题不大。

1. require和import的区别等等常规问题
2. require如何解析路径

301和302是什么 --> 区别是什么 --> 302可以用在什么场景（登录跳转等）

1. 宏任务：当前调用栈中执行的代码成为宏任务（主代码块，定时器等等）。
2. 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件（promise.then，proness.nextTick等等）。
3. 宏任务中的事件放在task queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由JS引擎线程维护。

运行机制

1. 在执行栈中执行一个宏任务。

2. 执行过程中遇到微任务，将微任务添加到微任务队列中。

3. 当前宏任务执行完毕，立即执行微任务队列中的任务。

4. 当前微任务队列中的所有任务执行完毕后。检查渲染，GUI线程接管渲染。

5. 渲染完毕后，JS线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

字节：

var x = 1
//说出输出
x => x 
x => {x} 
x => ({x}) 
x => {{x}}

百度：

• 讲一下箭头函数的this
• 箭头函数可以写成构造函数吗？
• 箭头函数有原型吗/可以实现原型链吗？

当时的回答让面试官不太满意，后来学习了async内部的原理才明白面试官想问我什么。
async函数与Promise的区别

我回答try catch，面试官不满意。
Event对象有一个onerror事件，支持onerror的JavaScript对象只有img和window。所以面试官应该是想听我说window.onerror全局检测错误。

合并两个有序数组。
只能在原数组上修改，不能新建存储空间。
leetcode 88题

1.==
2.===
3.Object.is()

Vue的响应式（双向绑定）原理 --> Object.defineProperty的缺点（数组怎么解决响应式的） -->怎么解决data未定义的值不会响应(Vue.set) --> Vue3怎么解决的

JavaScript的基本数据类型 --> ES6中新增的一种基本数据类型（Symbol） --> Symbol应用在什么地方

21. 合并两个有序链表

写左边固定300px，右边自适应的布局。
有可能会连带着双飞翼和圣杯布局一起问（百度问了，字节没问）

实现盒子水平垂直居中的方法有哪些

什么是原型链 --> 原型链继承(弊端) --> 解决办法（object.creat()寄生组合式继承 和 ES6的extends）

面试官问的是HTML里的单位，其实HTML只有标签没有单位，这个单位的知识应该属于CSS

--> 解释rem和em
rem:相对于根元素(即html元素)font-size计算值的倍数