面試的時候被問到乙個問題: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 答 基礎題...