Html標籤巢狀對展示效能的影響

2021-04-26 04:51:47 字數 1177 閱讀 1610

乙個簡單問題：如下2種html寫法，那個載入速度快？



<


div>


<


div>內容**2div


>


<


div>內容**3div


>


<


div>內容**4div


>


<


div>內容**5div


>


<


div>內容**6div


>


<


div>內容**7div


>


<


div>內容**8div


>


<


div>內容**9div


>


<


div>內容**10div


>


div>


<


div>內容**2div


>


<


div>內容**3div


>


<


div>內容**4div


>


<


div>內容**5div


>


<


div>內容**6div


>


<


div>內容**7div


>


<


div>內容**8div


>


<


div>內容**9div


>


<


div>內容**10div


>
我的答案，寫法2。當然，如果只是上面的寫法，實際上這兩種寫法對效能的差別，可以忽略不計。

但是如果，上圖的內容**區域如果嵌入了一些不可控的因素，比如：外站的一些指令碼出現在<

div>內容**7div

>中。寫法1需要所有都載入完成才可以正常顯示，寫法2的內容2-6 不受這個影響。

更具體的來說：瀏覽器解析html的規則必然是：

再回到最初的問題：

一般美工在作頁面時，會喜歡寫法1的巢狀html。如果乙個夏姆，對使用者體驗要求高，同時**到可能會在一些地方嵌入廣告指令碼會影響到頁面顯示，我會要求美工用方法2的方式來書寫原始檔，以保證使用者體驗。頁面的設計，減少巢狀的層次，對頁面的載入會好處多多的。

最後，我家兒子剛過一周歲，文章的最後祝福一下我家小寶貝。

Html標籤巢狀對展示效能的影響

乙個簡單問題 如下2種html寫法，那個載入速度快？div div 內容 2div div 內容 3div div 內容 4div div 內容 5div div 內容 6div div 內容 7div div 內容 8div div 內容 9div div 內容 10div div div 內容 ...

html標籤的巢狀規則

xhtml的標籤有許多 div ul li dl dt dd h1 h6 p a addressa span strong 我們在運用這些標籤搭建頁面結構的時候，是可以將它們無限巢狀的，但是，巢狀也需要有一定規則，不能任由自己的個人習慣胡亂巢狀，那麼，html標籤的巢狀規則有哪些呢？一 html 標...

html標籤的巢狀規則

address blockquote center dir div dl dt dd fieldset form h1 h6 hr isindex menu noframes noscript ol p pre table ul a abbr acronym b bdo big br cite co...