前端面试题（中高级）

望京十三兄

已于 2024-03-22 16:59:55 修改

阅读量3.3k

点赞数 1

分类专栏：面试前端架构文章标签：前端面试题

于 2019-09-07 16:50:01 首次发布

本文链接：https://blog.csdn.net/qq_27401917/article/details/100601595

版权

前端架构同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

面试

3 篇文章 0 订阅

订阅专栏

Nginx , Linux, shell, docker, 数据库，算法，nuxt, nest, dva, umi, Charles, redis

js事件循环
js单线程，同步任务异步任务，异步分为宏任务和微任务。顺序执行js代码块，同步任务会出现阻塞，异步任务会放到执行队列，主函数。js引擎遇见异步事件不会等待其返回结果，而是将这个事件挂起继续执行执行站中的其他任务。异步事件返回结果后，js会将这个结果放到不同于当前执行栈的另一个事件队列。当前执行栈中的任务执行完毕后，主线程会查找事件队列中是否有任务，并按顺序把事件放入执行栈，然后执行其中的同步代码。。。
默认先执行 script 脚本中的代码 -> 会清空微任务（将所有的微任务全部执行完） -> 渲染页面 -> 取出一个宏任务执行 -> 执行完毕后会再次清空微任务…
三次握手四次挥手

第一次握手：客户端发送TCP网络包，服务端收到了。服务端确认客户端的发送服务端的接收是正常的。

第二次握手：服务端发包，客户端收到了。客户端确认服务端的接收发送，客户端的接收发送是正常的。不过此时服务器并不能确认客户端的接收能力是否正常。

第三次握手：客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接收、发送能力正常，服务器自己的发送、接收能力也正常。
this指向及改变this指向的方法

1）普通函数调用，此时 this 指向 window。
2）构造函数调用，此时 this 指向实例对象。
3）对象方法调用，此时 this 指向该方法所属的对象。
4）通过事件绑定的方法，此时 this 指向绑定事件的对象。
5）定时器函数，此时 this 指向 window。
改变this指向的三个方法：
1）bind() 创建的是一个新的函数（称为绑定函数），与被调用函数有相同的函数体，当目标函数被调用时this的值绑定到 bind()的第一个参数上
2）call() 方法 fn.call(Person,"hh",20);
3）apply(thisArg, [argsArray]) 方法与call()非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表
this的应用场景
call() apply() bind()
call，apply，bind这三个方法其实都是继承自Function.prototype中的，属于实例方法。
Function.prototype.call() ：函数实例的call方法，可以指定该函数内部this的指向（即函数执行时所在的作用域），在所指定的作用域中调用该函数。并且会立即执行该函数。 call()方法可以传递多个参数。第一个参数是指定函数内部中this的指向（也就是函数执行时所在的作用域），第二个参数是函数调用时需要传递的参数。
Function.prototype.apply() ：apply方法的作用也是改变this指向（函数执行时所在的作用域），在指定的作用域中调用该函数。也会立即执行该函数。它接收一个数组作为函数执行时的参数。
Function.prototype.bind()： bind方法用于指定函数内部的this指向（执行时所在的作用域），然后返回一个新函数。bind方法并非立即执行一个函数。
总结：
a：第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域），然后根据指定的作用域，调用该函数。

b：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

c：call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。

d：改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向
弹性布局
拷贝的方法
数组的方法
.keys() 遍历数组的键名
.values()
.entries()
.map(callback)
.foreach(callback)
.some()
.every(callback)

深拷贝

掌握数据的类型以及理解他们的存储位置
（1）手写一个递归进行数据的深拷贝

const deepClone = (obj) => {
    let cloneObj = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === 'object') {
        for(key in obj) {
            if(obj.hasOwnProperty(key)) {
                if(obj[key] && typeof obj[key] === 'object') {
                    cloneObj[key] = deepClone(obj[key])
                } else {
                    cloneObj[key] = obj[key]
                }
            }
        }
    }
    return cloneObj
}

(2)使用JSON 对象实现深拷贝，实现了数据的深拷贝，但是无法对数据中的方法进行拷贝，会显示undefined

var obj3 = JSON.parse(JSON.stringify(obj))
console.log(obj3.friends) //["Kate", "Bob", "Mike"]
obj.friends.push('lisi')
console.log(obj3.friends) //["Kate", "Bob", "Mike"]

(3) 通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

http1和HTTP2 区别
Node.js所提供的核心模块都有哪些，深入聊一下你所熟悉的其中2-3个模块。
解答：
如何实现前端缓存，聊聊你知道的方案，并简单写出相应的使用方式。

解答：前端缓存: cookie ,localstorege, sessionStorage

cookie是服务端保存在客户端的临时的少量的数据。cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie发送给服务器。由于cookie是存在客户端上的，所以浏览器加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的cookie数量是有限的（数量20-50个总大小4-5k）。Cookie在客户机上是如何存储的，浏览网站时，cookie会记录下你输入的文字和一些选择操作，当你下一次再访问同一个网站，web服务器会先查找有没有上次它留下的cookie资料，如果有就会依据cookie里的内容来判断使用者，从而送出特定的网页内容供你浏览。cookie 这种方式很容易被恶意攻击者入侵。cookie的生存时间是长久有效的：手动将cookie保存在客户端的硬盘中，浏览器关闭的话，cookie也不会清除；下次在打开浏览器访问对应网站内容，这个cookie就会自动再次发送到服务器。

Localstorage 可以存储较大资源2M以上，并可以无视用户主动刷新行为，缺点是由于保存在本地很容易导致ssh注入攻击，所以要做好对应的安全措施。
```
const key=’scq000’
const value = ‘hello word’

//存
Localstorge.setItem(key,value);

//取
Localstorge.getItem(key)
```
ajax和fetch区别
ajax是使用XMLHTTPRequest对象来请求数据。
fetch是window对象的一个方法，第一个参数url，第二个可选参数控制不同配置的init；使用了javascript Promise来处理结果，可进行链式操作.then().then()
fetch() 返回的Promise()不会拒绝http返回的错误码，把400,500当做正常状态处理。
fetch()默认不接受和发送cookie
宏任务微任务有哪些

js是单线程所有主线程的同步任务先执行，然后执行微任务队列的程序，最后执行宏任务队列，秉承先进先出的原则。

宏任务macrotask有哪些

script
setTimeout
setInterval
MessageChannel
postMessage
setImmediate requestAnimationFrame

微任务microtask有哪些

process.nextTick
MutationObserver Promise.then
前端性能优化
借助工具分析性能瓶颈 LightHouse
加载优化：减少http请求(), 压缩合并（图片压缩base64精灵图，代码压缩，文件合并），代码分割（大模块拆分小模块合并）, 使用CDN(第三方库，大文件，大图），fetch预加载。
图片优化：小图雪碧图，base64内联，icon font，图片懒加载，webp格式，图片一定要压缩，img的srcset属性使用。
JS优化：js代码置后，使用defer放在头部提前加载又不阻塞dom。
CSS优化：代码前置，避免css表达式，移除空置的css规则，尽量少行内样式。
渲染优化：减少操作DOM，避免重排和重绘，样式用变量缓存减少读取，动画元素absolute脱离文档流避免渲染阻塞。
首屏优化：首屏不需要的代码静态资源分离，服务端渲染或预渲染，DNS prefetch减少dns查询时间，PC端域名发散移动端域名收敛，减少关键路径css。
打包优化：拆包，提取公共包，缩小依赖包范围loader配置include/exclude/noParse，开启loader缓存，多线程加速happypack或thead-loader，移除死代码tree-shaking ES模块分析。
Webpack长缓存优化：
VUE优化：keep-alive，添加key
REACT优化：路由懒加载，列表添加key，类组件控制重复渲染或pureComponent，函数组件hook使用useMemo。
分包,减少dom操作，避免回流，文档碎片
浏览器事件机制 eventloop
浏览器渲染原理及流程
Map 和 WeakMap

Map和WeakMap - 简书

JS继承的实现
基于一个父类

function Animal(name){
    this.name = name || 'animal';
    this.sleep = function(){
        console.log(this.name + '正在睡觉 ！');
    }
}
Animal.prototype.eat = function(food){
    console.log(this.name + '正在吃' + food);
}

解答：
1）原型链继承：将父类的实例作为子类的原型

function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.name = 'catKitty';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal);
console.log(cat instanceof Cat);

2）构造继承

function Cat(name) {
    Animal.call(this);
    this.name = name || 'animal';
}
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep);
console.log(cat instanceof Animal);
console.log(cat instanceof Cat);

3）实例继承

4）es5的方式

5）es6的class类的extends

react 事件机制绑定根节点与vue原生事件。
react合成事件：react 基于 vitrual dom 实现了 syntheticEvent （合成事件），react 事件处理器接收到一个 syntheticEvent 对象，syntheticEvent 和原生浏览器事件一样拥有同样的接口，也支持事件冒泡机制。可以通过 stopPropgation 和 preventDefault 中断。如果需要访问原生事件对象，可以使用 nativeEvent 属性。
vue实现原理与react有和不同
usememo和usecallback
react fibber
v-show 区别v-if
vuex原理
vue中 mixin
websocket即时通讯
md5加密
md5加密是不可逆的，只可以解密8位以下的数字
reducer

hooks原理先后顺序
hooks的内部运⾏机制：⾸先每次执⾏⼀个hooks函数，都产⽣⼀个hook对象，⾥⾯保存了当前hook信息,然后将每个hooks按照定义的顺序以链表形式串联起来，并存放 memoizedState中。更新的时候，再按照顺序，从memoizedState 中把上次记录的值拿出来。
Hooks是使用数组或单链表串联起来，Hooks顺序修改会打乱执行结果
为什么只能在函数最外层调⽤ Hook？为什么不要在循环、条件判断或者⼦函数中调⽤。
自实现useState 和 useEffect ：浅谈ReactHooks的原理及实现 - 百度文库

let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

// This is the pseudocode for the useState helper
export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

// Our component code that uses hooks
function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi"); // cursor: 0
  const [lastName, setLastName] = useState("Yardley"); // cursor: 1

  return (
    <div>
      <Button onClick={() => setFirstName("Richard")}>Richard</Button>
      <Button onClick={() => setFirstName("Fred")}>Fred</Button>
    </div>
  );
}

// This is sort of simulating Reacts rendering cycle
function MyComponent() {
  cursor = 0; // resetting the cursor
  return <RenderFunctionComponent />; // render
}

console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']

// click the 'Fred' button

console.log(state); // After-click: ['Fred', 'Yardley']

webpack 优化大项目公共包图片大小处理
新的包管理工具
前端模块化
loaders和plugin
常用的loader有哪些
webpack提高开发效率的插件
定义一个react组件都有那些方式，他们之间的性能什么区别？

解答：
三种方式：
函数式无状态组件、
Es5方式 React.createClass组件、
Es6方式 extends React.Component

区别：无状态组件无法进行数据操作，es5方式是利用function模拟class写法做出来的， es6方式是通过新增的class的属性创建组件
fiber
使用JavaScript实现异步操作的方式有哪些，请结合你的经验分别列举出。

解答：javascript实现异步的方法：callback（回调函数）、发布订阅模式、Promise对象、es6的生成器函数、 async/await
App Cache 方案
请描述你觉得在移动web 开发中可能会遇到的问题或者你所经历的坑，请写出相应的解决方案。
解答：
如果让你开发一个前端技术产品，你会怎么规划？会关注哪些注意事项？

解答：

望京十三兄

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
前端面试题（中高级）

面试题1、请详细说明在哪些情况下会出现跨域问题？解决跨域的方案有哪些？解答：浏览器执行的一个脚本与其他资源如果不同源即为跨域。解决方式有Jsonp：利用script标签src外联引入文件不受同源策略限制，可以在页面动态添加script ，引入后端api接口地址，并以get的方式将前端回调处理函数名称告诉后端，后端响应请求时将回调返回，并将数据以参数形式传递回去 document..........
复制链接

扫一扫