【IMWeb秋招訓練營】【Day10】面試題總結

經(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ā)出后開始下載代碼背零。
      1. defer屬性。支持IE4和fierfox3.5更高版本瀏覽器
      2. 動態(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-familycolor壳繁,ul震捣,lidd闹炉,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

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末应闯,一起剝皮案震驚了整個濱河市纤控,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碉纺,老刑警劉巖船万,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異骨田,居然都是意外死亡耿导,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門态贤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舱呻,“玉大人,你說我怎么就攤上這事∠渎溃” “怎么了芥驳?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長茬高。 經(jīng)常有香客問我兆旬,道長,這世上最難降的妖魔是什么怎栽? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任丽猬,我火速辦了婚禮,結果婚禮上婚瓜,老公的妹妹穿的比我還像新娘宝鼓。我一直安慰自己,他們只是感情好巴刻,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蛉签,像睡著了一般胡陪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碍舍,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天柠座,我揣著相機與錄音,去河邊找鬼片橡。 笑死妈经,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的捧书。 我是一名探鬼主播吹泡,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼经瓷!你這毒婦竟也來了爆哑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤舆吮,失蹤者是張志新(化名)和其女友劉穎揭朝,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體色冀,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡潭袱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了锋恬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屯换。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖伶氢,靈堂內(nèi)的尸體忽然破棺而出趟径,到底是詐尸還是另有隱情瘪吏,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布蜗巧,位于F島的核電站掌眠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏幕屹。R本人自食惡果不足惜蓝丙,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望望拖。 院中可真熱鬧渺尘,春花似錦、人聲如沸说敏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽盔沫。三九已至医咨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間架诞,已是汗流浹背拟淮。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谴忧,地道東北人很泊。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像沾谓,于是被迫代替她去往敵國和親委造。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 前端開發(fā)面試知識點大綱: HTML&CSS: 對Web標準的理解搏屑、瀏覽器內(nèi)核差異争涌、兼容性、hack辣恋、CSS基本功:...
    秀才JaneBook閱讀 2,371評論 0 25
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案亮垫? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)伟骨、<...
    clark124閱讀 3,482評論 1 19
  • 來源:微信公眾號表妹的EXCEL 敲黑板...小葵花媽媽課堂開課啦~~孩子公式總不好携狭,多半是廢了继蜡,額,不對,多半是...
    表妹的EXCEL閱讀 1,568評論 0 4
  • 當我堂堂正正稀并,坦坦蕩蕩的說仅颇,我不再想他了,我有自己努力方向的時候碘举,才是一個真性情的人忘瓦。
    longlong8612009閱讀 123評論 0 1