# html-example

**Repository Path**: ext-opensource/html-example

## Basic Information

- **Project Name**: html-example
- **Description**: 一些相关的html的测试例子.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-18
- **Last Updated**: 2023-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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