前端知识点整理（三）不定时更新~
目录
一、移动端跨平台开发方案
Hybrid App
React Native
Weex
Flutter
PWA （Progressive Web App）
小程序
Cordova
html5
组件和模块的区别
组件化
模块化
前端代码规范
前端工程化理解
网站性能监测与优化策略
1.网络传输性能优化
页面加载时，大致可以分为以下几个步骤：
1.1.浏览器缓存
1.2.资源打包压缩
1.3.图片资源优化
1.4.网络传输性能检测工具——Page Speed
1.5.使用CDN
2.页面渲染性能优化
2.1.浏览器渲染过程（Webkit）
浏览器渲染的流程如下：
2.2.DOM渲染层与GPU硬件加速
2.3.重排与重绘
常见引起重排属性和方法
浏览器的渲染队列：
强制刷新队列:
重排优化建议
1. 分离读写操作
2. 样式集中改变
3. 缓存布局信息
4. 离线改变dom
5. position属性为absolute或fixed
6. 优化动画
8.压缩DOM的深度
9.图片在渲染前指定大小
3.JS阻塞性能
js方面的性能优化小建议
4.【拓展】负载均衡
4.2.pm2实现Node.js“多进程”
4.3.nginx搭建反向代理
RESTful架构
资源（Resources）
表现层（Representation）
状态转化（State Transfer）
综述
误区
一、移动端跨平台开发方案
Hybrid App
我们可以把纯前端技术开发的 Web 网页称为 Web App，纯原生技术开发的应用称为 Native App，它们各有优缺点：纯 Native 的迭代太慢，不能动态更新，且不能跨平台，而纯 Web 则有很多功能无法实现，虽然其动画效果体验差强人意，但跟原生比还是有些差距。
Hybrid App（混合应用）是指介于这两者之间的 App，兼具“Native App 良好用户交互体验的优势”和“Web App 跨平台开发的优势”。
Hybrid 的技术本质是在 WebView 的基础上，与原生客户端建立 JS Bridge 桥接，以达到 JS 调用 Native API 和 Native 执行 JS 方法的目的。
React Native
- React Native 官网: facebook.github.io/react-nativ…
- React Native 中文网: reactnative.cn/
- GitHub 上有个开源库 awesome-react-native，收集了大量 React Native 的开发资源，值得关注: github.com/jondot/awes…
Weex
- Weex 官网: weex.incubator.apache.org/
- Weex 中文网: weex.incubator.apache.org/cn/
- GitHub 上的 Weex 资源收集项目 awesome-weex: github.com/joggerplus/…
Flutter
- Flutter 官网: flutter.io/
- Flutter 中文网: flutterchina.club/
- GitHub 上的 awesome-flutter 汇集了大量的 Flutter 资源: github.com/Solido/awes…
- 此外，知识小集团队在 GitHub 上开了一个 repo，用于收集 Flutter 国内相关开发资源，欢迎关注并和我们一起完善：github.com/awesome-tip…
PWA （Progressive Web App）
- PWA 官网: developers.google.com/web/progres…
- GitHub 上的 awesome-pwa: github.com/hemanth/awe…
- 同样地，我们也在 GitHub 上开了一个 repo，用于收集 PWA 国内相关的开发资源，欢迎关注并和我们一起完善: github.com/awesome-tip…
参考：https://juejin.im/post/5b076e3af265da0dce48fe95
小程序
小程序开发本质上还是前端 HTML + CSS + JS 那一套逻辑，它基于 WebView 和微信自己定义的一套 JS/WXML/WXSS/JSON 来开发和渲染页面。微信官方文档里提到，小程序运行在三端：iOS、Android 和用于调试的开发者工具，三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：
- 在 iOS 上，小程序的 JavaScript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS 8+；
- 在 Android 上，小程序的 JavaScript 代码是通过 X5 JSCore 来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的；
- 在 开发工具上， 小程序的 JavaScript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的。
更多细节请查阅微信小程序官网：
- mp.weixin.qq.com/cgi-bin/wx
支付宝后来也上线了自己的小程序平台：
- open.alipay.com/channel/min…
因为微信或支付宝都可以在 Android 和 iOS 上运行，所以某种意义上，我们也可以把小程序理解为是一种跨平台开发。
Cordova
- Cardova 官网: cordova.apache.org/
- Cardova 中文网: cordova.axuer.com/
html5
HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现：
- 它是一个新版本的HTML语言，具有新的元素，属性和行为，
- 它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。
根据其功能分为几个组：
- 语义：能够让你更恰当地描述你的内容是什么。
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
- 样式设计: 让作者们来创作更加复杂的主题吧！
参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
组件和模块的区别
组件化
含义：就是"基础库"或者“基础组件"，意思是把代码重复的部分提炼出一个个组件供给功能使用。
使用：Dialog，各种自定义的UI控件、能在项目或者不同项目重复应用的代码等等。
目的：复用，解耦。
依赖：组件之间低依赖，比较独立。
架构定位：纵向分层（位于架构底层，被其他层所依赖）。
总结：组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
模块化
含义：就是"业务框架"或者“业务模块"，也可以理解为“框架”，意思是把功能进行划分，将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。
使用：按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播.....）
目的：隔离/封装 （高内聚）。
依赖：模块之间有依赖的关系，可通过路由器进行模块之间的耦合问题。
架构定位：横向分块（位于架构业务框架层）。
总结：模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。
参考：https://www.jianshu.com/p/cac0beae8876
前端代码规范
参考：https://guide.aotu.io/docs/html/code.html
CommonJs与ES6的模块加载机制
目前阶段，通过 Babel 转码，CommonJS 模块的require命令和 ES6 模块的import命令，可以写在同一个模块里面，但是最好不要这样做。因为import在静态解析阶段执行，所以它是一个模块之中最早执行的。
ES6模块
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用
with语句 - 不能对只读属性赋值，否则报错
- 不能使用前缀 0 表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量
delete prop，会报错，只能删除属性delete global[prop] eval不会在它的外层作用域引入变量eval和arguments不能被重新赋值arguments不会自动反映函数参数的变化- 不能使用
arguments.callee - 不能使用
arguments.caller - 禁止
this指向全局对象 - 不能使用
fn.caller和fn.arguments获取函数调用的堆栈 - 增加了保留字（比如
protected、static和interface）
浏览器加载 ES6 模块，也使用
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。
浏览器对于带有type="module"的
如果网页有多个