一年一度的毕业季(跳槽季)又到了，想跳槽的你是否想知道自己掌握了多少东西，这里有一份进阶对照清单，看你能答对多少个问题！
本文针对知识点做了一层梳理，具体的理解和答案可能每个人都不太一样，希望观众老爷看完本篇，查漏补缺，能有所收获！在此预祝跳槽的每一位都有一份理想的工作！?
部分内容来自拉勾被删老师的《前端进阶笔记》
HTML
DOM操作与性能问题
- DOM操作是否会带来性能问题
- 页面需要渲染1万个DOM元素，如何提升页面性能
- 页面需要操作1万个DOM元素，如何提升页面性能
事件冒泡和委托
- 事件委托到父节点上或者document中，哪个更好
虚拟DOM的设计
- 为什么要使用虚拟DOM
- 为什么要用JavaScript对象来描述DOM结构
- 简单描述下虚拟DOM的实现原理
CSS
页面布局原理
- 盒模型是什么
- 什么是文档流
- 浮动元素为什么无法撑开父元素？如何解决
常见页面布局技巧
- 元素居中布局的几种方式
- 对Flex布局。Grid布局的理解和使用
浏览器的布局过程
- 浏览器在进行页面布局过程中会做些什么
- 重绘和重排会导致什么问题
- CSS动画和JavaScript动画相比，有什么优缺点
JavaScript
JavaScript的原型和继承
- 如何理解JavaScript中的“一切都是对象”
- 如何创建一个对象
- proto和prototype的区别
对单线程JavaScript的理解
- 单线程来源
- WebWorkers和Service Workers的理解
异步事件机制
- 为什么使用异步事件机制
- 实际使用中异步事件可能会导致什么问题
- 关于setTimeout、setInterval的时间准确性
作用域和闭包
- 什么场景需要使用闭包
- 闭包的缺陷
this与执行上下文
- 简单描述this在不同场景下的指向
- apply/call/bind的使用
- 箭头函数和普通函数的区别
EventLoop的理解
- 介绍浏览器的EventLoop
- 宏任务和微任务的区别
- setTimeout、Promise、async/await 在不同浏览器的执行顺序
ES6/7
- 手写Promise
- 为什么要使用async、await
- 怎样让ES6/ES7的代码可以跑在各个浏览器上（Babel和polyfill）
- Set和Map的结构
- JavaScript是怎么实现let和const作用域的
浏览器
在浏览器地址栏输入URL，按下回车，会发生什么？
- 浏览器的同源策略
- 同源指什么
- 哪些行为受到同源策略的限制
- 常见的跨域方案有哪些
浏览器的缓存相关
- Web缓存通常包括哪些
- 浏览器什么情况下会使用本地缓存
- 强缓存和协商缓存的区别
- 强制Ctrl+F5刷新会发生什么
- session、cookie、token及storage的区别
浏览器加载顺序
- 为什么通常将JavaScript放在
<body>的最后面 - 为什么将CSS放在
<head>里
浏览器的渲染原理
- HTML/CSS/JS的解析过程
- 渲染树是怎样生成的
- 重排和重绘是怎样的过程
- 日常开发中要注意哪些渲染性能问题
浏览器事件
- 浏览器包括哪些事件
- 在浏览器中，是如何处理用户的交互的
- 对事件进行监听的回调函数，会在什么时候被执行
Node
Node.js模块与API
- Node.js 有哪些定时功能
- Process.nextTick和setImmediate的区别
- Node.js中的异步和同步怎么理解，异步流程如何控制
- 简单介绍下Node.js中的核心内置类库（事件、流、文件、网络）
用作服务端的Node.js
- Node.js有哪些特点，单线程的优势和缺点是什么
- 如何使用Node.js来监听80端口
- express是如何从一个中间件执行到下一个中间件的
- express、koa、egg之间的区别
- Rest Api的介绍
HTTP
一个完整的HTTP请求是什么样的？
- 域名解析（涉及DNS的寻址过程）
TCP连接建立
- TCP的3次握手过程
- 为什么TCP握手需要3次通信，挥手需要4次
- 建立TCP连接后发起HTTP请求
- 服务器相应HTTP请求
协议
http消息结构
- Request请求
- Response相应
- 常见的http状态码
- http请求方法
- 使用put、delete等方法时为什么有时候会在浏览器会看到两次请求（涉及CORS中的简单请求和复杂请求）
http请求的应用场景
- 浏览器是如何控制缓存的：相应的头信息、状态码
- WebSocket与http的区别
- 如何对请求进行抓包和改造
- 网络请求的优化方法
- Socket和WebSocket的区别是什么
http的更新迭代
- https和http的区别
- http2、http3分别做了怎样的设计调整
网络请求的优化方案
- 缓存的使用
- 减少资源大小（分片。压缩、懒加载、预加载）
- 减少每个环节的耗时（DNS查询、使用CDN）
- 使用http2等
Web安全
前端安全
- 前端安全需要注意哪些问题
- XSS/CSRF是怎样的攻击过程，要怎么防范
- 除了CSS和CSRF，还了解哪些网络安全相关的问题
其他Web安全
- SQL注入、命令行注入是怎样进行的
- DDoS攻击是什么
- 流量劫持包括哪些内容
算法和数据结构
算法相关
- 各种排序算法。稳定排序、原地排序、JavaScript中的sort使用哪种排序
- 查找算法（顺序、二分查找）
- 递归、分治的理解和应用
- 动态规划
常见的数据结构
- 链表和数组
- 栈与队列
- 二叉树、平衡树、红黑树等
计算机通用知识
计算机资源
- 理解计算机资源、认识进程和线程
- 进程间通信（IPC）常包括哪些方式，进程间同步机制有包括哪些方式
- 了解阻塞和非阻塞、同步和异步任务等
- Socket与网络进程通信是怎样的关系、Socket连接过程是怎样的
编程与设计模式
- 常见的设计模式
- 列举实际使用过的一些设计模式
- 如何理解面向对象编程
前端框架
前端框架
- Vue中的双向绑定是怎样实现的？
- 介绍下Angular中的依赖注入
- 讲讲React的资源调度设计
- 讲讲对React Hooks的理解，它的优缺点（useEffect的使用和上下文，setTimeout）
- 谈谈对前端常见的框架的理解和区别
- 该项目使用Angular/Vue/React的原因是什么
- 如何重新决策会使用什么框架？
- 是否了解过这些框架都做了什么事情，介绍下是怎么实现的
其他前端工具库
- 应用状态管理有哪些方案，Vuex/Redux/Mobx等工具是怎样进行状态管理的
- 单页应用是什么？如何进行SEO优化？
- 实际使用过哪些三方库？
- 这些工具库有什么特性和优缺点？
小程序相关
- 小程序和H5有什么不一样？为什么选小程序而不是H5?
- 有考虑在小程序中内嵌H5实现么？为什么？
- 为什么小程序的性能要好一点？
- 小程序开发有用到哪些框架？为什么？
Node.js方案选型和设计
技术选型
- 为什么要用Node.js，适用于什么场景？
- 作为服务端的接入层，Node.js对比其他多线程和协程语言有什么优劣势？
- Restful和GraphQL的关系和区别？
应用场景
- 如何解决高并发问题（春节红包、零点抢购等）
- 如果作为中间件服务，Node.js有哪些要注意的地方？
性能优化
通用性能优化
- 页面有没有做什么柔性降级的处理
- 有做过性能优化相关的项目么？过程和效果？
- 常见的前端页面性能优化包括哪些？
- 如何理解项目的性能瓶颈/什么时候需要对一个项目进行优化
具体的性能优化方案
- 图片加载性能有哪些可以优化的地方
- 要怎么做好代码分割、降低代码包大小可以有哪些方式
- 首屏页面加载慢，怎么优化
- 网络请求耗时较长，怎么进行定位和优化
以某个项目为出发点，从页面启动、请求资源，到数据解析、渲染页面，分析各个过程中那些阶段的耗时较大，然后针对性地进行优化
针对性优化方案
首屏性能提速
- 按需加载、懒加载、预加载
- 秒看
- SSR直出
- 客户端容器化
- 客户端离线化
网络请求优化
- CDN优化
- 缓存优化
- 使用http2
- 资源压缩（Gzip）
- 请求优化(合并请求、域名拆分、减少CDN查询时间)等
从缓存、资源优化、渲染优化、内存优化、计算/运行提速等角度优化
前端工程化
前端模块化
- 为什么开发要使用脚手架？
- 如何理解模块化?CommonJS/AMD/UMD/ES6模块之间的区别是什么？
- 为什么使用Webpack，它和Gulp、Rollup的区别是啥？
Webpack
- Webpack常用的配置、loader、plugin？
- Babel的作用是什么，如何选择合适的Babel版本？
- Webpack是如何将多个文件打包成一个，依赖问题如何解决？
- webpack编译过程具体是怎样的？
代码编译和构建
- CSS文件打包过程中，如何避免CSS全局污染
- 本地开发和代码打包的流程分别是怎样的
- Tree Shaking是怎样一个过程
持续集成（CI）和持续部署（CD）
- 怎么理解CI/CD，能解决什么问题？
- 项目有使用CI/CD么？为什么？
自动化流程
- 单元测试/自动化测试有没有
- 前端代码支持自动化发布么
- 生产环境如何支持灰度发布和快速回滚
代码规范
- 怎样强制进行CodeReview
- 代码习惯差异怎么办
- 代码校验工具有哪些
- Eslint、Prettier怎么配置
开发流程
- 代码冲突怎么解决
- Git,Git Flow怎么使用
- 频繁交接，如何提升开发效率
前端监控
数据上报
- 发生异常，如何快速定位
- 埋点方案有哪些
- 页面数据如何合理上报，不影响核心功能
实时监控
- 日常开发如何保证页面质量
- 版本发布有没有灰度，过程是怎样的
- 版本发布过程中，如何及时发现问题，需要关注哪些数据
- 如何观察线上代码的运行质量
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
