web前端进阶知识点 React专精webpack网络协议音视频等

Posted 2023-04-04 tokie_chen

作者是React、音视频技术栈，参加过不少面试，并成功拿下过几个大厂的offer，算是有不少面试经验的积累，由于大环境使然深感危机故自我提升，分享总结在工作中需要掌握或者在面试中会被问及的问题要点。将会抽时间逐步补充要点内容，欢迎探讨补充。

一、React

（1）React的设计思想、理念

（2）React的优点，相比较以前的JQuery、ExtJS等框架

jQuery不乏是一个很优秀的Js库，它提供的自带方法很大程度上给前端开发带来了便利。但是随着前端的分离以及前端工程化的进程，项目越来越庞大，对项目的代码可读性、管理维护、性能、可拓展性以及自动化测试上的要求越来越高，渐渐jQuery变得力不从心。

React的哲学就是为了解决以上的问题。

React的特点，虚拟dom、组件化、视图数据驱动、跨端。
‘
1、虚拟dom：优化了js操作对视图的重复渲染，通过diff算法比较内存中新旧虚拟dom，得出最优更新方式，批量更新。
2、组件化：将重复可复用的功能代码，抽离出来作为基础组件、业务组件，降低了维护复杂度，增加了代码可读性，将一个复杂页面作为多个组件的集合。
3、数据驱动：组件自带内部状态state，视图数据绑定state中属性时，只需在业务过程中更新state即可自动触发界面更新渲染。
4、跨端：一次学习，多端编写，支持PC、移动安卓、移动ios。

（3）React V15 V16 V17 V18的迭代差异，每个版本解决了什么问题

• 以下几个大的改动

• （1）生命周期

   废除了部分 will钩子，新增getDerivedStateFromProps和getSnapShootBeforeUpdate用于代替
  

• （2）虚拟dom

• （3）Fiber

• （4）事件系统

   V18后document上的事件代理被取消
  

• （5）同步/异步更新State

React 的更新是基于 Transaction（事务）的，Transacation 就是给目标执行的函数包裹一下，加上前置和后置的hook （有点类似 koa 的 middleware），在开始执行之前先执行 initialize hook，结束之后再执行 close hook，这样搭配isBatchingUpdates 这样的布尔标志位就可以实现一整个函数调用栈内的多次 setState 全部入 pending 队列，结束后统一 apply 了。
但是 setTimeout 这样的方法执行是脱离了事务的，react 管控不到，所以就没法batch 了

V18中所用的State都将使用批量更新，不再存在历史版本中的在原生事件中的同步更新

在 React 18 #21 中自动批处理以减少渲染

（4）React的数据管理；Redux与Mobx的差异；

（5）React-Redux使用

记住几个方法和声明方式就行了

• 声明reducer：initstate就是store中存的对象

const initState = 
    username:null,
    uid:null,
    remember:null,
    isLogin:null,


export default function UserInfor(state = initState, action) 
    switch (action.type) 
        case Type.USERINFOR_INIT:
            return 
                ...state,
                ...action.data
            ;
        default:
            return 
                ...state
            ;
    
`

• Type：与action的对应关系，个人觉得很多余

export const USERINFOR_INIT = 'USERINFOR_INIT';

• action：修改store的方法

import * as Type from './type'

const userInforInit=(data)=>(
    type:Type.USERINFOR_INIT,
    data
)
// 加了中间件thunk的action
const middlewareAction = () => (dispatch,getState,resolve,reject) =>
export 
    userInforInit,
    middlewareAction
;

• combineReducers：合并多个reducer

  // 获取合并后的redducers
  const reducers = combineReducers(
    publicStore, // 公共reducer
    ...Reducers // 单个页面中的reducer
  );

• applyMiddleware：应用中间件

applyMiddleware(logger,thunk);

• createStore创建存储对象，其实这个store是个包含四个方法的闭包对象，源码一目了然

store = createStore(reducers, undefined, composedEnhancers);

• 扔到Provider里

 <Provider store=store>

• 要用的页面使用@connect（@这玩意儿是个高阶函数，connect也是个高阶函数）

@connect(mapStateToProps,mapDispatchToProps,null)

至此，完整能用了。

（6）React-Redux实现原理及源码

（7）React各个版本生命周

这个也是老生长谈，很多文章有详细说明，需要不用想就能说出来

一个组件的生命周期由初始化 、更新（内部状态更新、外部参数更新）、销毁三个阶段构成。

V15版本钩子

	getDefaultProps() （16版本已弃用）
	getInitialState() （16版本已弃用）
	componentWillMount()
	render()
	componentDidMount()
	componentWillReceiveProps()
	shouldComponentUpdate()
	componentWillUpdate()
	componentDidUpdate()
	componentWillMount()

V16版本钩子

	constructor() （较15版本新增）
	componentWillMount() （17版本已弃用）
	render()
	componentDidMount()
	componentWillReceiveProps() （17版本已弃用）
	shouldComponentUpdate()
	componentWillUpdate() （17版本已弃用）
	componentDidUpdate()
	componentWillUnMount()
	componentDidCatch()

V17版本钩子

	constructor()
	static getDerivedStateFromProps() （较16版本新增）
	render()
	componentDidMount()
	shouldComponentUpdate()
	getSnapshotBeforeUpdate() （较16版本新增）
	componentDidUpdate()
	componentWillUnmount()
	getDerivedStateFromError()

V17.3与V17.4后有细微差别，getDerivedStateFromProps

V16.7/8 函数式组件钩子Hooks

	useState()
	useEffect()
	useRef()
	useMemo()
	useCallBack()

生命周期图谱

（8）React hooks的用法、实现原理、及注意事项（useState、useEffect、useRef）

（9）React 虚拟dom数据结构、遍历方式、优化后的diff算法

react的虚拟dom是在内存中维护一个与真实的dom一样结构的对象树，当树状结构发生改变时，会生成一个新的虚拟dom对象，react比较内存中的新旧虚拟dom，Diff出不同的部分，将该diff出的修改添加到队列中，批量更新到真实的dom中。
优点：

（10）React渲染优化：React.memo、React.PureComponent、useMemo、useCallback、React.Lazy、行内样式

（11）组件化、组件间传参

（12）React事件机制及不同版本的差异

（13）React路由

（14）Fitter解决的问题及原理

（15）React-Redux 中间件

二、Webpack

（1）Webpack打包原理

（2）配置文件构成

（3）Loader、Plugin；

（4）打包优化（打包速度、访问速度）

三、浏览器

（1）老生常谈：输入url到按下回车的背后发生了什么

（2）Js引擎、渲染引擎

（3）缓存机制：强缓存、协商缓存

（4）浏览器Dom渲染及阻塞问题

（5）重绘重排触发原因及优化注意事项

（6）跨域问题

（7）cookie、session、storage

四、网络协议

（1）HTTP协议：1.0、1.1、2.0、3.0

（2）TCP、UDP：三步握手、四步挥手

（3）WebSocket

（4）流媒体协议（见五-2）

五、CSS样式

（1）Position

（2）Flex布局

（3）盒模型

（4）CSS3动画

（5）垂直居中

（6）三角形绘制方法

六、html5

（1）语义化标签有什么作用

（2）Cookies，SessionStorage和LocalStorage的区别？

七、音视频

（1）音视频帧概念：P、B、I帧

（2）RTP、RTSP、WEBRTC等流媒体协议

（3）ASM、WASM解码库格式

（4）H264、H265、MJPEG、MP4

（5）AAC、G711A、PCM、MP3

（6）MediaSource对象

八、设计模式

常见的需要掌握手写的

（1）发布订阅

（2）监听者

（3）工厂模式

（4）单例模式

九、SPA速度优化

十、代码托管：GIT命令、GITlab二次开发

十一、时髦技术

（1）微前端

（2）Electron

十二、项目架构

（1）MVC与MVVM

（2）组件化

十三、其他老生常谈

（1）Promise 接口及实现
（2）bind apply call 使用及实现
（3）截流、防抖 使用及实现
（4）对象继承及方法
（5）原型链
（6）Http1 2 3
（7）TCP、UDP
（8）CommonJS、AMD、CMD
（9）事件冒泡
（10）宏任务、微任务

十四、场景问题

FIN1、其他八股文
FIN2、项目经历
FIN3、算法

考脑子灵不灵光、代码规不规范、意识到不到位

Web前端进阶之JavaScript模块化编程知识

JavaScript是前端三要素之一，也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门完全摸不着头脑。但只要我们一点一点由基础到进阶的学习，就一定能学好JavaScript。接下来小千就给大家分享Web前端学习进阶中有关JavaScript模块化编程的知识。

模块是实现特定功能的一组方法，模块化是一种规范、一种约束，这种约束会大大提升开发效率。JS模块化思想是将每个JS文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。

模块化需要实现的功能

1.解决命名冲突。当代码达到一定规模，功能很多的时，命名冲突就会出现，模块化可以很好的解决命名冲突的问题。

2.实现依赖管理。当一个页面要加载多个JS并且他们之际有些还有依赖关系，这时候就需要慎重仔细的排列这些JS的顺序，以保证每个组件都能正常运行，而模块化之后就不用为此多费心思。

3.提高复用性和代码可读性。一个功能为一个模块，每个模块相互独立，互不影响，代码组件封装可以重复利用，去除这个模块不影响其它的。

JavaScript模块化发展

闭包与命名空间

这是最容易想到的也是最简便的解决方式，早在模块化概念提出之前很多人就已经使用闭包的方式来解决变量重名和污染问题。这样每个JS文件都是使用IIFE包裹的，各个JS文件分别在不同的词法作用域中，相互隔离，最后通过闭包的方式暴露变量。每个闭包都是单独一个文件，每个文件仍然通过script标签的方式下载，标签的顺序就是模块的依赖关系。

面向对象开发

这种方法只是闭包方式的小改进，约束js文件返回必须是对象，对象其实就是一些个方法和属性的集合。这样的优点：1)规范化输出，更加统一的便于相互依赖和引用;2)使用‘类’的方式开发，便于后面的依赖进行扩展。本质上这种方法只是对闭包方法的规范约束，并没有做什么根本改动。

YUI

雅虎出品的一个工具，模块化管理只是一部分，其还具有JS压缩、混淆、请求合并(合并资源需要server端配合)等性能优化的工具，可谓是现有JS模块化的鼻祖。通过YUI全局对象去管理不同模块，所有模块都只是对象上的不同属性，相当于是不同程序运行在操作系统上。

CommonJs

2009年Nodejs发布，Commonjs发布之后，就成了Node里面标准的模块化管理工具。同时Node还推出了npm包管理工具，npm平台上的包均满足Commonjs规范，随着Node与npm的发展，Commonjs影响力也越来越大，并且促进了后面模块化工具的发展，具有里程碑意义的模块化工具。

AMD和RequireJS

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后(前置依赖)，这个回调函数才会运行。

RequireJs是JS模块化的工具框架，是AMD规范的具体实现。但是有意思的是，RequireJs诞生之后，推广过程中产生的AMD规范。RequireJs的优点：1)动态并行加载js，依赖前置，无需再考虑js加载顺序问题;2)核心还是注入变量的沙箱编译，解决模块化问题;3)规范化输入输出，使用起来方便;4)对于不满足AMD规范的文件可以很好地兼容。

CMD和SeaJs

CMD规范由国内(阿里)诞生，借鉴了Commonjs的规范与AMD规范，在两者基础上做了改进。特点：1)define定义模块、require加载模块、exports暴露变量;2)不同于AMD的依赖前置，CMD推崇依赖就近(需要的时候再加载);3)推崇api功能单一，一个模块干一件事。

SeaJs是CMD规范的实现，跟RequireJs类似，CMD也是SeaJs推广过程中诞生的规范。CMD借鉴了很多AMD和Commonjs优点，同样SeaJs也对AMD和Commonjs做出了很多兼容。

ES6中的模块化

ES6规范中终于将模块化纳入JavaScript标准，从此JS模块化被官方扶正，也是未来JS的标准。ES6中的模块化在Commonjs的基础上有所不同，增加了关键字import、export、default、as、from，而不是全局对象。二者有两点主要的区别：1)CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用;2)CommonJS模块是运行时加载，ES6模块是编译时输出接口。

想了解更多JavaScript模块化知识点，你可以关注小千，后期分享更多知识。

本文来自千锋教育，转载请注明出处。