该总结分为 CSS、JS、ES5/6、通用经验、程序设计、JS库、前端测试、React、Vue、Webpack、Node 进行总结。
CSS
- BFC:www.cnblogs.com/libin-1/p/7…
- Flex:www.runoob.com/w3cnote/fle…
- Grid:segmentfault.com/a/119000001…
- 选择器
- 权重:important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
- 用法
- 伪类:LVHA(LV哈,简单明了)、focus、before、after、checked、disabled、last-child、first-child......
- 行内元素和块级元素有哪些?区别是什么?:不知道的童鞋前往前方
- 你理解的盒子模型?:围绕css3新属性 box-sizing 的两个值 content-box 和 border-box。
- 实现三列布局,左右固定宽度,中间响应式。兼容性尽量好?:常见的两列布局、三列布局实现要知道,知道2-3种实现方式为上策。而且兼容性方面也要知道,比如用了flex的话就兼容IE10+。
- 单位:vh、vw
- rem:www.cnblogs.com/phoebewang0…
- em:基于父元素
- offsetLeft 和 left 区别
- 手机屏幕展示缩放:
- window.devicePixelRatio
- viewport scale
- 参考:www.cnblogs.com/xuanbingbin…
- 1像素元素展示(手机像素与物理像素)
- 移动端适配页面
- 前端安全知识?怎么预防?怎么测试?:前端安全XSS、CSRF、SQL注入。什么场景会产生这些问题。预防和测试手段,测试手段比较少问。
JavaScript
- 闭包(内存)www.jianshu.com/p/26c81fde2… https://www.jb51.net/article/188763.htm
- 栈内存:存变量
- 堆内存:存对象
- 内存泄露
- 深、浅拷贝
- setTimeout / setInterval / requestAnimationFrame
- this:www.cnblogs.com/snandy/p/47…
- this
- global
- 作用域
- 作用域是一个函数在执行时期的执行环境。
- 作用域链 www.cnblogs.com/renlong0602…
- 原型链
- 原型
- 原型链:www.jianshu.com/p/ddaa5179c…
- prototype、proto、construct
- 数据类型
- 数据类型转换
- 数据类型判断
- typeof
- instanceof
- constructor
- Object.prototype.toString.call('')
- 事件
- 事件流:www.cnblogs.com/st-leslie/p…
- 冒泡流
- 捕获流
- 实现链式调用
- 参考:www.cnblogs.com/youhong/p/6…
- 函数需要返回 this
- 类数组对象(过时)
- 只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象
- push方法实现
- 算法
- 排序
- 斐波那契数列
- 树的转换
- 上下文
- 上下文(context)是指 this 在同一作用域内的值
- 参考:www.jianshu.com/p/a6d37c77e…
- 严格模式 "use strict"
- 循环:map、foreach、for in、for of
- 前端模板引擎 www.cnblogs.com/jingwhale/p…
ECMAScript
- Promise
- 状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
- 实现过程:www.jianshu.com/p/b4f0425b2…
- then 传递 promise(执行过程)
- 使用promise模拟一个解决多级回调嵌套问题。
- 定义:var let const
- 定义
- 定义过程的内存变化
- 箭头函数
- this 指向
- arguments 替代方案
- reducer (实现map)
- fiter
- async/await
- for in 和 for of
- set 数组去重
- 函数稀释
- Class
- 实现继承 - function和class的实现方法
- proto、construct
- generator
- require、import差别
- map 和 set 差别
- map 键值对
- set 单一
- Iterator
- foreach()
通用经验
- 性能优化
- 重排 & 重绘
- 参考:www.cnblogs.com/soyxiaobi/p…
- 前端路由:www.jianshu.com/p/d2aa8fb95…
- hash
- history API
- 跨域方案
- cros (主要)
- jsonp
- ...
- cookie 大小、子域跨域、设置domin
- storage、浏览器缓存
- 安全相关
- XSS
- CSRF
- HTTP 1/1.1/2
- 传输方式
- 握手
- HTTPS
- 端口
- 安全原理
- 中间人攻击
- HTTP状态码?常见的状态码和说明必须知道。200、204、206、301、302、304、307、400、401、403、404、500、503;304是怎么产生的还是要知道的。
- PWA segmentfault.com/a/119000001…
- service worker
- manifest.json
- navigator.serviceWorker.register()
- fetch、axios、ajax
- 特点、区别、使用
程序设计
- 从URL输入到页面加载过程
- 流程:缓存 -> DNS解析 -> TCP三次握手 -> HTTP请求 -> 数据响应 -> 页面渲染 -> TCP四次挥手
- 浏览器渲染:创建DOM树—创建StyleRules—创建Render树—布局Layout—绘制Painting
- 参考:www.cnblogs.com/daijinxue/p…
- DSL:针对特定应用领域而设计使用的计算机语言
- 外部DSL
- 内部DSL
- GPL:指的是针对跨应用领域而设计使用的计算机语言
- 静态语言 & 动态语言
- V8引擎 vs JavaScript Core
- MVC、MVVM、单向数据流、双向数据流
- MVVM:www.sohu.com/a/218183165…
- 单向数据流 www.jianshu.com/p/810464f1a…
- 双向数据流
- 模块化定义
- AMD:异步模块定义
- CMD:同步模块定义
- CommonJS规范:通过module.exports定义,基于Node
- ES6特性:模块化-export/import对模块进行导出导入的
- 参考:www.cnblogs.com/chenguangli…
- EventLoop
- 参考:www.cnblogs.com/hanzhecheng…
- js常规Eventloop
- node的Eventloop
- 事件:宏任务(macro-task) 和 微任务 (micro-task)
- 宏任务:包括整体代码script,setTimeout,setInterval
- 微任务:Promise.then(非new Promise),process.nextTick(node中)
- 事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。
- GWT:Google web Toolkit,是Google公司发布的基于Java语言开发AJAX应用的开发工具包。
- 函数式编程 www.cnblogs.com/tjyoung/p/8…
- 纯函数
- 柯里化
- 函数组合
- Point Free
- 声明式与命令式代码
- 高阶函数
- 递归与尾递归 www.ruanyifeng.com/blog/2015/0…
- AOP & OOP
- AOP:面向切面编程 juejin.im/post/684490…
- OOP:面向对象编程
- 参考:blog.csdn.net/likesyour/a…
- 观察者模式
- 观察者模式
- 发布/订阅模式
- JS编程模式:www.cnblogs.com/xianyulaodi…
- BFF架构:segmentfault.com/a/119000000…
- SSR
- 优势、劣势
- 实现
- 多端开发(实现原理)
- React Native 及 Weex 等实现逻辑 www.jianshu.com/p/2b86945e0…
- 语法树
- JSCore
- Flutter 的原理
- 微信小程序的原理 zhuanlan.zhihu.com/p/142381013
- React Native 及 Weex 等实现逻辑 www.jianshu.com/p/2b86945e0…
JS库
- lodash:blog.csdn.net/qq_35414779…
- axios:www.jianshu.com/p/7a9fbcbb1…
- 拦截器:axios.interceptors.request.use(func(), func(err))
- bable:www.jianshu.com/p/cbd48919a…
- @babel/cli
- @babel/core
- @babel/preset-env:环境包
- @babel/polyfill :垫平不同浏览器或者不同环境下的差异
- @babel/runtime:提供统一的模块化的helper插件
- @babel/plugin-transform-runtime:插件
- @babel/plugin-transform-xxx
- .babelrc
- presets
- plugin
- babel-stage-* (0覆盖1覆盖2覆盖3)
- babel7升级内容
- eslint / jshint / csslint
- IndexDB
前端测试
- jest
- mocha
- chai
React
- 生命周期
- 16版本新生命周期
- 废除生命周期原因(涉及fiber)
- state、setState的原理
- hooks
- provider、connet、基于context
- 中间件
- redux-thunk
- redux-saga
- 高阶组件和受控组件
- 虚拟DOM
- Diff算法:www.cnblogs.com/zhuzhenwei9…
- dom节点 增、删、改
- Fiber
- 参考:www.jianshu.com/p/bf824722b…
- 任务优先级
- 何时任务结束(帧)
- render / commit
- react-router
- Redux
- www.jianshu.com/p/e98420655…
- 实现原理
- 三大原则
- store的实现
- 中间件
- Mobx
- 与redux对比
- 使用方式
- Dva(如用过)
- 设计思路
- 包含技术
Vue
- 双向绑定
- Object.defineProperty
- 生命周期
- 虚拟dom
- diff算法
- keep-alive
- vue的渲染流程
- vue-router
- Vuex
- 应用方法
- 实现原理
- 数据流
- vue的源码看过没?说说基本的实现?实现双向绑定的原理?
即使没有实际地阅读过源码,也要找别人分享的博客去了解其中的原理。
推荐博文
- react和vue你都使用过,说说它们的区别?推荐这篇文章
- 说说你理解的虚拟dom?diff算法是怎么做的?
- 用JS对象模拟DOM树
- 比较两棵虚拟DOM树的差异
- 把差异应用到真正的DOM树上
- redux和vuex的区别?
摘取尤大的知乎回答:
Vuex 其实是一个针对 Vue 特化的 Flux,主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点,比如单状态树和便于测试和热重载的 API,但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性,比如强制的 immutability(在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了)、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等(相比之下 Vuex 直接用 Vue 本身的计算属性就可以)
所以 Vue + Vuex 会更简洁,也不需要考虑性能问题,代价就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不可以,但是 Redux 作为一个泛用的实现和 Vue 的契合度肯定不如 Vuex。
Webpack
- 模块化打包工具
- loader执行顺序
- 从下而上
- 从右而左
- plugin
- loader
- rollup
- 参考:www.rollupjs.com/
- 与 webpack 对比
- 打包性能优化
- 缓存
- 多进程
- 插件
Node.js
- Node 常用包
- 线程与进程
- 运维与部署
- 守护进程
- 性能优化方案
- 项目设计