title
abstract
content
comments
username
content
username
content
資訊專欄INFORMATION COLUMN
摘要：最基本的元素選擇器比如選擇器比如類選擇器比如在代碼中常常用到，還有一些偶爾用到的兄弟選擇器比如子選擇器比如通用選擇器。顯然，關(guān)鍵選擇器中類選擇器會(huì)比標(biāo)簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。
常用H5結(jié)構(gòu)標(biāo)簽
在HTML 5中，為了解決文檔結(jié)構(gòu)不夠清晰、明確，追加了很多跟結(jié)構(gòu)相關(guān)的元素。
header元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的LOGO圖片。
nav元素nav元素是一個(gè)可以用來作為頁面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。
main元素main元素表示網(wǎng)頁中的主要內(nèi)容。主要內(nèi)容區(qū)域指與網(wǎng)頁標(biāo)題或應(yīng)用程序中本頁面主要功能直接相關(guān)或進(jìn)行擴(kuò)展的內(nèi)容。
section元素section元素用來對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。
article元素article元素代表文檔、頁面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。
aside元素aside元素用來表示當(dāng)前頁面或文章的附屬信息部分，它可以包含當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分。
footer元素footer元素可以作為其上層父級(jí)內(nèi)容區(qū)塊或一個(gè)根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接以及版權(quán)信息等。
新標(biāo)簽如何向下兼容 兼容HTML 5新增結(jié)構(gòu)元素和媒體查詢由于IE8及更早的IE瀏覽器不能解析HTML 5新增的結(jié)構(gòu)元素，所以需要通過document.createElement來創(chuàng)建并設(shè)置默認(rèn)樣式display:block來進(jìn)行兼容處理。還有更簡單的辦法就是引入html5shiv，其原理類似。
IE瀏覽器需要respond.js配合才能實(shí)現(xiàn)對媒體查詢（media query）的支持。
但是，要注意以下幾點(diǎn)：
respond.js與跨域css的問題需要額外做一些跨域的配置。
respond.js不能在通過file://協(xié)議訪問的頁面上發(fā)揮正常的功能，務(wù)必通過http（https）協(xié)議訪問頁面。
respond.js不支持@import引入的css文件。
上面的方案解決了HTML 5新增結(jié)構(gòu)元素和媒體查詢的兼容問題，與此同時(shí)，盡量直接讓IE瀏覽器運(yùn)行最新的渲染模式。
如果是國內(nèi)的瀏覽器，一般都同時(shí)支持兼容模式（IE內(nèi)核）和高速模式（webkit內(nèi)核），可以通過以下方式讓國產(chǎn)瀏覽器默認(rèn)采用高速模式渲染頁面。
不要使用section、article作為div的替代品在使用HTML 5新增結(jié)構(gòu)標(biāo)簽的過程中，新的結(jié)構(gòu)標(biāo)簽?zāi)軌蜉^快的布局出頁面骨架（skeleton），HTML代碼的可讀性和清晰度大大的提高，但是它們僅限于幫助構(gòu)建文檔概要的語義部分，如果是樣式容器還是繼續(xù)使用div。
CSS選擇器效率問題title
abstract
content
comments
username
content
username
content
對我們大多數(shù)人來說，CSS選擇器并不陌生。最基本的元素選擇器（比如div）、ID選擇器（比如#id）、類選擇器（比如.class）在CSS代碼中常常用到，還有一些偶爾用到的兄弟選擇器（比如h2+p）、子選擇器（比如ul>li）、通用選擇器（*）。諸多的選擇器類型導(dǎo)致選擇同一個(gè)DOM元素的選擇器會(huì)有多種，至于選擇哪種，可以從高效的角度考慮來形成平時(shí)編寫CSS選擇器的規(guī)范。
單個(gè)選擇器單個(gè)CSS選擇器的效率從高到低的排序如下：
ID選擇器（#id）
類選擇器（.class）
元素選擇器（div）
兄弟選擇器（h2+p）
子選擇器（ul>li）
后代選擇器（ul li a）
通配符選擇器（*）
屬性選擇器（type="text"）
偽類/偽元素選擇器（a:hover）
組合選擇器然而在實(shí)際應(yīng)用場景中，更多用到是的組合選擇器。組合選擇器在被瀏覽器解析的時(shí)候是從右到左的方式，所以組合選擇器里最右邊的選擇器（關(guān)鍵選擇器）在效率方面起決定性作用，這樣就可以根據(jù)單個(gè)選擇器的效率選擇在關(guān)鍵選擇器處使用哪種類型的選擇器了。
#links a {...}
#links a.link {...}
顯然，關(guān)鍵選擇器中a.link類選擇器會(huì)比a標(biāo)簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。
html body .wrapper #nav li a {...}
但是，要避免像上面這樣過度限制選擇器，否則瀏覽器將花費(fèi)更多的時(shí)間。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96322.html
摘要：最基本的元素選擇器比如選擇器比如類選擇器比如在代碼中常常用到，還有一些偶爾用到的兄弟選擇器比如子選擇器比如通用選擇器。顯然，關(guān)鍵選擇器中類選擇器會(huì)比標(biāo)簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。 常用H5結(jié)構(gòu)標(biāo)簽 在HTML 5中，為了解決文檔結(jié)構(gòu)不夠清晰、明確，追加了很多跟結(jié)構(gòu)相關(guān)的元素。 header元素 header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置...
摘要：難以通過重構(gòu)手法完成設(shè)計(jì)的改動(dòng)先想像重構(gòu)的情況。何時(shí)不該重構(gòu)現(xiàn)有代碼根本不能正常運(yùn)作?，F(xiàn)在，我可以修改這個(gè)子類而不必承擔(dān)午一中影響另一處的風(fēng)險(xiǎn)。 重構(gòu)：對軟件內(nèi)部結(jié)構(gòu)的一種調(diào)整，目的是再不改變軟件的可觀察行為的前提下，提高其可理解性，降低其修改成本。 兩頂帽子 添加新功能 添加新功能時(shí)不應(yīng)該修改既有代碼，只管添加新功能，通過測試重構(gòu) 重構(gòu)時(shí)你就不能再添加功能，只管改進(jìn)程序結(jié)構(gòu)，此時(shí)...
摘要：寫在前面月到這天，前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。并且減輕服務(wù)器的負(fù)擔(dān)，的原則是按需取數(shù)據(jù)，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)?？刂票韱慰丶慕脿顟B(tài)。 寫在前面 5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個(gè)人經(jīng)驗(yàn)，使出各種前端方面的大招。從中學(xué)習(xí)了很多前端方面的知識(shí)，也get到了前端學(xué)習(xí)的方法論，還有一些算法知識(shí)等等。 現(xiàn)將...
閱讀 3829·2021-10-12 10:11
閱讀 3648·2021-09-13 10:27
閱讀 2555·2019-08-30 15:53
閱讀 1983·2019-08-29 18:33
閱讀 2198·2019-08-29 14:03
閱讀 1004·2019-08-29 13:27
閱讀 3327·2019-08-28 18:07
閱讀 796·2019-08-26 13:23
