經(jīng)典面試題
37.哪些地方會出現(xiàn)css阻塞卷员,哪些地方會出現(xiàn)js阻塞缀踪?
js的阻塞特性
所有瀏覽器在下載JS的時候居砖,會阻止一切其他活動,比如其他資源的下載驴娃,內(nèi)容的呈現(xiàn)等等奏候。直到JS下載、解析唇敞、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容蔗草。為了提高用戶體驗,新一代瀏覽器都支持并行下載JS疆柔,但是JS下載仍然會阻塞其它資源的下載(例如圖片咒精,css文件等)。
由于瀏覽器為了防止出現(xiàn)JS修改DOM樹旷档,重新構建DOM樹的情況模叙,所以就會阻塞其他的下載和呈現(xiàn)。
嵌入JS會阻塞所有內(nèi)容的呈現(xiàn)鞋屈,而外部JS只會阻塞其后內(nèi)容的顯示范咨,2種方式都會阻塞其后資源的下載故觅。也就是說外部樣式不會阻塞外部腳本的加載,但會阻塞外部腳本的執(zhí)行湖蜕。CSS阻塞
CSS本來是可以并行下載的逻卖,在什么情況下會出現(xiàn)阻塞加載了(在測試觀察中,IE6下CSS都是阻塞加載)昭抒。當CSS后面跟著嵌入的JS的時候,該CSS就會出現(xiàn)阻塞后面資源下載的情況炼杖。而當把嵌入JS放到CSS前面灭返,就不會出現(xiàn)阻塞的情況了。
根本原因:因為瀏覽器會維持html中css和js的順序坤邪,樣式表必須在嵌入的JS執(zhí)行前先加載熙含、解析完。而嵌入的JS會阻塞后面的資源加載艇纺,所以就會出現(xiàn)上面CSS阻塞下載的情況怎静。-
嵌入JS應該放在什么位置?
- 放在底部黔衡,雖然放在底部照樣會阻塞所有呈現(xiàn)蚓聘,但不會阻塞資源下載
- 如果嵌入JS放在head中,請把嵌入JS放在CSS頭部盟劫。
- 使用defer(只支持IE)
- 不要在嵌入的JS中調(diào)用運行時間較長的函數(shù)夜牡,如果一定要用,可以用
setTimeout
來調(diào)用
-
Javascript無阻塞加載具體方式
-
將腳本放在底部侣签。
<link>
還是放在head
中塘装,用以保證在js加載前,能加載出正常顯示的頁面影所。<script>
標簽放在</body>
前蹦肴。 -
成組腳本。由于每個
<script>
標簽下載時阻塞頁面解析過程猴娩,所以限制頁面的<script>
總數(shù)也可以改善性能阴幌。適用于內(nèi)聯(lián)腳本和外部腳本。 -
非阻塞腳本胀溺。等頁面完成加載后裂七,再加載js代碼。也就是仓坞,在window.onload事件發(fā)出后開始下載代碼背零。
- defer屬性。支持IE4和fierfox3.5更高版本瀏覽器
- 動態(tài)腳本元素无埃。文檔對象模型(DOM)允許使用js動態(tài)創(chuàng)建HTML的幾乎全部文檔內(nèi)容徙瓶。代碼如下:
-
將腳本放在底部侣签。
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
此技術的重點在于:無論在何處啟動下載毛雇,文件額下載和運行都不會阻塞其他頁面處理過程。即使在head里(除了用于下載文件的http鏈接)侦镇。
38.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級算法如何計算?內(nèi)聯(lián)和important哪個優(yōu)先級高?
-
選擇符
- id選擇器( # myid)
- 類選擇器(.myclassname)
- 標簽選擇器(div, h1, p)
- 相鄰選擇器(h1 + p)
- 子選擇器(ul > li)
- 后代選擇器(li a)
- 通配符選擇器( * )
- 屬性選擇器(a[rel = "external"])
- 偽類選擇器(a: hover, li: nth - child)
可繼承的樣式:
font-size
灵疮,font-family
,color
壳繁,ul
震捣,li
,dd
闹炉,dt
;不可繼承的樣式:
border
padding
margin
width
height
;-
優(yōu)先級
- 就近原則 :外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式
- 選擇器優(yōu)先權:內(nèi)聯(lián)樣式(權重1000)> ID選擇器(權重100) > class選擇器(權重10)> html標簽
-
!important
最大
39.在JavaScript我們會遇到閉包蒿赢,請你們根據(jù)自己的理解分析一下什么是閉包?閉包有什么好處渣触?使用閉包要注意什么羡棵?
傳送門:https://segmentfault.com/a/1190000000652891
40.如何阻止事件冒泡和默認事件(程序)
// 阻止事件冒泡
stopPropagation: function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行為
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
兩道思考題~
19.談談垃圾回收機制方式及內(nèi)存管理.
內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象嗅钻,并計算引用了每個對象的其他對象的數(shù)量皂冰。如果一個對象的引用數(shù)量為 0(沒有其他對象引用過該對象),或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的养篓,那么該對象的內(nèi)存即可回收秃流。
setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話,會引發(fā)內(nèi)存泄漏觉至。
閉包剔应、控制臺日志、循環(huán)(在兩個對象彼此引用且彼此保留時语御,就會產(chǎn)生一個循環(huán))
20.開發(fā)過程中遇到的內(nèi)存泄露情況峻贮,如何解決的?
之前自己總結的內(nèi)存泄漏筆記:http://blog.csdn.net/az_77/article/details/74930137