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 )
}
複製代碼