首先感谢一小部分同事对第一部分的肯定。 其次，文章的标题是“提纲”，这只是作者整理的一个复习提纲。 可能内容不深入，因为文章的标题和定义就是提纲，我也不指望一篇文章就能教出提到的相应知识点。 不管是哪个知识点，一个原型链最基础的东西都是可以深挖的。大神们能画几万字，不一定每个人都能看懂。培训机构几万的学费，未必敢说你懂，更何况作者只是一个免费的大纲总结？这篇文章只是一个大纲。 如果对任何一个知识点都不熟悉，就要学会自己去找，自己去补缺，自己去学得更深。 也许是错别字，也许是知识点有错。因为时间紧，精力有限，能力有限，请多包涵。也欢迎大家指出，第二部分会一起进步，不像第一部分，很多都是开放式回答，由于个人时间原因，只提供简单介绍或者第三方链接。 本章有两个提纲:第一个是html、css、js、es6、浏览器等基础知识。 接下来的部分主要是关于手写api、网络编程基础、设计模式基础、源代码指南、框架评审指南等。 其中，本文是第二部分，第一部分的链接是:juejin.im/post/686771...三。巩固本章重点，提供的知识点分类，重点。 具体知识点不做赘述。 (如果不熟悉知识点，建议重点突击补充。 )1)深化巩固1。前台减肥有哪些方法？我看了一篇文章，里面有十二种，你可以参考:segmentfault.com/a/119000001……但是内容感觉重复很多，为了重复而重复一点。 作者简单提一下我脑子里可行的去重方法(关键词思维，代码太多暂时不提供):1。使用Set，具有阵列重复数据消除功能。 也是ES6最实用的方法。2.使用地图，请按3。对于拼接/Del4。指数为5。排序6。包括7。HasownProperty 8。过滤器9。递归2。异步前台有哪些方案？1)Promise(见上一部分解释)2)generator(见上一部分解释)3)async/await 4)event publish/listen模式(见后续设计模式，属于发布订阅模式，代表eventbus)。async与Promise直接相比，优势在于解决了then的调用链，编写代码更加清晰准确。 缺点是滥用await可能会导致性能问题。因为await会阻塞代码，所以后续的异步代码可能不依赖于前者，但仍然需要等待前者完成，导致代码失去并发性。 3.前台网络要求是什么？ajax，fetch，axios 简单一句话总结，ajax有fetch是因为不支持承诺被淘汰，然后fetch有很多缺陷，比如不支持异常捕捉，不支持监控进度条，不友好的cookies等等。 所以，axios现在的浪潮 有兴趣了解，推荐:juejin.im/post/684490…4。前台定时器是什么？定时器对于异步编程是必不可少的。常见的定时器函数有setTimeout、setInterval和requestAnimationFrame。 先说最常用的setTimeout。很多人认为setTimeout就是延迟多久就应该延迟多久，所以应该在延迟多久之后执行。 其实这种观点是错误的。因为JS是单线程执行的，如果前面的代码影响了性能，就会导致setTimeout不能按期执行。 当然，我们可以通过代码来固定setTimeout，这样计时器就相对准确了。首先requestAnimationFrame自带函数节流功能，基本保证16.6毫秒只执行一次(不丢帧)。而且这个功能延时效果准确，不存在其他定时器不准确的问题。当然，你也可以通过这个函数实现setTimeout。 5.前台创建对象有哪些方法？这个知识点只是总结提醒，不是具体分析。 请分别核对信息查漏补缺。 1)var obj = new Object()；2)var obj = {name:'晓明' }3)工厂模式函数create obj(name){ var o = new object()；o.name = nameo . fun = function(){ } return o；}4)构造器5)原型创建6)构造器+原型创建7)类编写6。前台的继承方式有哪些？1.原型链继承的本质是重写对象。 缺点:1)对象实例共享所有继承的属性和方法；2)参数无法传递；2)构造函数继承在子类构造函数内部调用超类型构造函数。 使用apply()和call()方法的缺点:1)函数重用性不高，每个实例都是重新实例化的构造函数，没有共享属性；2)原型上的方法只能继承，原型上的方法不可见；3)组合继承的本质:原型链+构造函数Parent.call(this) new Parent()避免了上述缺点，常用。 优点:可以作为参数传递，不会与父类的引用属性共享。缺点:继承父类函数时，调用父类的构造函数，导致子类原型上不必要的父类属性较多，浪费内存。 4.原型继承的本质:object()函数执行传递给它的对象的浅层复制。5.寄生继承借用构造函数继承属性，通过原型链的混合形式继承方法。6.寄生组合只调用构造函数一次，效率高，结合了寄生继承和组合继承的优点，是实现基于类型继承的最有效方式。 即把父类的原型赋给子类，构造函数设置给子类，不仅处理无用的父类属性问题Parent.call+Object.create()。详情请参考:juejin.im/post/684490…7。前台代码复用的方法有哪些？这个知识点只是总结提醒，不是具体分析。 请分别核对信息查漏补缺。 1)函数封装2)继承3)复制扩展4) mix in mixin5)借用应用/调用2)编写这部分api。废话不多说，直接交给相应的代码！如果有其他重要的手写代码，消息作者会考虑添加。 如果不知道源码，可以自己查资料，或者关注作者的解释:juejin.im/post/686940…1.new2.apply/call/bind3.instanceOf4.获取url参数。5.模拟深度复制短版看作者代码。如果你需要深入的建议:www.kancloud.cn/ljw78947894…6。防抖节流7。手写迭代器next8。手写Object.freeze3)理解框架的源代码是很多企业考试的重点。不懂源码没关系，但是要知道源码是什么，一般原理是什么。 这一章的内容比较大，我就不单独在这篇文章里分析了。 作者本人处于探究或学习状态。 如果你有2到5年的工作经验，想学习源代码，可以参考作者过去写的文章，这也是我的复习思路。 列出的知识点是重点。 如果你基础比较扎实，或者看过源代码，或者觉得网上有比较好的帖子，可以去别的地方学习。不喜欢就不要喷。 (作者也是研究中写的源代码。如有不足或错误，多多包涵和讨论)1.vue源代码作者迷你版草书:juejin.im/post/684790…2 .React源代码作者迷你版草书:juejin.im/post/685457…3。Wepback源代码作者迷你版草书:juejin.im/post/ 85457…4。Vuex源代码作者迷你版草书:juejin.im/post/685705…5。Vue路线源代码作者迷你版草书:juejin.im/post/686010…6。不同的源代码作者迷你版草书:juejin.im/post/ 86881…7。承诺源代码作者迷你版草书:juejin.im/post/686920…8。反应系统反应纤维，反应redux，反应钩等。，作者没时间学习或总结，看过一些不错的文章:react fiber:juejin.im/post/685952…react hook:juejin.im/post/686774…react redux:juejin.im/post/684490…4)工具扩展1 . Babel Concept Part Copy:juejin.im/邮报/684490…Babel是一个工具链，主要用来使ECMAScript 2015+版本代码向后兼容Javascript语法，使其可以运行到更老的浏览器或其他环境。 Babel的三个主要解决方案是:解析、转换和生成。 将代码解析成通用语法树(AST)。每个js引擎(如Chrome浏览器中的V8引擎)都有自己的AST解析器，Babel由Babylon实现。 在解析过程中有两个阶段:词法分析和语法分析。在词法分析阶段，字符串形式的代码被转换成令牌，这类似于AST中的节点。在解析阶段，一个令牌流会被转换成AST的形式，同时令牌中的信息也会被转换成AST的表达式结构。 在转换的这个阶段，babel接受AST并通过Babel遍历它——在这个过程中添加、升级和删除节点。 这部分也是巴别塔插件介入的部分。 生成的转换AST由babel-generator转换成js代码。过程是首先深入遍历整个AST，然后构建一个可以表示转换后的代码的字符串。 Babel编译原理● babylon将ES6/ES7代码解析成AST ● babel-traverse遍历AST得到新的AST ●新的AST转换成es 5 Babel/Babel-Polyfill Babel-Polyfill:Babel-generator对ES6的转码。 IE兼容2.nignx非专业人士，但是前台人员还是需要知道如何部署前台。 简单普及一下nignx，Nginx可以看成是简单理解的高性能Web和反向代理服务器的开发。 了解nigix如何实现正向代理、反向代理和负载均衡。 如果你有兴趣，请继续前进:juejin.im/post/684490…3。CSR和ssrSSR(服务器端渲染):传统的渲染方式，服务器把渲染好的完整页面吐给用户。 这样就减少了一个从用户到服务器的http请求，加快了相应的速度，一般用于首屏的性能优化。 CSR(客户端渲染):是目前比较流行的渲染方式。它依赖于客户端运行的JS，客户第一次发送请求时只能获得少量的指导性HTML代码。 第二个请求将请求更多包含HTML字符串的JS文件。 SSR的优点:1)有利于SEO优化；2)首屏快；1)性能都取决于服务器；2)只能是静态的，交互效果还需要CSR，所以前台界面开发的可操作性不高；3)开发条件有限，生命周期有限。 反之，CSR不利于SEO，首屏慢，但交互效果好。 4.网络工作者想了解的朋友:juejin.im/post/684490。编程相关这里是“编程相关”，不是“前台相关”，因为这是任何客户端的开发者都必须掌握的基础。 事不宜迟，本文列出了与前一阶段相联系的知识点。 1)设计模式设计模式是一种思维。 共有23种设计模式，分为创建、结构和行为。 下面是前台使用的几个设计模式，简单描述一下。 如果想全面了解，可以参考作者写的一篇文章:juejin.im/post/684490……另外，《徐小溪》也不错。 Juejin.im/post/684490...1.单例模式中可能重复的“实例”。如果是重复创建，能消耗性能吗？如果使用第一个实例，后续的实例只会被重用，从而达到我们节省性能的目的。 可能服务器端的朋友知道什么是数据库连接池，是单一的经典模型。数据库连接池，随着每个数据库的连接，效率会有巨大的差异。 这就是singleton模式的魅力。 在我们前台的实践中，经常可以借鉴这种思维。 比如登录弹出框，取消重新弹出，会显示原来的弹出框，而不是重新创建。 2.工厂模式严格来说，这里有两种设计模式，一种叫简单工厂，一种叫通用工厂。 工厂方法模式被称为静态工厂方法模式，这是一个工厂对象决定创建哪个产品类别的实例。 比如富士康需要同时生产华为、苹果等手机。我们可以用一个工厂的型号，厂商只需要输入型号就可以生产出相应的手机。 一般工厂，多一个一般对象。 通用工厂是工厂方法模式的核心，所有创建对象的工厂类都必须实现这个接口。 如上，栗子，如果你还需要手机的颜色和内存大小，我们共同确定下一款手机。这是一家普通工厂。 一般工厂，还需要使客户能够根据参数获取相应的类实例，从而避免类的直接实例化，降低耦合性。 3.策略模式简单的理解就是针对不同的状态给出不同的算法或者结果。 定义策略组，根据不同的状态定义不同的策略。 我们前台的例子，比如我们的表单验证 他的优点:1。算法可以自由切换。 2.避免使用多重条件判断。 3.良好的可扩展性。 缺点:1。策略的数量会增加。 2.所有策略类都需要公开。 4.责任链模型是用于解决相关事务的责任的执行链。 比如前台JS中的事件，一层一层的冒泡向上传递。 优点:1、耦合度降低 它解耦了请求的发送方和接收方。 2.对象被简化。 因此对象不需要知道链的结构。 3.加强向对象分配责任的灵活性。 通过改变链中成员或玩家的顺序来调动他们，允许动态地添加或删除职责。 4.添加新的请求解析类很方便。 缺点:不能保证请求会被收到；调试代码不方便，可能造成循环调用；5.观察者模式(Vue必须了解)观察者模式(了解Vue的双向绑定原理):观察者直接订阅主体，当主体被激活时，会触发观察者中的事件。 订阅模式:订阅者向调度中心注册(订阅)想要订阅的事件(主题)。发布者向调度中心发布事件时，即事件触发时，调度中心统一调度(触发事件)订阅者向调度中心注册。 发布模式在广义上属于观察者模式。 经过时间的沉淀，逐渐独立于观察者模式，成为另一种不同的设计模式。 这篇文章写得相当好:blog.csdn.net/hf872914334...Vue双向绑定思维的设计模式。Vue玩家必须深入其中。 7.装饰模式(React必须理解)装饰模式允许在不改变现有对象结构的情况下向其添加新功能。 类似于我们的相框和照片的关系。 优点:装饰类和被装饰类可以独立发展，不会互相耦合。 缺点:多层装修会比较复杂。 React高级组件思维，React玩家必须深入。 2)我在网络协议一章列举了几个要点。 建议天天向上直接写的文章更适合受众(不像写给自己看的，自己看的是写一个要点去联想)。 本节指的是:1。巩固你的HTTP知识体系:juejin.im/post/685728...2.前台必备的HTTP基础知识:www.jianshu.com/p/20bd68e95...3.12前台冲刺必备指南:juejin.im/post/684490...1.HTTP 1的特点和优势。简单快捷。每个资源的URI是固定的。如果要访问某个资源，只需输入该资源的相应URI。 (URL(统一资源位置)统一资源定位器，URI(统一资源标识符)统一资源标识符) URL是URIs的子集，URL是通过定位实现的URI。 2.灵活性。每个HTTP头都有一个Content-Type，HTTP协议可以通过设置不同的Content-Type值来完成不同类型资源的传输。 3.没有连接限制。每个连接只能解决一个请求。 服务器解决了用户的请求，收到用户的响应后，就会断开连接。 这样，可以节省传输时间 4.无状态HTTP协议没有用于事务解析的内存。 知乎的简单收条很好:你认不出它来过第二次了。 但是，在加入cookie和会话机制的前提下，目前的网络请求实际上是有状态的。 1.缺点:无国籍。有时候，信息是需要保存的，比如购物系统，客户信息需要保存等等。另一方面，有时候，无国籍也会减少网络开销，比如类似于直播行业。这还是一个子场景。 2.明文传输，即协议中的消息(主要指报头)不使用二进制数据，而是以文本的形式。 这就把HTTP消息信息暴露给了外界，给攻击者带来了便利。 3.队列头阻塞。当http打开长连接时，共享一个TCP连接。当一个请求耗时过长时，剩下的请求只能被阻塞，这就是队列头阻塞问题。 2.httpsHTTPS协议需要在CA申请证书。一般免费证书很少，需要付费。 HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都是加密的。 HTTP和HTTPS使用完全不同的连接方法和不同的端口。前者80，后者443。 HTTPS可以有效防止运营商劫持，解决了反劫持的一大难题。 3.http1.1缓存解决带宽优化异常代码的改进，新增24个错误状态响应代码，主机头解决长连接。4.http2.0header压缩新的二进制格式，复用服务器推送。5.参考上一节HTTP缓存，浏览器缓存一节。 6.常见状态代码“1xx”:表示请求已被接受，需要解决。 “2xx”:表示成功状态。 “3xx”:重定向状态 “4xx”:客户端错误 “5xx”:服务器端错误 7.DNS解析浏览器缓存-->:& gt；本地主机文件-->:& gt；本地DNS解析器-->:& gt；本地DNS服务器-->:& gt；其他域名服务器请求 8.三次握手的第一次握手:当连接建立后，客户端向服务器发送一个syn包(seq=j)，进入SYN_SENT状态，等待服务器的确认；同步序列号 第二次握手:服务器收到syn包时，必须确认用户的SYN(ack=j+1)，自己发送一个SYN包(seq=k)，即SYN+ACK包。此时，服务器进入SYN_RECV状态。 三次握手:客户端从服务器接收SYN+ACK包，并向服务器发送确认包ACK(ack=k+1)。这个包发出后，客户端和服务器进入已建立的(TCP状态，三次握手完成。 9.挥四下。1.客户端发送请求断开TCP连接的消息，消息中包含seq序列号，由发送方随机生成，消息中的FIN字段置1，表示需要断开TCP连接。 (FIN=1，seq=x，x由用户随机生成)2。服务器会回复用户发送的TCP断开请求消息，消息中包含seq序列号，序列号由响应方随机生成，会生成一个ACK字段。ACK字段的值被加1到用户发送的用于回复的SEQ序列号，从而用户可以知道当接收到信息时其TCP断开请求已经被验证。 (FIN=1，ACK=x+1，seq=y，y由服务器随机生成)3。服务器在回复用户的TCP断开请求后，不会立即断开TCP连接。服务器将首先确定在断开连接之前是否已经传输了所有传输到A的数据。一旦数据传输被确认，回复消息的FIN字段将被设置为1，并且将产生随机的seq序列号。 (FIN=1，ACK=x+1，seq=z，z由服务器随机生成)4。用户收到服务器的TCP断开请求后，会回复服务器的断开请求，包括随机生成的seq字段和ACK字段，ACK字段会给服务器的TCP断开请求的SEQ加1，从而完成对服务器请求的验证回复。 (FIN=1，ACK=z+1，seq=h，h由客户端随机生成)五、前端框架(复习指南)在本章中，本计划列出了所有知识点。 发现后续有很多好文章，再加上作者时间不够，为避免这篇文章没有下文，作者做一个简单的引导。 (本章有时间会单独发表，时间不定。有兴趣就期待吧)1)Vue前台森林:juejin.im/post/684490…童欧巴:juejin.im/post/684490…coder Fei:juejin.im/post/684490…边边村长:juejin.im/post/ 84490…2)React骑着蜗牛逛妓院:juejin.im/post/684490…RNG牛逼:segmentfault.com/a/119000001…Java进阶路:zhuanlan.zhihu.com/p/91725031做前端开发。如果你也想学习前端开发技术，可以加入我的前台学习交流裙:851 231 348或者关注我的微信微信官方账号:【前台学员】一套web前台精讲视频和学习方法，还有少量的前台学习手册、前台面试问题、末端开发工具、PDF文档、书籍和教程，这些都是我根据多年的开发经验记录下来的，免费参考。 需要的话可以自己下载。 作者:步步链接:https://juejin.im/post/6873163847721713677来源:掘金