前端每日一問 JS 和 CSS 阻塞問題

2021-09-11 13:32:59 字數 1774 閱讀 6379

面試的時候被問到乙個問題:js會不會阻塞瀏覽器渲染?css會不會阻塞瀏覽器渲染? 在網上也查了不少資料,現在自己總結下。

總結一句話:js是全阻塞,css會阻塞js的執行,先丟擲幾條規則,然後再貼測試**

新建乙個index.js,用node啟動乙個簡單的web server,訪問位址就是:

複製**

index.html

第一行內容

第二行內容

"stylesheet" href="/red.css">

第三行內容

第四行內容

"stylesheet" href="/green.css">

第五行內容

複製**

yellow.js

document.body.style.csstext = "background: yellow !important"

複製**

blue.js

document.body.style.csstext = "background: blue !important"

複製**

red.css

body 

複製**

green.css

body 

複製**

開啟到5秒前的瀏覽器效果開啟到5秒左右的瀏覽器效果

開啟到5秒後到15秒左右的瀏覽器效果

最後瀏覽器效果:

等green.css載入完畢後才會顯示出來,也能說明css載入會阻塞dom樹的渲染,但是不會阻塞dom樹的解析

最後這裡說明下為什麼最後 body 的背景色沒有變成綠色:因為 js 定義的樣式在內聯樣式,優先順序高於在 css 檔案中定義的樣式,所以不是 green.css 沒有載入,而是沒有生效。看下圖就知道了:(green 和 red 樣式都被劃掉了)

每日一問2019 09 26

遍歷物件的方法 有4種。1 for in 2 object.keys foreach3 object.getownpropertynames foreach4 reflect.ownkeys foreach 遍歷物件的方法解析 for in for of區別 for in 遍歷的是鍵名 適合遍歷物件...

Android每日一問系列

1 recyclerview的快取機制?和listview最大的區別?2 multidex需要做什麼優化?如果開啟了multidex 主dex依然爆掉,怎麼處理?3 intent最大傳遞資料?超出限制後如何傳遞?4 databinding的原理?5 android 程序間如何高效傳遞大資料塊?大資料...

Python 每日一問 37

問 基礎題 設計乙個複利計算函式invest 它包含三個引數 amount 資金 rate 年利率 time 投資時間 鍵盤輸入每個引數後,輸出結果 返回每一年的資金總額 比如,amount 10000 rate 8 time 5提高題 請實現乙個函式,將乙個字串中的每個空格替換成 20 答 基礎題...