笔记

1：程序员的第一次瓶颈是发现自己只会使用别人提供的 API，解决办法是自己写出 API 给别人用。

程序员的第二次瓶颈是发现框架很好用或不好用，想知道原理，解决办法是自己尝试写出一个简版的框架。

程序员的第三次瓶颈是业务总是类似的，解决办法是做出一个通用的解决方案，可几分钟解决一个类似的业务需求。

(Vue 写个 Datepicker，用 React 写个表单验证，用 Node.js 写个 HTTP 请求库)
2：编程的核心：数据(变量)与数学运算（算数，逻辑）

编程的语法：控制流，面对对象/结构化编程,数组与指针，函数

数据结构（数学建模）

算法（数学方法）

3.
第一阶段：网页基础（HTML入门基本内容，CSS基础知识，选择器，盒子模型，网页布局，Photoshop）

第二阶段：web编程基础（JavaScript基础，BOM和DOM模型，事件处理，jQuery，交互及动画，jQuery优质插件，文档处理，数组和对象操作）

第三阶段：Web编程高级及全栈开发（JavaScript高级编程，jQuery插件开发，模块化组件开，AJAX，Express，Node.js，MongoDB，ElementUIl）

第四阶段：响应式网站与项目自动化开发（HTML5，CSS3，响应式原理及布局，Bootstrap，前端依赖管理，CSS预处理语言（Less+Sass），Grunt/Gulp自动化构建工具）

第五阶段：框架与项目管理（MVC、MVVM架构模式，VUE3，Webpack模块加载器&打包工具，React，Angular4）

第六阶段：混合式移动及微信开发（React Native，微信小程序）

4，CLI与webpack的区别
vue-cli 内部封装了 webpack,对外仅仅提供几个依赖。而且做了很多适合 vue 项目的优化，
同时你可以用 vue.config.js 来管理项目。package.json 非常清爽
webpack 更符合针有特定需求，毕竟是原生。不过管理起来也更加复杂。不过社区有升级，
可以第一时间获取升级优势。前一种只能等待 vue-cli 项目升级
一般来说，vue-cli 够用了，但是 vue-cli 能实现的，webpack 一定能实现，反之，不一定

5：
1.HTML - Head First HTML 与 CSS
- HTML5权威指南
教程 https://www.w3school.com.cn/h.asp
菜鸟教程
2.CSS - CSS权威指南 当工具书
- CSS揭秘
教程同样 w3school&菜鸟
3.JavaScript - 你不知道的JavaScript
- JavaScript DOM编程艺术
- JavaScript 高级程序设计（红宝书)
- JavaScript权威指南
教程 菜鸟&现代JavaScript教程（https://zh.javascript.info/)
4.ES - ECMAScript6入门教程
- 深入理解ES6
5.TS -英文文档 https://www.typescriptlang.org/docs
-中文文档 https://www.tslang.cn/docs/home.html
-深入理解TypeScript
6.数据结构与算法
-学习JavaScript数据结构与算法
7.设计模式
-JavaScript设计模式
8.网络协议
-图解TCP/IP，图解HTTP
-HTTP权威指南
9.NodeJS
-中文文档 http://nodejs.cn/api/
-Node.js实战
-深入浅出Node.js（进阶）
10.框架
-首推官方文档
11.性能
-Web性能权威指南

6：
一般在注册商的账户管理里有域名解析，大概意思就是把域名和你主机IP绑在一起

先来说一些基础的知识
1、布局

rem，vw，vh，em等

2、touch、click事件

移动端不在是鼠标事件，改为touch事件。click事件在移动端有300ms的延迟，可以用fastclick解决。手势问题可以用hammer.js解决。

3、兼容性

移动端机器比PC端复杂的多，而且国内基于Android分裂出许多分支。低版本IOS flex布局有问题，不支持webp。低版本Andriod，不支持fetch，不支持ES6特性。解决办法用babel-ployfill和系统区分，IOS不下发webp。

4、jsBridge

jsBridge有点像桥接模式，建立起前端和客户端的通信。jsBridge的原理是什么，可以查看这篇文章。

成楠Peter：hybird App原理
​
zhuanlan.zhihu.com
图标
5、字体

移动端不像PC端用微软雅黑或者使用苹果自带字体就行。又因为字体包太大，不能通过网络下载，所以字体的选择就很总要，并且在英文字体和中文字体间差异很多，经常会出一些诡异的bug。

https://zhuanlan.zhihu.com/p/50225582
​
zhuanlan.zhihu.com
图标
6、前端框架性能

不再像PC端一样，不用关心react的性能问题了。必须在shouldUpdateComponent拦截某些渲染，否则性能将收到严重的影响。所以对开发者编写的代码的要求更高。

7、webview的机制

比如为什么回退到上一个页面，页面不会自动刷新（与PC浏览器的机制不一样），为什么这样设计。

进阶
1、缓存。

利用客户端缓存，或者service worker缓存。缓存是系统性能的第一良药。

2、性能

GPU加速，动画用transform3d加速。首屏打开性能（网上有无数的文章），操作过程中的性能，包括FPS是否稳定，内存是否过高，可以通过chrome开发者工具，performance和memory查看（网上也有非常多的文章）。

3、App包体积。

随着项目越来越大，App包体积增大，该怎么解决。拆包，首屏只加载需要的内容。

4、前端包离线化。

将前端包打成zip随着App版本一起发布，每次前端变更，可以通过下发新的通知给客户端包，将差分对比后的那一部分发送给客户端，达到网络传输最小，最大化利用本地缓存。

5、监控。

可以自定义报警，或者采用开源的sentry。

6、调试。

如何用chrome:inspect调试

7、代理

如果用charles代理http和https。

8、模拟点击等事件

如果利用类似plantomJS这样的库，模拟用户点击或者输入事件，跑一些集成测试。

9、图片优化

如果你是偏展示类的App，图片是内存占用的大头。利用webp减少图片体积，缓存常用的图片。小图片用base64位代替。图片离开可视区域3屏之后，将图片的DOM移除，进入可视区域再重新加载（可以用IntersectionObserver）。

10、暗黑模式

前端实现暗黑模式简直就是坑。一般现在浏览器都实现了反色算法，但是只是针对大多数矢量图，原来iconfont的方案需要切换到svg，还有一些svg死活反色不成功，这个没有一点图形学的知识，都不知道其中经历了什么。

11、动画

自己实现的动画不符合设计师标准，用逐帧渲染图片的方式，又可能会掉帧。用lottie的方式又会增大包体积。

还好很多需要学习的知识，我会逐步补充。虽然每一个知识都不难，但是每一个知识点展开来讲都非常多，这些知识点最终组合起来就是一个工程化的问题了。