h5新特性DOMAST的简单理解

h5新特性

1、一些语义化标签
header、footer、nav、aside、article、section、hgroup（h1~h6的集合）
document.createElement(‘header’)
2、本地存储
提供了sessionStorage、localStorage和indexedDB加强本地存储，使用之前应该先判断支持情况
if(window.sessionStorage){
}
if(window.localStorage){
}
localStorage与sessionStorage的区别在于后者是基于会话多的，关闭浏览器后存储消失。
localStorage在各浏览器中上限不同，最低的是2.6MB，开发上限基于此（2.6MB）
indexedDB上限是250MB
localStorage是域内安全，也就是同域才可以对其进行操作，可以通过postMessage来解决
3、离线web应用
页面缓存指的是有网络状态下，离线web应用指的是没有网络状态下可以运行应用
if（window.applicationCache）{
// 支持离线应用
}
manifest文件是核心，记录着哪些资源文件需要离线应用缓存，要使用manifest，只需要在html标签属性中添加属性
<html manifest="cache.manifest">
4、表单新增功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input，而现在可以通过input的form属性绑定

         <form id = "testform"><input type = "text" /></form>

现在的用法： <input form=testform />

5、css3提供了更多的选择器
before、after、first-child、nth-child等
6、地理位置
h5提供了Geolocation API访问地理位置，访问方法：
window.navigator.geolocation来实现访问
页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听

DOM的解析与渲染

dom解析：将网页中所有的html标签生成一个dom tree,也就是生成了一个原始的页面，一点样式也没有，无css修饰
dom渲染：浏览器会把本身默认的样式和用户编写的样式进行整合，形成一个css tree
实质上，它是将 dom tree 和 css tree结合到一起，生成一个 render tree,呈现出一个带有样式的页面
浏览器的不同线程，如下：
1、 GUI渲染线程
2、 js线程
3、定时器触发线程（setTimeout）
4、浏览器事件线程（onclick）
5、 http异步线程
应该还会有很多其他的线程
浏览器内包含若干线程，在同一个瞬间，只有一个线程在起作用，它们之间是互斥的
DOM的渲染对应的是GUI渲染进程，js对应的而是js线程，因此dom的渲染与js代码的执行，在同一瞬间只能有一个执行

js----AST(抽象语法树)

它可以做什么呢？
IDE的错误提示、代码格式化、代码高亮、代码补全等
JSLint、JSHint 对代码错误或风格的检查等
webpack、rollup进行代码打包等
CoffeeScript、TypeScript、jsx等转化为原生js

js Parser其实是一个解析器，它是将js源码转化为抽象语法树的解析器
解析过程分为两步：
分词：将整个代码字符串分割成最小语法单元数组
ps:语法单元是被解析语法当中具备实际意义的最小单元，简单的来理解就是自然语言中的词语。
语法分析：在分词的基础上建立分析语法单元之间的关系
js代码中的语法单元主要包括这几类：
关键字、标识符、运算符、数字、字符串、空格、注释、其他。
babel,可以将es2015+版本代码转换为向后兼容的js语法，以便能够运行在当前和旧版本的浏览器或其他环境中，不用为新语法的兼容性考虑~
实际上，babel中的很多功能，都是靠修改 AST实现的
// 暂时没使用过babel,有机会专门写一篇
通过抽象语法树解析，我们可以像童年时拆解玩具一样，透视javascript这台机器的运转，并且重新按着你的意愿来组装
举个例子：拆解简单的add函数

function add(a,b){return a+b;      }

用力拆开，它成了三块：
一个id，就是它的名字，即add
两个params,就是它的参数，即[a,b]
一块body,也就是大括号内的一堆东西
add没办法继续拆下去了，它是一个最基础的identifier(标志)对象，用来作为函数的唯一标志，就像人的姓名一样。

{
name: ‘add’
type: ‘identifier’
…
}
params继续拆下去，其实是两个identifier组成的数组，之后也无法拆下去
[
{
name:‘a’
type: ‘identifier’
…
},
{
name: ‘b’
type: ‘identifier’
…
}
]

继续拆开body
会发现，body其实是一个 BlockStatement(块状域)对象，用来表示是 {return a+b}
打开BlockStatement,里面藏着一个ReturnStatement(Return域)对象，用来表示 return a+b;
继续打开ReturnStatement，里面是一个 BinaryExpression(二项式)对象，用来表示 a+b
接续探索，打开BinaryExpression，分成了三个部分，left, operator, right
{
operator 即+
left里面装的，是identifier对象a
right里面装的，是identifier对象b
}
// 将嵌套的事物进行一层层解析，最后是这么个情况
个人感觉，AST涉及到了代码的转化，不是想象中那么简单的
如果，我们编写的代码是以“平面”的角度去解决问题，那么，你如果想要审视这个问题，就得站在另外一个维度去看待它，也就是从问题本质解决问题。AST便是可以借助的这么一个中间工具
引用文章如下：
https://www.jianshu.com/p/b3762ca713b1 （h5新特性）
https://blog.csdn.net/weixin_34368949/article/details/88001956 （dom&css渲染使用的）
https://segmentfault.com/a/1190000016231512 （AST抽象语法树）

题外话，今日头疼异常，比较早就醒来了。不知道是不是感冒，吃了一粒感康，分两次吃的。中午特别困，躺下去就睡着了，醒来接近3点半。迷迷糊糊去实验室，感觉还在梦境。焦虑却减轻了，大概是健康使我快乐~