前端面试知识点

2020-06-19  本文已影响0人  玘瑾

HTTP

状态码、重定向有哪几种

301 永久重定向,302 暂时重定向

get与post请求区别

浏览器

从浏览器输入url回车到页面呈现,中间发生了什么

渲染机制、重绘、重排

cookie localStorage sessionStorage 区别

cookie 有过期时间,参与服务器通信,空间小4k,同源窗口共享

sessionStorage 有过期时间(页面关闭即销毁),不参与服务器通信,5M,不同窗口不共享

localStorage 没有过期时间,不参与服务器通信,5M,同源窗口共享

前端性能优化的方式

CSS

基础

盒模型

垂直居中,水平居中实现

左边固定,右边自适应的方法

flex布局

BFC

进阶

单位 rem em vh, vw 概念

响应式设计方案

Translation  animation 区别

JS

基础

foreach和map的区别

跨域解决方式

什么是作用域,闭包

进阶

js的继承,实现

防抖节流原理,手写实现

宏任务微任务,事件循环机制

宏任务包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

微任务包括: Promises, Object.observe, MutationObserver

promise原理,手写实现

Vue

生命周期函数

组件的通信方式

双向绑定实现原理

v-model的实现

nextTick的实现

React

状态(state)和属性(props)有何不同

State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递

React diff的原理

把树形结构按照层级分解,只比较同级元素。

给列表结构的每个单元添加唯一的 key 属性,方便比较。

React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)

合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

React的性能优化在哪个生命周期?它优化的原理是什么

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能

webpack

treeShaking优化

基于 ES6 的静态引用,tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种,在后续压缩时进行区别处理

上一篇 下一篇

猜你喜欢

热点阅读