html样例代码

https://gitee.com/ext-opensource/html-example

html页面加载以及加载事件

1. dom渲染:
    页面dom解析完形成dom树,css解析完形成cssom树,然后dom、cssom合成render树,dom解析跟css解析互不影响.
2. js会操作dom跟css,故js会影响解析和渲染过程,有如下三种情况:
    1、<script>,dom树解析遇到script标签,立即停止解析,下载并运行js脚本,待js执行完毕,继续dom解析.
    2、<script defer>,这种是延迟执行脚本,dom树解析时遇到此标签,立即下载该js脚本,并保持dom解析同步进行.dom解析完毕后,按照js脚本顺序,依次执行js脚本.然后触发DOMContentLoaded事件.
    3、<script async>,异步执行脚本,dom渲染跟js互不干扰,DOMContentLoaded事件跟js脚本无关.多个js脚本执行顺序不定.
3. 页面事件的生命周期:
    ### window.DOMContentLoaded事件:
        在DOM树构建完毕后被触发,页面已经完全加载HTML,js可以访问所有DOM节点,初始化界面.
        图片及其他资源文件可能还在下载中.

    ### window.load事件:
        在页面所有资源被加载完毕后触发,通常我们不会用到这个事件,因为我们不需要等那么久.

    ### window.beforeunload事件:
        在用户即将离开页面时触发,它返回一个字符串,浏览器会向用户展示并询问这个字符串以确定是否离开.

    ### window.unload事件:
        在用户已经离开时触发,在这个阶段仅可以做一些没有延迟的操作,由于种种限制,很少被使用.

    ### document.readyState事件:
        表征页面的加载状态,可以在readystatechange中追踪页面的变化状态:
        loading -- 页面正在加载中.
        interactive -- 页面解析完毕,时间上和 DOMContentLoaded同时发生,不过顺序在它之前.
        complete -- 页面上的资源都已加载完毕,时间上和window.onload同时发生,不过顺序在他之前.

js解析器的执行原理

执行js代码一般分两步：1.预解析代码。   2.逐行执行代码。

第一步：预解析代码
    预解析代码呢，主要会把var , function , 参数等一些东西 存储进仓库里面(内存)。
    1.var 一般用于声明变量，预解析代码的时候，等号后面的赋值过程不会执行，所以预解析时的var 变量 都是未定义的。
    2,.function 函数呢，预解析的时候，值就是函数里面的内容。
    当变量和函数重名时：就只留下函数的值，不管顺序谁前谁后。所以函数的优先级比变量高。注意：这只是预解析。
    当函数和函数重名时：会留下后面那个，会遵循上下文机制。

第二步：逐行执行代码
    当预解析完成之后，就开始逐行执行代码了，全部代码都会完整的执行。

js加载模式

amd、cmd、common、umd、esm

其它

createDocumentFragment