色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網站css選擇器性能討論,css規(guī)則定義有哪些選擇符

老白2年前45瀏覽0評論

網站css選擇器性能討論,css規(guī)則定義有哪些選擇符?

css選擇符(選擇器)有以下這些:

1、通配選擇符( * ):匹配任意元素。

2、id選擇符( # myid):匹配 ID 等于“myid”的任意元素 。

3、類選擇符(.myclassname):匹配 class 等于“myclassname”的任意元素.

4、標簽選擇符(div, h1, p):選擇指定元素名稱的所有元素。

5、相鄰選擇符(E + F):用于選擇(不是內部)指定的第一個元素之后緊跟的元素。

6、子選擇符(E > F):用于選取帶有特定父元素的元素,例ul > li,選擇所有父級是 <ul> 元素的每個 <li> 元素。(學習視頻分享:css視頻教程)

7、后代選擇符(E F):用于選取元素內部的元素。

8、偽類和偽元素選擇符:用于向某些選擇器添加特殊的效果。

網站css選擇器性能討論,css規(guī)則定義有哪些選擇符

如何在js文件中動態(tài)加載另一個js文件?

就像正常的下載文件一樣。把服務的js文件下載下來,然后在本地瀏覽器執(zhí)行。

另外你需要補充一下瀏覽器加載、解析、渲染的一些知識。復制一下我之前整理的筆記。

瀏覽器加載

加載過程 當瀏覽器獲得一個html文件時,會”自上而下“加載,并在加載過程中進行解析渲染。 加載過程中遇到外部CSS文件,瀏覽器另外發(fā)出一個請求,來獲取css文件。 遇到圖片資源,瀏覽器也會另外發(fā)出一個請求,來獲取圖片資源。這是異步請求,并不會影響html文檔進行加載。 但是當文檔加載過程中遇到js文件,html文檔會掛起渲染(加載解析渲染同步)的線程,不僅要等待文檔中js文件加載完畢,還要等待解析執(zhí)行完畢,才可以恢復html文檔的渲染線程。加載外聯js和css的阻塞情況

一個不太嚴謹但方便記憶的口訣:JS 全阻塞,CSS 半阻塞

JS 會阻塞后續(xù) DOM 解析以及其它資源(如 CSS,JS 或圖片資源)的加載。CSS不阻塞DOM的加載和解析(它只阻塞DOM的渲染呈現。這里談加載),不會阻塞其它資源(如圖片)的加載,但是會阻塞 后續(xù)JS 文件的執(zhí)行(原因之一是,js執(zhí)行代碼可能會依賴到css樣式。css只阻塞執(zhí)行而不阻塞js的加載)。鑒于上面的特性,當css后面存在js的時候,css會間接地阻塞js后面資源的加載(css阻塞js,js阻塞其他資源 )。現代瀏覽器會進行 prefetch 優(yōu)化,瀏覽器在獲得 html 文檔之后會對頁面上引用的資源進行提前下載

外聯js文件使用defer屬性和asyn可以達到異步非阻塞加載的效果,由于現代瀏覽器都存在 prefetch,所以 defer, async 可能并沒有太多的用途,可以作為了解擴展知識,僅僅將腳本文件放到 body 底部(但還是在之前)就可以起到很不錯的優(yōu)化效果(遵循先解析再渲染再執(zhí)行script這個順序)。當把js放在最后的時候,其實瀏覽器將自動忽略標簽,從而自動在最后的最后補上。

瀏覽器解析

1、瀏覽器通過請求的 URL 進行域名解析,向服務器發(fā)起請求,接收文件(HTML、CSS、JS、Images等等)。2、HTML 文件加載后,開始構建 DOM Tree(DOM樹)3、CSS 樣式文件加載后,開始解析和構建 CSS Rule Tree4、Javascript 腳本文件加載后, 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree

瀏覽器渲染

1、瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree(渲染樹)2、布局階段——在屏幕上繪制渲染樹中的所有節(jié)點的幾何屬性,比如: 位置,寬高,大小等等,這個過程稱為 Flow 或 Layout 。3、繪制元素——繪制所有節(jié)點的可視屬性。4、合并渲染層——把以上繪制的所有圖層(類似于PhotoShop中的“圖層”)合并,最終輸出一張圖片

其中的階段3、4可稱之為Paint

Repaint和Reflow

當用戶在瀏覽網頁時進行交互或通過 js 腳本改變頁面結構時,以上的部分操作有可能重復運行,此過程稱為 Repaint 或 Reflow。

Repaint

當元素改變的時候,將不會影響元素在頁面當中的位置(比如 background-color, border-color, visibility),瀏覽器僅僅會應用新的樣式重繪此元素,此過程稱為 Repaint。

Reflow

當元素改變的時候,將會影響文檔內容或結構,或元素位置,此過程稱為 Reflow。( HTML 使用的是 flow based layout ,也就是流式布局,所以,如果某元件的幾何尺寸發(fā)生了變化,需要重新布局,也就叫 Reflow。)

Reflow 的成本比 Repaint 的成本高得多的多。我們應當盡量避免Reflow。

如何優(yōu)化瀏覽器渲染過程

1、創(chuàng)建有效的 HTML 和 CSS ,不要忘記指定文檔編碼,比如。2、CSS 樣式應該包含在 中, Javascript 腳本出現在末尾。3、減少 CSS 嵌套層級和選擇適當的選擇器,可參考 如何提升 CSS 選擇器性能。4、不要通過 JS 逐條修改 DOM 的樣式,提前定義好 CSS 的 Class 進行操作。5、盡量減少將 DOM 節(jié)點屬性值放在循環(huán)當中,會導致大量讀寫此屬性值。6、盡可能的為產生動畫的 HTML 元素使用 fixed 或 absolute 的 position ,那么修改他們的 CSS 是不會 Reflow 的。

css3有哪些特性?

新特性

新增各種CSS選擇器 (: not(.input):所有 class 不是“input”的節(jié)點)

圓角 (border-radius:8px)

多列布局 (column)

陰影和反射 (Shadow\Reflect)

文字特效 (text-shadow)

線性漸變 (gradient)

旋轉,縮放,定位,傾斜 (transform

多背景,背景裁剪

css選擇器的分類不包括什么?

css的選擇器的分類不包括“超文本標記選擇器”。

css的選擇器包括類選擇器、標簽選擇器、ID選擇器、偽類選擇器等等。

類選擇器,比如class類型 class = "nav"的話,那么css對應.nav{};

標簽選擇器,比如body input 就是直接對應 body{} input{};

ID選擇器,比如 id="name",那么css對應 #name{};

偽類、偽對象:如a:link,a:hover,a:visited等。