01 前端语言的基本能力

（1）HTML

• <xxx>代表元素，标签
• SEO

（2）CSS

• 语法简单
• 伪类和伪元素

（3）js

• 结果是“72”
• 一般用定义自变量的方式定义object

• 渲染引擎（加载页面）和js引擎
• 推断哪些可以作为一个整体，看成一个图层，这样加快渲染的效率

• 经过词法、语法解析转化为AST树，ignition转化为字节码，字节码可以在虚拟机上运行
• deoptimize，如果发现数据类型不对，就让ignition重新优化类型的代码，这也是为什么尽量不要改变js类型的原因

02 前端语言的协作配合

• css生态趋势：工具链、css规范、css框架库
• js：react/vue、跨端、工具链

（1）css在html中的使用

（2）js在html中的使用

• 默认情况下script会阻塞页面的解析，加async脚本的下载异步，加defer脚本的执行异步
• 默认script是定义在全局的

• 事件捕获是对计算机来说的，方便精准找到触发元素
• 事件冒泡是对开发者，方便来做一些事件代理的功能

微任务：promise的callback，比如promise.resolve执行的事件 宏任务：浏览器默认情况下执行的代码，比如：setTimeout、setInterval

（3）html在js中

（4）css在js中

03 你不知道的HTML(5)

HTML并非图灵完备的，没有控制流，它只是一门标记语言

head标签

• 用户一般看不到
• link引入css

根元素标签、文本、语义、表单、交互、分组、嵌入元素相关的

语义化标签便于SEO

html5存储

• indexedDB使用了objectStore（对象存储空间），可以存储任何类型的数据；存储的容量很大；异步的，读取打开都是通过异步的方式来读取的；事务性；支持索引
• webStorage只能存储字符串类型的数据

基于存储的应用有PWA和AMP

• PWA基于service worker来实现，先会判断是否有激活的service worker，如果有，就会拦截请求，返回对应的响应数据；如果没有，判断如果有走service worker的生命流程
• AMP主要针对搜索引擎来使用

• web worker多线程的一种方式
• postmessage之间进行通信

• web socket：支持全双工

• shadow dom可以避免内部的元素被外部访问到，这样可以保证有内聚功能的html元素

• SVG：基于xml的；基于向量化；可以用来交互；矢量；放大不会失真；对事件处理支持的更好；draw（素描）
• canvas：html元素；点阵的方式来绘图；放大会失真；对游戏支持很好；paint（水彩）

04 拓展分享

MVC && MVVM && MVP

• mvc：view处理外部界面相关的交互，controller处理业务逻辑，model渲染界面所需要的数据层。用户触发了登录操作，controller会判断输入框内容是否正确，不正确的话会让view给出提示，正确的话则让model进行数据更新，并返回给view
• mvp：是对mvc的改进，它把所有的操作内聚到了presenter这一层，需要同时处理事务层和数据层的相互操作，以及整个状态的统一
• mvvm：最早由微软提出，在前端以vue作为代表持续发扬光大，本质与mvp比较类似，区别是实现了双向绑定的能力，让view model层的负担大大减弱，同时view model也不需要和view层耦合，具备了可复用性