目录

  • HTML+CSS布局
    • 内容+样式 基础
      • 重点了解布局、流
      • less、sass、stylus
  • CSS
    • px、em、rem、vw、vh
    • 设置html的font-size大小，统一标准
    • 小程序单位rpx
  • 布局
    • 相对、绝对
    • 流式、响应式布局
    • flex布局
  • CSS3
    • 透明度、文字阴影、圆角、渐变色
    • 盒阴影、边框图片、媒体查询
    • transition过渡、transform变形、animation动画
  • CSS优化
    • 选择器原理: 从右向左
    • 避免后台、链式、重复
    • 避免!important
  • BFC & IFC
    • float不是none，绝对定位，表格，overflow不是visable，flex盒子
    • 创建BFC后，元素会一个个的摆放
    • 外边距折叠
      • 最常见的：overflow:hidden、 float:left/right、 position: absolut、
  • ES6 & ES7
    • let、const、解构(结构)、
    • 箭头函数、SymboL、Set
    • Proxy、Class、generator、模块化
  • 函数
    • 默认参数、返回值、原型链
    • 箭头函数、this、作用域、闭包、bind、apply
    • 高阶函数、递归、Decorator、Compose、Currying…
  • 面向对象
    • class、实例方法、静态属性和方法
    • 构造函数、super
    • 继承
  • JS异步
    • 解决回调
      • Promise
      • Generator
      • Async + await
  • 模块化
    • 最早期AMD、CMD、commonjs
    • import export
    • ES6加载原理和node加载原理
  • 面试题
    • Promise相当于一个状态机
      • pending、rejected、fulfilled状态
      • 维护callback队列
      • 掘金
  • Vue
    • Vue-cli3.0+
    • 组件化通讯
      • 父子组件 props $emit 兄弟组件可以让父母代理中转
      • 祖先后代关系eventbus 或者自己实现dispath&boardcast
      • 没关系eventbus或者Vuex
    • 生命周期
    • 组件化设计
    • 源码
    • 全家桶、服务端渲染
    • 复用.Vue组件
      • props、event、slot
      • 手动挂载的组件$emit
      • 递归组件和动态组件
    • 双向绑定
      • Object.defineProperty
      • 依赖机制
      • 异步更新队列
    • Vuex + vue-router
      • 单页应用 依赖加载模块
      • vue单行数据流
      • 数据交给专门的store管理，全局数据中心、
    • 服务端渲染
      • 服务端解析vue组件成html渲染首屏
        • 速度
        • SEO
        • nuxt.js
  • Typescript
    +
  • Webpack
    • 基础配置
    • 性能优化，缩小搜索范围，DllPlugin，多进程、tree-shaking，代码抽取，按需加载
    • 定制loader和plugin
      • loader定义自己的转换规则
      • plugin 整个webpack工作流程定义，有一个apply方法获取compiler对象
      • loader单一职责，链式组合，模块化，无状态
    • plugin
      • 修改输出资源
      • 读取模块和依赖
      • 监听文件变化
  • 异步
  • 浏览器
  • 性能优化
    • 抛开场景谈优化，就是耍流氓
    • 常见性能优化策略,文件少加载，代码少执行，多用缓存，少计算，
    • 性能如何分析 devtools代码打包压缩，图片压缩，gzip，缓存，
      cdn，SSR，框架对应的优化策略，lazy-load,节流防抖

服务端渲染

  • 安全
    • 常见漏洞，如何防御
    • XSS、CSRF、Cookie劫持、点击劫持
    • 传输安全、接入层
    • Oauth
  • 多端（Node，小程序，App）
    • 微信小程序
    • 测试
    • 微服务
    • Node.js
    • 监控
    • 部署
    • 自动化
    • 云开发
    • RN flutter
    • 小程序生态
  • nodejs
    • Node核心概念
      • events，fs，stream，buffer
      • IO，event-loop，线程池
      • libuv，V8
    • Node应用场景
      • Express、Koa等web开方
      • 自动化，微服务
      • express/koa网站
      • 前端工具
      • webpack/ gulp
      • API/hapi
      • 跨平台/ electron
      • 区块链/ ipfs
      • 命令行工具/
      • shell.js
      • Express/koa代理
      • 硬件/ ruff
      • 微服务
      • 企业级框架eggj
      • 实时/socket.io
  • Event-loop
    • 代码到底咋执行的
      • 执行微任务 比如promise
      • 同步代码，完事之后查询是否有异步
      • 执行宏任务，setTimeout,SetImmediate,等
  • 自动化测试
  • 代码的健壮性，改代码不再胆战心惊
    • E2E测试Puppeteer，代码覆盖率istanbul
    • 单元测试，mocha，jest ，jasmine
    • 测试驱动开发TDD，先写测试，再写代码
  • 前端监控
    • 对运行状况了然于胸
      • 前端错误监控 onerror Sentry
      • 前端性能监控 性能参数 berserkJS 屏幕补货，网络监控
      • 上报 img 的src
  • 浏览器
    • 最重要的一端
      • 缓存机制
        • 性能优化重要策略
        • memory cache，disk cache
        • 网络请求，强缓存弱缓存
      • 如何渲染的
        • 收到html=》解析dom树
        • css => css 树 和dom结合 形成render tree 开始渲染
        • 少操作dom，重绘回流
      • 输入url发生了啥
  • 部署
    • 项目总要上线
      • Nginx
      • Pm2
      • Docker + 自动化
  • 特殊场景
    • 不算通用能力，但是特殊业务需求
      • 可视化 echarts (canvas)，d3(svg)，three.js(webgl)
      • 小游戏
      • PS切图
  • 软件工程师
    • 算法
      • 排序 搜索 遍历
      • 贪婪
      • 动态规划
    • 编译原理
    • 设计模式
    • 网络协议
    • 数据库
    • 数据结构
      • 数组、字符串、队列、堆、链表
      • 二叉树
      • 图
    • 软件工程
    • 数学基础
    • 编码
  • 网络协议
    • IP
    • TCP/UDP
    • HTTP / HTTPS / SSH / FTP
  • 设计模式
    • 常见设计模式，单例，装饰器，代理，观察者，发布订阅
    • 前端常用的设计模式
    • 如何使用、不要滥用
  • 数据库
    • Mysql 关系型数据库，多表join
    • Mongodb json数据库
    • Redis 内存数据库 速度快

  • 面试题

    • 跨域方案
    • 强缓存弱缓存
    • 输入url发生啥
      • DNS解析 ， 三次握手，建立链接
      • 接受相应，查库查文件，等待数据返回，拼接响应报文
      • 浏览器接受报文，解析html 渲染页面
    • 渲染原理
    • 业余干啥
    • 可访问性
    • 箭头函数优点
    • 前后端分离JWT
    • 垃圾回收

  • 基础vuejs

    • 组件通讯
      • prop
        • 父组件通过 Prop 往子组件传递数据
        • Prop 让组件更加灵活
        • 不要直接修改 Prop
      • event
        • 子组件往当前实例上派发事件
        • 子组件在父组件中使用，可以监听到该事件，并做出响应
      • golbal event bus
        • 非父子组件通讯
        • 可以基于新的 Vue 实例实现
      • Vuex
        • 非父子组件通讯（数据共享）
        • 数据状态管理
    • 插槽
      • 普通插槽
        • 组件的实现更加灵活
        • 内容分发
        • 插槽访问的数据作用域是父组件
      • 作用域插槽
        • 插槽可以访问到子组件中的数据
    • 过度动画
      • 触发条件
        • Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
          • 条件渲染 (使用 v-if)
          • 动态组件
          • 条件展示 (使用 v-show)
          • 组件根节点
      • 过渡类名
        • 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter
        • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
        • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
        • v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter 被移除)，在过渡/动画完成之后移除。
        • v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
        • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
        • v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
      • JavaScript 钩子
        • 可以在属性中声明JavaScript
        • 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用done 进行回调。否则，它们将被同步调用，过渡会立即完成。
        • 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
    • DOM操作
      • 操作CSS
        • 某些交互可以通过手动操作CSS 做精细的控制
      • 配合原生JS库使用
        • 与原生 JS 库配合使用，再做一层 Vue 化的封装
        • cube-ui 对 better-scroll 的封装
        • element-ui 对 popper.js 的封装
    • 组件封装
      • 就近管理
        • 单文件开发
        • 依赖的静态资源放在同级目录
        • 相关联组件也放在同级目录
      • 分层设计
        • 通过分层设计的思想设计复杂组件
      • 高度复用
        • 页面级别的复用（基础组件）
        • 项目级别的复用 —私有组件库（业务组件）
        • 公司级别的复用 —开源组件库（element-ui、cube-ui）
      • 灵活扩展
        • 组件设计要尽量灵活可扩展，除了提供丰富的 Props，还可以利用 slot插槽完成用户个性化定制需求）
    • Keep-alive
      • 使用场景
        • 保留组件状态或避免重新渲染
        • 可以配合路由组件使用
      • 生命周期
        • activated：组件激活时触发
        • deactivate：组件失活时触发
    • 内存泄漏
      • 产生的原因
        • 未清理的定时器
        • 未清理的全局注册的自定义事件
        • 未清理的全局注册的 DOM 事件
      • 如何避免
        • 编写组件要有相关意识
        • 检查是否有上述造成内存泄漏的可能
        • 利用 beforeDestroy 生命周期函数，做对应的内存清理工作
    • 错误回调
    • 性能优化
      • 数据定义
        • 不需要把所有的数据都定义在 data 上，可以直接挂载到实例上
      • 按需加载
        • 对于首次渲染，我们只需要加载首屏渲染所需的资源，其他资源可以异步按需加载。这样可以减少首屏加载的资源包大小，加速渲染
        • 异步组件
          • 异步组件——比如我们使用一些图标库，如 echart，我们可以考虑做成异步组件，单独打包
        • 异步路由
          • 异步路由——比如单页应用，我们的导航切换是基于路由切换，那么其他页面可以考虑做成异步路由
      • 预渲染
        • 由于基于 Vue.js 的单页应用是由 Vue.js 渲染页面，所以页面下载后到渲染会有一定白屏时间
        • 我们可以不依赖 JS，在页面下载后先渲染一张 Loading图片或者是骨架屏结构
        • 当主页面渲染时，把这张占位图片或者结构隐藏
        • 用户看到的不是白屏，有等待预期
      • 后编译
        • 编译代码冗余？
        • 依赖包本身不编译，它的编译交给应用来做。通过修改 webpack 配置 rules 中的 include
        • 后编译依赖嵌套？
          • webpack-post-compile-plugin需要后编译的依赖包在 package.json 中声明"postCompile": true
        • 性能优化
          • 一份编译代码
          • 主题定制
          • 一份 ployfill
          • rem布局
          • NPM包无需编译发布
  • 深入理解Vue.js
    • Vue.js渲染原理
    • 响应式实现原理
    • 组件化实现原理
  • 前端工程
    • 脚手架
      • Vue-cli 3.0
        • 是一个基于 Vue.js 进行快速开发的完整系统
        • 通过 @vue/cli 搭建交互式的项目脚手架
        • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
        • 一个运行时依赖 (@vue/cli-service)
        • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
        • 一套完全图形化的创建和管理 Vue.js 项目的用户界面
      • 插件化机制
        • Vue CLI 使用了一套基于插件的架构。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的
        • 插件可以帮助我们生成初始化代码， 安装指定的依赖包
      • webpack 配置
        • 调整 webpack 配置最简单的方式就是在 vue.config.js中的 configureWebpack 选项提供一个对象
        • 因为 @vue/cli-service 对 webpack 配置进行了抽象，所以理解配置中包含的东西会比较困难，可以通过下面命令查看 webpack 配置vue inspect > output.js
    • webpack
      • 现代 JavaScript 应用程序的静态模块打包器
        • module
          • 开发者将程序分解成离散功能块（discrete chunks offunctionality），并称之为模块
          • 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。
          • 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的
          • 前端模块化面对的挑战 —处理JS之外的静态资源、资源的依赖关系加载顺序、资源的请求和加载是异步的
          • ES2015 import 语句
          • CommonJS require() 语句
          • AMD define 和 require 语句
          • css/sass/less 文件中的 @import 语句
          • 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
        • entry
          • 入口起点(entry point)指示 webpack应该使用哪个模块，来作为构建其内部依赖图的开始，webpack会找出有哪些模块和 library是入口起点（直接和间接）依赖的
          • 多入口：数组结构
          • 多入口：对象结构
          • 多页面应用程序
        • output
          • 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。即使可以存在多个入口起点，也只指定一个输出配置
          • 如果配置创建了多个单独的 “chunk”，则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
          • 线上运行时需要通过设置 public path 指向 CDN 地址
        • loader
          • loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件
          • Typescript -> JavaScript
          • Image -> data URL
          • JavaScript import CSS
          • loader 支持链式传递
          • loader 可以是同步的，也可以是异步的
          • loader 运行在 Node.js 中，并且能够执行任何可能的操作
          • loader 能够使用options 对象进行配置
          • babel-loader 加载ES2015+ 代码，然后使用 Babel 转译为 ES5
          • style-loader 将模块的导出作为样式添加到 DOM 中
          • css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
          • less-loader 加载和转译 LESS 文件
          • file-loader 将文件发送到输出文件夹，并返回（相对）URL
          • url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
          • vue-loader 加载和转译 Vue 组件
        • plugins
          • 插件比 loader 更加强大，可以帮助用户直接触及到编译过程。 插件可以将处理函数注册到编译过程中的不同时间点上运行的生命周期钩子函数上。
          • 打包优化
          • 资源管理
          • 注入环境变量
          • CommonsChunkPlugin 提取 chunks 之间共享的通用模块
          • DefinePlugin 允许在编译时(compile time)配置的全局常量
          • ExtractTextWebpackPlugin 从 bundle 中提取文本（CSS）到单独的文件
          • UglifyjsWebpackPlugin 使用 UglifyJS 压缩 JS
          • HtmlWebpackPlugin 创建HTML文件来服务打包文件
    • 开发&部署
    • 开发阶段
      • 需求阶段
        • 前后端共同参与产品需求评审，并做一轮技术评审
        • 技术评审过程中，梳理所有交互通讯的接口
        • 把接口落地成文档，并约定好所有字段
      • 开发阶段
        • 前后端独立开发
        • 前端伪造 mock 数据
        • 可以使用 mock webpack 插件
      • 联调阶段
        • 预留联调的时间
        • 前后端开发完成后开始联调
        • 前端把接口请求指向后端的联调地址（可自动完成）
      • 上线阶段
        • 前端把接口请求指向后端的线上地址（可自动完成）
        • 一定要后端先上线
    • 部署流程
      • 预留联调的时间后端先上线 API 接口（若需要）
      • 前端项目最终编译生成静态资源文件（HTML、JS、CSS 等）
      • 增量发布，前端先全量上线 JS、CSS 等静态资源
      • 前端接着上线模板 HTML，先发布到一台 pre 机器，QA 回归
      • 回归通过后，逐步放量模板直至全量
  • 知识点