HTML层级优化

1.标签语义化（不要只使用div）

优点

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？
有利于构建清晰的结构，有利于团队的开发、维护。

目前的单页面应用，对于搜索引擎很那抓取

2.减少html的层级嵌套

从.html文件到我们能够看得见的页面，这个过程有一个特别重要的步骤，就是根据html生成DMO树

这个过程基本上就是重复如下三个步骤

遇到 < 字符时，状态更改为“标记打开状态”
当接收一个a-z字符时，会创建“起始标记”，状态更改为“标记名称状态”，并保持状态到接收 > 字符时。此期间的字符串会形成一个新的标记名称，接收到 > 字符后，将当前的新标记发送给树构造器，状态改回“数据状态”
当接收下一个输入字符 / 时，会创建关闭标记、打开状态，并更改为“标记名称状态”。当接收 > 字符时，会将当前的新标记发送给树构造器，并改回“数据状态”

浏览器在创建解析器的同时，也会创建document对象，在树构建阶段，以document为根节点的Dom树会不断进行修改，添加各种元素，标记生成器发送的每个节点都会由树构造器进行处理
浏览器在解析HTML文件并构建DOM树的过程中，会将我们写的标签向Dom树种挂载，层级越深，DOM树就越深，DOM树在实际的访问中是需要遍历的，没增加一层，遍历的时间复杂度都是呈指数增长。

3.减少空标签、无用标签的滥用

空标签和无用的标签主要是会干扰后续开发维护人员，对性能也会有一些影响
对于空标签或者无用的标签,我们一般推荐使用伪类去代替，如:before，:after

列子：通过伪类去完成平行四边形

<style>
        .dome{
            width: 100px;
            font-size: 20px;
            color: #fff;
            background-color: rgb(61, 140, 232);
            margin-left: 60px;
            text-align: center;
            line-height: 50px;
            position: relative;
        }
        .dome::after{
            content: '';
            position: absolute;
            border-top: 50px solid rgb(61, 140, 232);
            border-right: 25px solid transparent;
            top: 0;
            right: -25px;
            clear: both;
        }
        .dome::before{
            content: '';
            position: absolute;
            border-bottom: 50px solid rgb(61, 140, 232);
            border-left: 25px solid transparent;
            top: 0;
            left: -25px;
            clear: both;
        }
    </style>

4.标签的属性对层级的影响

4.1标签的Style属性的影响

标签的Style属性允许直接在标签上谢css,其实也是我们常见的内置样式

通过style属性在html中插入样式，非常不利于维护，因为一个网站一般都是由统一的风格界面组成，这样会有很多的样式被复用，假如采用Style来写样式，那么久不得不重复地写入更多的样式，开发效率极其低下，所有写css内置样式要慎重

4.2标签的自定义属性

标签的自动以属性应用非常广泛，Vue的v-model,jquery 时期的data-id，这些自定义属性用来放存一些临时的东西，如一些事件，一些操作逻辑。

合理的自定义属性可以是页面传值、参数传值变得更加便捷、快速。较多的自定义属性或元素随意增加自定义属性也会对页面性能产生一定的影响。比较推荐的一个做法是，将一个DOM块，比如一个组件单元的顶层，设置为自定义属性，因为一般情形下一个后台的请求会对应界面一块区域的显示，这样一块区域就可以作为一个单元，整个页面自定义的属性总数就不会很多了。

事件的委托？早期

5.容易忽略的一些细节

5.1 Link标签的妙用

1. 标签最常见的用途是链接样式表
2. 标签定义文档与外部资源的关系
    2.1 prefetch 利用网站空闲的时间去加载资源
    2.2 dns-prefetch 预加载dns解析
    2.3 preload 预加载，这种异步预加载的资源暂时不会被浏览器用到，也不会被执行，当你需要执行时，再通过script引入
    2.4 其他属性

5.2 img标签的秒用

1. alt 属性
2. 图片懒加载
3. 设置图片宽高， 防止更改图片时，发生reflow

5.3 标签的src属性及href属性

1. a变迁的href 属性，void(0) javascript:;
2. iframe 的src属性 ，无缓存，不方便seo;动态创建，无浏览记录

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端，欢迎来撩，有意向可发送简历到chen_zhen@dahuatech.com 各种福利多、加班少。摸鱼干活。

HTML结构层级优化