xoyimi / blog

【大前端】分享记录

【大前端】分享记录，先列个大纲之后慢慢补坑

01. JS 基础

• JS面向对象（封装、继承、多态）
• 实现继承的几种方式（原型、构造函数、组合、寄生组合、类式、拷贝继承）
• 一图理解原型链（实例对象是如何与自己的构造函数、Function、Object 串联起来的）
• JS基础手写代码
• 《ECMAScript 6 入门教程》
• 你真的懂事件循环吗
• web生命周期

02. CSS 基础

• BFC块级格式化上下文
• 动画Animation，过渡transition
• 常用布局
• 移动适配 amfe-flexible 分析

03. 前端框架原理

• 源码分析：react hook 最佳实践
• redux 源码分析
• react-redux、redux-soga 源码分析
• React diff算法思路
• mobx、redux 状态管理实现思路
• React fiber 原理

04. 前端性能优化

• 前端极致性能优化手册大全
• 防抖debounce与节流throttle
• 性能优化——关键路径渲染优化
• HTTP 缓存
• 什么导致强制布局/重排
• 布局边界 Layout Boundaries（微优化）
• 如何构建 60FPS 应用
• 一帧剖析

05. JS服务端

• 跨域jsonp、cors
• koa 源码分析
• egg 实战

06. web 安全问题

• XSS

1. 存储型
2. 反射型
3. DOM型

• CSRF
• SSRF

07. 开发工具

• chrome devtool
• charles

08. 前端工程化

公共模板及文档建设

• create-react-app 的原理和实现
• node 命令行 commander、inquirer、chalk
• doc 生成工具
• 区块概念

仓库

• github/gitlab
• 私有npm
• docker hub

打包工具 webpack、rollup

• rollup 打包实践
• webpack loader/plugin 等实现细节

持续集成 -- 测试、构建、发布部署系统

1. 用户触发构建 -> Jenkins 执行任务 test/build/合master 打tag
2. 用户触发部署 -> Jenkins 执行任务 -> 推送 oss
3. 用户触发回滚 -> Jenkins 根据 tag 拉代码覆盖 oss

html 不缓存 其他静态资源 hash 文件名长缓存。

• Jenkins
• git webhook
• CDN

错误监控系统

• 错误监控原理分析

性能监控系统

• 性能监控指标
• 可视化性能分析

前端工程部署

• 玩转 docker
• docker、k8s、pm2

前端微服务

• iframe
• nginx 代理路由
• npm 包