ailingangel / html Goto Github PK

语义化就是赋予html文档结构一定的语义，可以从阅读html代码就能理解整个文档的内容和结构

语义化有下面几个优点:

• 让代码更好理解和阅读，便于后期的维护
• 有利于SEO, 搜索引擎爬虫会根据不同的标签来赋予不同的权重
• 即使没有css的情况下，html文档也能表现的良好

html5新增的语义化标签有: nav, time, article, section, aside, video, footer

浏览器渲染页面的流程:

• 解析html生成dom
• 解析css生成style rule
• 将dom和style rules合并并引用layout rules生成render tree渲染树

html css 和js三者之间的关系

• css不会阻塞html解析，但是会阻塞首屏的渲染
• js会阻塞html解析
• 如果将js放在css后面，为了获取准确的样式，js会等待css下载完毕，因此css会因为js间接阻塞html的解析

js异步加载到页面的几种方式

• async (异步下载，下载完成如果html没有解析完成会阻塞html的解析，不保证执行的顺序)
• defer （异步下载，等到html解析完成之后再执行，和在html文档中定义的顺序一样）
• 创建一个script元素然后append到body中

DOMContentLoaded和loaded

• 一旦渲染树生成就会触发DOMContentLoaded事件
• 要等到所有的异步文件都加载完毕，包括css, js, 图片等才会触发loaded事件

<div class="div1">
  pppp
  <div style="visibility:hidden">222222</div>
</div>

let el = document.getElementsByClassName('div1')[0];
console.log(el.innerText); // pppp
console.log(el.textContent); // pppp 222222

• innerText只会返回看的见的文本
• textContent会把所有文本节点（无论看不看得见）都返回回来