前端进击笔记
已发布: 30
7193 || 已发布 || 开篇词 | 前端进阶得打好基础，靠近业务 || 7b411d949d824d47a81aa72a0f654e57
如何破局，快速进阶?拉勾教育互联同人实战大学应届生:基础不差、能干好学，即使缺乏项目实践经验，影响也不会很大工作1~3年的前端开发：不仅要熟练使用各种前端框架、工具库，还要知其原理，能够举一反三
“框架和工具的实现原理、在怎样的场景下该如何选择等问题”缺乏自身的理解与想法
1.掌握前端核心专业知识，深入了解常见解决方案
某个团队突然接到不少用户反馈小程序很卡很慢刚进团队的一个小伙二话不说，直接拿出常见的前端性能优化套装
掌握前端核心专业知识，快速分析定位问题
2.跳出技术执行，靠近业务搞项目
足够的项目经验
独立完成技术选型
进阶
中高级前端开发
项目设计和管理等能力
推动方案落地和执行
由于团队分工不明确、协作不顺畅、代码风格不一致、Bug较多等问题导致项目多次返工，在全员加班的情况下，延期了一周上线
不能只局限于专业知识，也得学会如何管理和搭建项目
如何从 0 开始搭建前端项目
如何进行技术调研和选型
如何提升项目中各个阶段的开发效率
如何通过项目复盘而不断优化自身的项目管理经验
专业知识篇：核心基础专业知识篇：核心基础
01重识 HTML，掌握页面基本结构和加载过程CSS：页面布局的基本规则和方式
HTML、CSS、JavaScript 和浏览器JavaScript 如何实现继承？
重新梳理关键点
JavaScript 引擎如何执行 JavaScript 代码？
单线程的JavaScript如何管理任务？
一个网络请求是怎么进行的？
HTTP 协议和前端开发有什么关系？
深入剖析浏览器中页面的渲染过程
HTML、CSS、JavaScript 和浏览器
重新梳理关键点
JavaScript 代码是如何被执行的
网络请求的过程
浏览器页面的加载和渲染流程是怎样的
专业知识篇：能力进阶改善编程思维：从事件驱动到数据驱动9专业知识篇：能力进阶02四掌握前端框架模板引擎的实现原理四为什么小程序特立独行？前端开发中经常用到的工具和框架及实现原理日四单页应用与前端路由库设计原理实用的开发技巧和思维四代码构建与Webpack必备技能用实战项目实学实用开发技巧提升编程体验：组件化与模块化设计14国提升开发效率：数据抽象与配置化实战：三天实现管理端系统16
项目经验篇：技术方案选型项目经验篇：技术方案选型03四 Angular/React/Vue 三大前端框架的设计特色18如何设计合适的状态管理方案？前端项目中经常遇到的技术方案19如何搭建前端监控体系为业务排忧解难?应用状态管理、路由管理、监控体系搭建等20如何进行性能分析的自动化实现如何进行前端技术调研四前端性能优化与解决方案具备独立设计方案并落地实现的能力22如何进行技术方案调研与设计？
项目经验篇：项目设计与管理04项目经验篇：项目设计与管理如何进行前端项目的设计、搭建、开发23如何从0开始设计一个前端项目？保证项目顺利上线24通过前端工程化提升团队开发效率在大型的项目中国大型前端项目的痛点和优化方案多人的协作中存在的一些问题和解决方案26如何通过前期准备和后期复盘让项目稳定上线
在不断学习的过程中，编织出自己的知识网络体系，牢牢抓住核心才能无畏狂风暴雨，站在顶端尽情展示前端技术的魅力，展现个人能力
官网x
7194 || 已发布 || 导读 1 | 前端基础知识体系之专业知识篇 || f81596bb386d4a539de79de2e7957459
课前导读的目的：
主要目的在于给你梳理知识体系，所以不会提供面试问题的具体答案和详细内容描述；你可以通过学习后续课时来找出答案，也可以针对提到的知识点和问题去进行深入学习和发散，或者是在留言区进行提问和交流，从而补齐自己缺失的知识和技能
前端三件套 HTML/CSS/JavaScript
与 JavaScript 运行环境相关的浏览器和 Node.js
前端开发通用领域、网络、安全、算法和计算机通用知识
DOM 元素相关的问题
DOM 操作、事件冒泡/委托、虚拟 DOM 设计等
DOM 操作是否会带来性能问题DOM 操作与性能问题，包括：
页面需要渲染1万个 DOM 元素，如何提升页面性能页面需要操作1万个 DOM 元素，如何提升页面性能HTML =
事件冒泡和事件委托
事件委托到父节点上或者document中，哪个更好为什么要使用虚拟 DOM为什么要使用 JavaScript 对象来描述虚拟 DOM 的设计：
DOM 结构
简单描述下虚拟 DOM 的实现原理
面试官在面试 1~3年经验的前端岗位候选人时会更多倾向于考察对页面布局原理的掌握，包括盒子模型、文档流、浮动布局等以及常见页面布局的技巧，包括传统布局、Flex布局和Grid布局
我们常说的盒模型是指什么
页面布局原理：什么是文档流
浮动元素为什么无法撑开父元素？如何解决元素居中布局的几种实现方式
页面布局 =
常见页面布局的技巧：
对 Flex 布局、Grid 布局方式的理解和使用浏览器在进行页面布局过程中会做些什么浏览器的布局过程：
重绘和重排会导致什么问题
CSS 动画和 JavaScript 动画相比，有什么优缺点
考察点：页面布局（居中、对齐等）
HTML 与 CSS 的知识基本上围绕着设计原理和运行机制来考察
重构岗位则专门负责页面样式的开发和调整
前端岗位则主要负责逻辑实现
JavaScript 的原型和继承
如何理解 JavaScript 中的“一切皆对象”
如何创建一个对象
proto 与 prototype 的区别
对单线程JavaScript的理解
单线程来源
Web Workers 和 Service Workers 的理解
为什么使用异步事件机制
异步事件机制
在实际使用中异步事件可能会导致什么问题
关于setTimeout、setinterval的时间精确性
请描述以下代码的执行输出内容（考察作用域）
作用域与闭包
什么场景需要使用闭包
闭包的缺陷
简单描述 this 在不同场景下的指向
this 与执行上下文
apply/call/bind 的使用
箭头函数与普通函数的区别
介绍浏览器的 EventLoop
对 EventLoop 的理解
宏任务（MacroTask）和微任务（MicroTask）的区别
setTimeout、Promise、async/await 在不同浏览器的执行顺序
1.手写代码实现call/apply/bind
2.JavaScript 中0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？
常见的包括箭头函数、Promise/async/await、class等基本上都是语法糖，最终在浏览器中运行的很多时候都是最终编译为ES5的代码
面试官考察语法糖设计，包括：手写代码实现Promise为什么要使用async、await怎样让 ES6/ES7代码可以跑在各个浏览器中（考察 Babel 与 polyfill）
介绍下Set和Map数据结构
Javascript 是怎么实现let和const作用域的对于开发来说，最终工作内容大部分依赖代码实现
编码风格、编码思路都会被列为考察点之一
浏览器相关拉勾面试官会从一个叫“在浏览器地址栏里输入URL，按下回车键，会发生什么？”中进行考察相关问题考察内容“同源”指什么浏览器的同源策略哪些行为受到同源策略的限制常见的跨域方案有哪些Web缓存通常包括哪些浏览器什么情况下会使用本地缓存强缓存和协商缓存的区别强制Ctrl+F5刷新会发生什么浏览器的缓存相关session、cookie、token 及storage 的区别为什么我们通常将JavaScript 放在的最后面为什么我们将 Css 放在里浏览器加载顺序HTML/CSS/JS的解析过程渲染树是怎样生成的重排和重绘是怎样的过程浏览器的渲染原理日常开发中要注意哪些渲染性能问题浏览器中包括哪些事件浏览器事件在浏览器中，是如何处理用户的交互的对事件进行监听的回调函数，会在什么被执行00:06:15
Node.js 有哪些定时功能Process.nextTick和setlmmediate的区别Node.js 中的异步和同步怎么理解，异步流程如何控制Node.js模块与 API简单介绍一下Node.js 中的核心内置类库（事件、流、文件、网络等）Node.js有哪些特点，单线程的优势和缺点是什么如何用Node.js来监听80端口express是如何从一个中间件执行到下一个中间件的用作服务端的Node.jsexpress、koa、egg之间的区别Rest APl有使用过吗，介绍一下
网络相关拉勾教育不管是网页、小程序，还是依赖JavaScript移植到客户端进行的原生应用开发（比如React Native、Weex、Electron等）,我们基本上都离不开与服务端的通信。因此，我们还需要掌握网络相关的专业知识
网络相关拉问题点：“一个完整的HTTP请求过程”域名解析（此处涉及DNS的寻址过程）TCP的3次握手过程TCP连接建立为什么TCP连接握手需要3次通信，挥手却需要4次网络三建立 TCP连接后发起HTTP请求06课时服务器响应HTTP请求
网络请求存在各式各样的情况，比如使用缓存、建立Websocket短轮询与长轮询、获取用户登录状态等，这些内容都会直接与HTTP协议相关
Request 请求Response 响应常见的HTTP状态码HTTP消息的结构HTTP请求方法使用PUT、DELETE等方法时为什么有时候在浏览器会看到两次请求（涉及CROS中的简单请求和复杂请求）浏览器是如何控制缓存的：相应的头信息、状态码HTTP 协议三Websocket与HTTP请求的区别HTTP请求的应用场景如何对请求进行抓包和改造07课时网络请求的优化方法HTTPS与HTTP的区别HTTP的更新迭代HTTP/2、HTTP/3分别做了怎样的设计调整
缓存的使用减少资源大小（分片、压缩、懒加载、预加载）网络请求的优化方案减少每个环节的耗时（DNS查询、使用CDN)使用HTTP/2等
前端安全中，需要注意的有哪些问题XSS/CSRF是怎样的攻击过程，要怎么防范前端安全除了XSS和CSRF，你还了解哪些网络安全相关的问题呢Web安全 ≡SQL注入、命令行注入是怎样进行的DDoS 攻击是什么其他 Web 安全流量劫持包括哪些内容
《Web安全攻防之道》《白帽子讲Web安全》
对于前端来说，大多数工作中都不会涉及算法相关但在一些场景下我们可以使用它们设计出更好的数据结构和计算方式
各种排序算法、稳定排序与原地排序、JavaScript中的sort使用的是什么排序查找算法（顺序、二分查找）算法相关递归、分治的理解和应用动态规划算法与数据结构链表与数组栈与队列常见的数据结构二叉树、平衡树、红黑树等
较大型的前端应用领域VSCode中对于文本缓冲区的性能优化过程中重构了数据结构，其中就有用到红黑树
《重学数据结构与算法》专栏Leetcode平台学习和研究
不管是打算发展成为大前端也好、全栈开发也好还是只希望涉及纯前端的开发内容，我们都需要理解和掌握
理解计算机资源，认识进程与线程（单线程、单进程、多线程、多进程）进程间通信（IPC)常包括哪些方式，进程间同步机制又包括哪些方式计算机资源了解阻塞与非阻塞、同步与异步任务等Socket 与网络进程通信是怎样的关系、Socket 连接过程是怎样的计算机通用知识常见的设计模式有哪些列举实际使用过的一些设计模式编程与设计模式如何理解面向对象编程
小建议：在日常工作中，可以更多地关注其他配合方（客户端、后台等）的实现和能力
前端由于门槛较低，很多的前端开发都不是计算机专业出身更多时候是这些知识的缺乏阻碍了我们在程序员这一职业的发展
结合面试角度，梳理了前端专业领域相关知识网络基础算法和数据结构计算机基础
7195 || 已发布 || 导读 2 | 前端基础知识体系之项目经验篇 || 8182d734fa1d4514bc52f56fe4c7408c
如果想要独立承担起项目当中的某一块工作内容还需要掌握前端项目开发过程中遇到的问题及相应的解决方案
传统的Web开发管理端、H5\小程序、可视化、游戏等前端开发三Node.js 开发服务端接入层、构建工具、云服务等终端开发React Native、Flutter、Electron等项目
开发过程中涉及的系统设计、方案调研、技术选型、性能优化、效能提升这些都是相通的
这是怎样的一个项目？它遇到了什么问题、存在着怎样的瓶颈？又需要怎么去解决?
开发效率提升前端常见的框架和工具库前端面试相关知识点前端监控搭建Node.js 和服务端前端性能优化前端工程化
重要的是要知道各个框架的区别、掌握框架设计和实现原理
Vue 中的双向绑定是怎么实现的？介绍下 Angular 中的依赖注入讲讲 React 的资源调度设计讲讲对React Hooks的理解，它的优缺点（useEffect的使用和上下文、settimeout)前端框架谈谈你对前端常见的框架(Angular/React/Vue)的理解，它们之间有哪些区别该项目使用Angular/React/Vue的原因是什么如果现在你重新决策，你会使用什么框架？你是否有了解过这些框架都做了哪些事情，介绍一下是怎么实现的应用状态管理有哪些方案，Vuex/Redux/Mobx等工具是怎样进行状态管理的前端框架单页应用是什么？如何进行SEO优化?其他前端工具库你实际使用过哪些第三方库?这些工具库有什么特性和优缺点？小程序和H5有什么不一样，为什么选小程序而不是H5？有考虑在小程序里嵌用H5实现吗，为什么？小程序相关为什么小程序的性能要好一些小程序开发有用到哪些框架？为什么？00:02:19
和API相关，而在使用Node.js作为服务端的项目中面试官更倾向于考察相关的方案选型和设计
为什么要用Node.js（而不是PHP/力ava/Go/C++等），Node.js适用于怎样的场景?技术选型如果作为服务端的接入层，Node.js对比其他多线程和协程语言有什么优劣势吗？――Restful和 GraphQL的关系和区别?Node.js 方案选型和设计如何解决高并发问题（春节红包、零点抢购等场景）应用场景如果作为中间件服务，Node.js有哪些要注意的地方？
如果你想要成为真正的全栈不妨从最基础的计算机原理、编译原理、数据库设计等开始学起
·前端：对于单线程的Web、浏览器机制、动态语言的缺陷和优势HTTP协议、网络请求等掌握得很熟练·深入发展方向：包括大型页面的性能优化、页面功能模块的抽象与组织、数据与渲染的拆离、前端工程化的规范化与效率提升等
后台：本身更关注计算机资源、多进程、数据库等需要熟练掌握多并发、队列、进程通信、事务、数据库索引等
性能优化永远是开发者们的重点任务和用户交互最密切的前端性能更是会影响用户去留的因素
空间性能问题为内存占用、CPU占用、本地缓存占用过多带来的问题性能问题时间性能问题用户等待时间过长，包括页面加载、渲染、可交互等耗时
页面有没有做什么柔性降级的处理有做过性能优化相关的项目吗？具体的优化过程是怎样的/优化效果是怎样的前端通用性能优化常见的前端页面性能优化包括哪些内容如何理解项目的性能瓶颈/什么时候我们需要对一个项目进行优化前端性能优化图片加载性能有哪些可以优化的地方要怎么做好代码分割、降低代码包大小可以有哪些方式具体的性能优化方案首屏页面加载很慢，要怎么优化网络请求耗时较长，怎么进行定位和优化以某个项目为出发点，从页面启动、请求资源，到解析数据、渲染页面分析各个过程中哪些阶段的耗时较大，然后针对性地进行优化
按需加载/懒加载/预加载秒看首屏性能提速SSR直出客户端容器化客户端离线化等针对性优化方案CDN优化缓存优化网络请求优化使用HTTP/2资源压缩（Gzip)请求优化（合并请求、域名拆分、减少DNS查询时间）等
前端工程化指使用工具自动化地完成一些以前需要开发手动解决的任务，一般来说涉及各式各样的构建/打包工具、脚手架、CI/CD和流水线的搭建、代码部署及灰度发布等过程的自动化
为什么我们开发的时候要使用脚手架？前端模块化如何理解模块化，CommonJS/AMD/UMD/ES6模块之间的区别是什么？为什么要使用Webpack,它和Gulp、Rollup有什么不一样?讲一下Webpack中常用的一些配置、Loader、插件?Babel 的作用是什么，如何选择合适的 Babel 版本？前端工程化WebpackWebpack是怎么将多个文件打包成一个，依赖问题如何解决有写过Webpack插件吗，Webpack 编译的过程具体是怎样的css文件打包过程中，如何避免css全局污染代码编译和构建本地开发和代码打包的流程分别是怎样的Tree Shaking 是怎样一个过程
怎么理解持续集成CI/CD，它们能解决什么问题?持续集成(Continuous Integration,简称CI)持续部署（Continuous Deployment,简称CD)你们的项目有使用CI/CD吗，为什么？前端工程化你们的代码有写单元测试/自动化测试吗，为什么？前端代码支持自动化发布吗，如何做到的自动化流程生产环境的代码如何支持灰度发布和快速回滚？在搭建自动化、流程化的过程需要投入不少人力，在业务进度同样吃力的场景下，怎么平衡人力投入问题?
怎么强制进行 Code Review?有遇到代码习惯差异的问题吗，如何解决？代码规范有哪些常用的代码校验的工具？代码有使用Eslint、Prettier 这些工具吗，谈谈对这些工具的看法？前端工程化多人开发过程中，代码冲突如何解决？开发流程项目中有使用Git吗？介绍一下Git Flow 流程？如果项目频繁交接，如何提升开发效率?
为什么我们开发的时候要使用脚手架？前端模块化如何理解模块化，CommonJS/AMD/UMD/ES6模块之间的区别是什么？为什么要使用Webpack，它和Gulp、Rollup有什么不一样?讲一下Webpack中常用的一些配置、Loader、插件？13课时Babel的作用是什么，如何选择合适的Babel版本？前端工程化WebpackWebpack是怎么将多个文件打包成一个，依赖问题如何解决有写过Webpack插件吗，Webpack 编译的过程具体是怎样的13课时css文件打包过程中，如何避免css全局污染代码编译和构建本地开发和代码打包的流程分别是怎样的Tree Shaking是怎样一个过程
如何提升团队协作的效率也是大多数团队需要面临和解决的问题工程化和自动化是如今前端的一个趋势相关基础建设也越来越受到重视，相应的解决方案也愈加成熟
前端监控相关拉解决问题点：如何及时发现问题、如何快速定位并解决问题发生异常，要怎么快速地定位到具体位置？数据上报业界常见的埋点方案包括哪些？页面数据如何进行合理的上报，而不影响核心功能?前端监控日常开发过程中，怎么保证页面质量？版本发布有进行灰度吗？灰度的过程是怎样的？实时监控版本发布过程中，如何及时地发现问题，需要关注哪些数据?如何观察线上代码的运行质量？
前端监控相关解决问题点：如何及时发现问题、如何快速定位并解决问题涉及页面的整体访问情况、页面的性能情况、用户问题反馈、监控和告警能力等
效能（效率能力）提升意识加分项：面对这些工作的态度是否积极、是否会思考如何去解决这样的问题等
开发效率提升候选人通常可能被问到的问题包括：·做了很多的管理端/H5，有考虑过怎么提升开发效率吗？·你的项目里，有没有哪些工作是可以用工具完成的？是否可以有更好的解决方法去从源头上杜绝·项目中有进行组件和公共库的封装吗？·如何管理这些公共组件/工具的兼容问题?·日常工作中，如何提升自己的工作效率？
7196 || 已发布 || 01 | 重识 HTML，掌握页面基本结构和加载过程 || 018e3b6840d7426d9f22fa827a5a47d0
HTML
1.HTML 和网页有什么关系
2.HTML与 DOM 有什么不同
3.浏览器是怎么处理 HTML 内容的4，进行怎样的处理来提升网页的性能
浏览器页面加载过程
拉勾教育
左联间人实战大学
大多数都是由于页面设计不合理导致加载时间过长导致的
浏览器页面加载过程拉勾教育互联同人实战大学HTML告知浏览器如何组织页面以及搭建页面的基本结构CSS装饰HTML，让页面更好看JavaScript丰富页面功能，使静态页面动起来
浏览器页面的加载过程是怎样的JavaScript引擎线程GUI渲染线程浏览器
处理 JavaScript 脚本程序渲染浏览器界面HTML元素“当JavaScript 引擎执行时，GUI线程会被挂起”
3.元素内容会先被解析此时浏览器还没开始渲染页面
如果外部脚本加载时间很长（比如一直无法完成下载）就会造成网页长时间失去响应，浏览器就会呈现“假死”状态用户体验会变得很糟糕
对于对性能要求较高、需要快速将内容呈现给用户的网页会将JavaScript 脚本放在的最后面可以使用defer/async/preload等属性来标记
