下列無效的css選擇器的是,dw里無法添加選擇器怎么辦?
新建一個html文檔,在body中插入一個div,將id命名為main
在右側的css設計器中點擊源的加號,選擇在頁面中定義
點擊選擇器的加號,輸入#main選中
點擊屬性,在其中對css樣式進行編輯就行
瀏覽器響應用戶的機制是什么?
1. 瀏覽器是多進程的
GPU進程
最多一個,用于3D繪制等
Browser進程
負責瀏覽器界面顯示,與用戶交互。如前進,后退等
負責各個頁面的管理,創建和銷毀其他進程
將Renderer進程得到的內存中的Bitmap,繪制到用戶界面上
網絡資源的管理,下載等
第三方插件進程
每種類型的插件對應一個進程,僅當使用該插件時才創建
瀏覽器渲染進程(瀏覽器內核)
默認每個tab頁一個進程
頁面渲染,腳本執行,事件處理等
2. 瀏覽器渲染進程是多線程的
GUI渲染線程
負責渲染瀏覽器界面,解析HTML,CSS,構建DOM樹和RenderObject樹,布局和繪制等。
當界面需要重繪(Repaint)或由于某種操作引發回流(reflow)時,該線程就會執行
注意,GUI渲染線程與JS引擎線程是互斥的,當JS引擎執行時GUI線程會被掛起(相當于被凍結了),GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。
js引擎線程
也稱為JS內核,負責處理Javascript腳本程序。(例如V8引擎)
JS引擎線程負責解析Javascript腳本,運行代碼。
JS引擎一直等待任務隊列中任務的到來,然后加以處理,一個Tab頁(renderer進程)中只有一個JS線程在運行
同樣注意,GUI渲染線程與JS引擎線程是互斥的。所以如果JS執行的時間過長,要放在body下面,否則就會導致頁面渲染加載阻塞。
事件觸發線程
管理著事件隊列
監聽事件,符合條件時把回調函數放入事件隊列中
定時觸發器線程
setInterval與setTimeout在此線程中計時完畢后,把回調函數放入事件隊列中
瀏覽器定時計數器并不是由JavaScript引擎計數的,(因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態就會影響記計時的準確),因此通過單獨線程來計時并觸發定時(計時完畢后,添加到事件隊列中,等待JS引擎空閑后執行)
注意,W3C在HTML標準中規定,規定要求setTimeout中低于4ms的時間間隔算為4ms。
異步http請求線程
檢測到XHR對象狀態變化時,將回調函數放入事件隊列中
event loop整體流程
3. repaint、reflow
repaint
repiant或者redraw遍歷所有的節點檢測各節點的可見性、顏色、輪廓等可見的樣式屬性,然后根據檢測的結果更新頁面的響應部分。
當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響布局的,比如background-color。則就叫稱為重繪
reflow
reflow指的是計算頁面布局。某個節點reflow時會重新計算節點的尺寸和位置,而且還有可能觸發其子節點、祖先節點和頁面上的其他節點reflow。在這之后再觸發一次repaint。
當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流,每個頁面至少需要一次回流,就是在頁面第一次加載的時候。
導致reflow的操作
調整窗口大小
改變字體
增加或者移除樣式表
內容變化,比如用戶在input框中輸入文字
激活 CSS 偽類,比如 :hover (IE 中為兄弟結點偽類的激活)
操作 class 屬性
腳本操作 DOM
計算 offsetWidth 和 offsetHeight 屬性
設置 style 屬性的值
它們會大大影響web性能,如何減少reflow、repaint
不要通過父級來改變子元素樣式,最好直接改變子元素樣式,改變子元素樣式盡可能不要影響父元素和兄弟元素的大小和尺寸
盡量通過class來設計元素樣式,切忌用style多次操作單個屬性
實現元素的動畫,對于經常要進行回流的組件,要抽離出來,它的position屬性應當設為fixed或absolute
權衡速度的平滑。比如實現一個動畫,以1個像素為單位移動這樣最平滑,但reflow就會過于頻繁,CPU很快就會被完全占用。如果以3個像素為單位移動就會好很多。
不要用tables布局的另一個原因就是tables中某個元素一旦觸發reflow就會導致table里所有的其它元素reflow。在適合用table的場合,可以設置table-layout為auto或fixed,
這樣可以讓table一行一行的渲染,這種做法也是為了限制reflow的影響范圍。
css里不要有表達式expression
減少不必要的 DOM 層級(DOM depth)。改變 DOM 樹中的一級會導致所有層級的改變,上至根部,下至被改變節點的子節點。這導致大量時間耗費在執行 reflow 上面。
避免不必要的復雜的 CSS 選擇器,尤其是后代選擇器(descendant selectors),因為為了匹配選擇器將耗費更多的 CPU。
盡量不要過多的頻繁的去增加,修改,刪除元素,因為這可能會頻繁的導致頁面reflow,可以先把該dom節點抽離到內存中進行復雜的操作然后再display到頁面上。
請求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Height,瀏覽器會發生reflow,建議將他們合并到一起操作,可以減少回流的次數。
css樣式語法?
css的樣式語法是:
1、css規則由選擇器和一條或多條聲明兩個部分構成;
2、選擇器通常是需要改變樣式的HTML元素;
3、每條聲明由一個屬性和一個值組成;
4、屬性和屬性值被冒號分隔開。css樣式語法規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。
css中為什么color添加顏色?
color意思就是顏色,所以可以前面加顏色后面加顏色代碼。CSS color顏色語法:
color:#000000;
Css樣式中color后直接加RGB顏色值(#FFFFFF 、#000000 、#F00)
RGB顏色值在實際布局時候確定,可以使用Photoshop(簡稱PS)拾取工具進行獲取獲得。
三、兩種方法設置對象顏色樣式
1、在DIV標簽內使用color顏色樣式
<div >www.jb51.net</div>
2、在CSS選擇器中使用color顏色樣式CSS代碼:
.divcss5{color:#00F}
/* 設置對象divcss5內文字為藍色 */