一面是基础知识 什么都问 css基础 js基础 一些标准 例如bem 清楚浮动 闭合浮动 各种居中 EE5 ES6 ES7 等等 还有一些原理什么的 一般这一面2小时左右 能答上80%就可以
二面就提高了 各种框架原理 设计模式 Babel less webpack vite npm 这些东西的原理 有些也会考点算法 前端性能优化 性能统计 去年i18n问的多些 就是多语言方案 node http http2.0 缓存机制
standard 规范
这玩意,看官网就能配置,cicd可以看teamcity的官方配置,npm私服verdicco,组件库就是storybook
- ES6、ES7、ES8、ES9、ES10新特性
- es6
- 箭头函数
- es模块化 export import
- 参数默认值
- 模版字符串
- 解构赋值
- promise
- all 全部成功
- race哪个快返回哪个
- any 任意成功就算成功
- allSettled 均出现结果无论成功还是失败
- let const
- es7
- arr.includes
- 指数操作符 2**10 = 1024
- es8
- async await
- 捕获错误 try catch
- Object.values()
- Object.entries() 对象转数组,并解析出key value
- Object.entries({a: 1, b: 2, c: 3}); // [[a, 1], [b, 2], [c, 3]]
- async await
- es10
- Array.flat() 和 Array.flatMap()
- [1, 2, [3, 4]].flat(Infinity);
- [1, 2, 3, 4].flatMap(a = [a**2]);
- trim 去除字符串收尾字符
- Array.flat() 和 Array.flatMap()
- es6
- 移动端布局
- 百分百布局
- flex布局
- flex的三个属性
- flex-grow 定义放大比例, 默认0
- flex-shrink 缩小比例,默认1
- flex-basis 分配多余空间,默认auto 本身大小
- flex:1 === flex-grow:1;flex-shrink:1; flex-basis: 0%
- flex的三个属性
- rem布局
- em元素字体大小
- rem html 元素的字体大小
- vw、vh布局
- dpi 点数密度 DPI值越小,打印的内容越不清晰
- 输入url到页面显示完成,这个过程中都发生了什么?
- url解析
- 协议头是http还是https
- 主机域名或ip
- 端口号,一般不设置http 80 https 443
- 当前的目录路径
- query参数
- 同源策略
- 如果两个URL的协议、域名、端口号都相同,就称这两个URL同源
- 解决跨域的几种方法
- JSONP
- CORS
- Nginx代理
- iframe
- 浏览器查找当前URL是否存在缓存,并比较缓存是否过期(优先级由上到下)
- Service Worke
- 最大的作用就是缓存静态页面达到一个可以离线访问静态页面的一些功能
- Memory Worke
- 内存缓存,把js和图片等文件解析执行后直接存入内存缓存中,刷新页面时只需要直接从内存缓存中读取
- Disk Cache
- 磁盘中的缓存 cache-control > expires > etag > lastmodify
- 强缓存
- 强制缓存直接减少请求数,是提升最大的缓存策略
- 设置参数:Expires 缓存时间绝对时间 Cache-Control 最大有效时间
- 协商缓存 Cache-Control: no-cache
- 使用缓存数据时,需要先确认以下数据是否还跟服务器保持一致 304
- etag
- lastmodify
- 所以
- 经常变化的资源 cache-control:no-cache
- 对于很少变化的资源 cache-control:max-age=31536000
- Push Cache
- http2.0新增,缓存时间短,一次绘画期
- 网络请求
- Service Worke
- DNS域名解析
- 域名解析的过程实际是将域名还原为IP地址的过程
- TCP连接
- 三次握手
- 关闭TCP连接 四次挥手
- 浏览器解析html, js , css, 并渲染页面
- 解析HTML,构建DOM树
- 解析CSS,生成CSS树
- 合并DOM树和CSS树,生成render树
- 知识点,回流、重绘
- url解析
- HTTP
- http 2.0
- 多路复用
- 请求头压缩
- 同时发出多个请求,他们的头是一样的,消除重复部分
- 二进制分帧
- 服务器推送
- http 3.0
- 把TCP改成了UDP
- UDP是不可靠传输,基于UDP的QUIC协议是可靠性传输
- 把TCP改成了UDP
- http 2.0
- redux源码总结 主要分为三个文件
- createStore.js
- combineEeducer.js 合并单个redux
- applyMiddleware.js 让异步函数执行后再执行dispatch
- createStore.js主要包含三个方法
- getState: 获取store中的状态变量
- dispatch: 发出一个action, 改变store
- subscribe: 订阅state更新的事件
- getState方法中返回的是state本身,所以直接可以改变state, redux 不推荐这样做,因为这样改变state之后,不会通知订阅函数
- new 执行过程
- 首先创建一个空对象
- 设置原型,将对象的原型设置为函数的prototype对象
- 让函数的this指向这个对象,可以执行构造函数的代码(把属性添加到这个新对象上
- 判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型
- 原型和原型链
- 构造函数 new一个实例,
- 实例的__ proto __指向构造函数的原型对象,也就是构造函数的.prototype,
- 也就是构造函数.prototype.constructor指向构造函数的本身
- 也就是构造函数.prototype. __ proto __ 指向Object的实例对象
- 然后一直通过.__ proto __ 向上指就形成了一条原型链
- 然后最终指向null Object.prototype.__ proto __ === null
- 构造函数 new一个实例,
- Proxy的参数
- new Proxy(target, baseHandler)
- target目标对象 baseHandler get/set 值处理方法,
- 对react-fiber的理解
- react v15在渲染时,会递归比对VirtualDOM,找到需要变动的节点,react会占据浏览器资源,导致用户触发的事件得不到响应,会出现掉帧的情况
- 15之后,react通过Fiber架构让这个执行过程变成可被中断,会在合适的时候让出CPU执行权,
- 这样就避免了一次性操作大量的dom节点
- 给浏览器喘息机会,让他对代码进行编译优化
- 那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?
- 因为 Hooks 的设计是基于数组实现。
- 在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。
- 当然,实质上 React 的源码里不是数组,是链表。
- setState是同步的还是异步的?
- 只要进入了react调度流程,就是异步的
- 什么东西不会进入
react
的调度流程?setTimeout
setInterval
,直接在DOM
上绑定原生事件等
- react生命周期
- 第一阶段,组件挂载阶段
- constructor 组件的构造函数
- 初始化state
- 给时间处理方法绑定this
- getDerivedStateFromProps 静态方法,返回一个对象来更新state, 参数为props和 state
- render
- componentDidMount
- 执行DOM的操作
- 发送网络请求
- 一些订阅消息 unmount卸载
- constructor 组件的构造函数
- 更新阶段
- shouldComponentUpdate
- 用来比较this.props和nextprops ,this.state和nextState是否有变化,某些组件是否更新
- componentDidUpdate 更新之后立即调用
- shouldComponentUpdate
- 组件卸载阶段
- componentWillUnmount
- 清除定时器
- 清除DidMount创建的订阅
- componentWillUnmount
- componentDidCatch
- 两个参数
- error 抛出的错误
- info 引发错误的栈信息
- 第一阶段,组件挂载阶段
- Redux原理
- createStore 生成唯一的store函数
- combineReducers 合并多个reducer
- bindActionCreators 增强dispatch 操作state
- applyMiddleware 提供其他中间件来增强dispatch
- 例如处理异步的中间件 redux-thunk、redux-saga
- webpack 面试题 juejin.cn/post/684490…
- ---------------性能优化 ----------------------------
- 懒加载, 图片滚动加载 适用于图片很多,页面较长的页面
- 图片预加载 提前请求图片。用到时直接从缓存取资源
- 减少回流重绘、使用定位脱离文档流 position: absolute 或fixed
- 节流防抖
- 回流重绘
- 回流:页面首次渲染、浏览器窗口变化、元素内容发生改变、位置变化、激活伪类、添加或删除dom
- 重绘,元素的样式发生一些变化
- -------------- webpack 优化 ------------------------
- 优化 loader的文件搜索范围
- include
- exclude
- HappyPack 将loader的同步执行转换为并行
- 代码压缩,webpack4后直接集成了
- CDN加速,将引用的静态资源路径修改为CDN上对应的路径
- 使用Tree-shaking和Scope Hoisting 来剔除多余代码
- 优化 loader的文件搜索范围
- SEO优化都包括哪些
- 首先是title,网站的一个描述
- meta标签,
- 图片加alt
- 域名跳转尽可能全亮域名
- react18更新
- 在React 18中新加入的可选的并发渲染(concurrent rendering)机制
- 更新优先级,高优先级的更新会中断正在进行的低优先级的更新