html小知识点

时间 2019-11-08

标签 html 知识栏目 HTML 繁體版

原文原文链接

1、`<script>、<script defer> 以及 <script async>`的区别，以及适用场景

浏览器在执行HTML的时候若是遇到<script>时会中止页面的渲染,去下载和执行js的文件直接碰见</scirpt>会继续渲染页面。故浏览器在执行js文件的时候浏览器表现为一片空白,为了解决这个问题ECMAScript定义了defer和async两个属性用于控制JS的下载和执行css

defer

这个属性的用途是表面脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。所以，在<script> 元素中设置 defer 属性，至关于告诉浏览器当即下载，但延迟执行。chrome

HTML5规范要求脚本按照他们出现的前后顺序执行，所以第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不必定会按照顺序执行，也不必定会在DOMContentLoaded时间触发前执行，所以最好只包含一个延迟脚本。segmentfault

对于defer，咱们能够认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照本来的js的顺序执行.浏览器

async

这个属性与defer相似，都用于改变处理脚本的行为。一样与defer相似，async只适用于外部脚本文件，并告诉浏览器当即下载文件。但与defer不一样的是，标记为async的脚本并不保证按照他们的前后顺序执行。bash

第二个脚本文件可能会在第一个脚本文件以前执行。所以确保二者之间互不依赖很是重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其余内容。网络

和defer同样，会等待的资源不会阻塞其他资源的加载，也不会影响页面的加载。可是有一点须要注意下，在有async的状况下，js一旦下载好了就会执行,也就是若是有多个js，谁先加载完就先执行谁，因此颇有可能不是按照本来的顺序来执行的。若是js先后有依赖性，用async，就颇有可能出错。异步

总结：async

这两个属性都会使script标签异步加载，然而执行的时机是不同的。性能

也就是说async是乱序的，而defer是顺序执行的，这也就决定了async比较适用于百度分析或者谷歌分析这类不依赖其余脚本的库。从图中能够看到一个普通的<script>标签的加载和解析都是同步的，会阻塞DOM的渲染，这也就是咱们常常会把<script>写在 <body>底部的缘由之一，为了防止加载资源而致使的长时间白屏，另外一个缘由是js可能会进行DOM操做，因此要在DOM所有渲染完后再执行。字体

async比较适用于百度分析或者谷歌分析这类不依赖其余脚本的库,以下：

<!-- Global site tag (gtag.js) - AdWords: xxxxxx -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxxx"></script>
    <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-xxxxxx');</script>
    <!-- Global site tag (gtag.js) - AdWords: xxxxxx -->

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-{( $pageGlobal.GTMID )}');</script>
    <!-- End Google Tag Manager -->
复制代码

《WebKit技术内幕》：
1. 当用于输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。
2. 加载器依赖网络模板创建链接，发送请求并接受答复。
3. WebKit接收到各类网页或者资源的数据，其中某些资源多是同步或异步获取的。
4. 网页被交给HTML解释器转变成一系列的词语（Token）。
5. 解释器根据词语构建节点（Node）,造成DOM树。
6. 若是节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
7. JavaScript代码可能会修改DOM树的结构。
8. 若是节点须要依赖其余资源，如图片、css、视频等。调用资源加载器来加载他们，可是他们是异步的，不会阻碍当前DOM树的继续建立；若是是JavaScript资源URL（没有标记异步方式），则须要中止当前DOM树的建立，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的建立。
复制代码

因此，通俗来说，chrome浏览器首先会请求HTML文档，而后对其中的各类资源调用相应的资源加载器进行异步网络请求，同时进行DOM渲染，直到遇到<script>标签的时候，主进程才会中止渲染等待此资源加载完毕而后调用V8引擎对js解析，继而继续进行DOM解析。个人理解若是加了async属性就至关于单独开了一个进程去独立加载和执行，而defer是和将<script>放到<body>底部同样的效果。

最稳妥的办法仍是把<script>写在<body>底部，没有兼容性问题，没有白屏问题，没有执行顺序问题。参考

能够看一下目前的smarty项目，项目中的script标签应该是插入在了全部scprit标签的最下边。

2、 `title`与 `h1`的区别、 `b`与 `strong`的区别、 `i`与 `em`的区别

title与 h1的区别

title 是网站 header 部分的内容，是网站的标题，而 h 表示 body内的标题

b与 strong的区别

从视觉效果上看是没有区别的 <b>是一个格式，bold，格式自己为粗体文本，是一个字体加粗标签，没有语义强调的意思。 <strong>是强调语气，强调部分重要的语句以及字体，默认效果是经过字体加粗来表示语义强调。 3. i与 em的区别

em单纯斜体，i没有实际意义搜索引擎更好抓取。都是在网页中以斜体显示的，但em的目的是出自强调。

<em>是单词emphasis(强调)的缩写，<i>是italic(斜体字)的缩写，推荐使用<em>标签。

从视觉效果上看，b与strong、i与em是没有区别的，惟一的区别是搜索引擎检索的时候搜索引擎能够识别strong、em标签、而不能识别b与i标签

3、data- 属性的用法（如何设置，如何获取），有何优点

设置方法

a.直接在标签内书写，格式以下

<div id="test" data-age="24">
    Click Here
</div>
复制代码

b.用js设置

方法一
var test = document.getElementById('test');
test.dataset.my = 'fruit'

方法二
test.setAttribute('data-name','bro')

推荐使用dataset
貌似setAttribute性能更好，但在处理少许data数据时，基本没有区别。切dataset更具备可读性。所以dataset操做是上选。
复制代码

效果

<div id="test" data-age="24" data-my="fruit" data-name="bro">
    Click Here
</div>
复制代码

2.获取方法

var test = document.getElementById('test')
test.dataset.my = 'Byron'
test.setAttribute('data-name','fruit')
test.onclick = function () {
    alert(this.dataset.my + ' '+ this.getAttribute('data-name') + ' ' + this.dateset.age )
}
复制代码

html小知识点

1、<script>、<script defer> 以及 <script async>的区别，以及适用场景

2、 title与 h1的区别、 b与 strong的区别、 i与 em的区别

3、data- 属性的用法（如何设置，如何获取），有何优点

1、`<script>、<script defer> 以及 <script async>`的区别，以及适用场景

2、 `title`与 `h1`的区别、 `b`与 `strong`的区别、 `i`与 `em`的区别