1. 程式人生 > >基於上次騰訊遠端面試的題目總結與回答(精心總結回顧) 下

基於上次騰訊遠端面試的題目總結與回答(精心總結回顧) 下

6. 簡單說一說盒模型,W3C和IE怪異盒模型。

W3C標準的盒模型:width == content_width(不包括padding+border+margin)

IE怪異盒模型: width == content_width+padding+border

7.簡要闡述XSS和CSRF攻擊及防範

7.1 XSS攻擊與防範
注入攻擊。
簡而言之,XSS就是想方設法的在使用者瀏覽的當前頁面植入自己的script指令碼,從而達到竊取使用者資訊,cookies等。

防範的方法:對一些常用表單的輸入字元前端要進行轉義、過濾、判斷,後端則需要對請求進行甄別,分辨是否為正常請求。

例如:

<input type="text" value="<script>alert(123)</script>" name="input"></input>

顯然,正常的使用者,不會再輸入框裡面輸入形如<script>alert(123)</script>的字串。那麼前端在js層上,可以對獲取到的表單值進行正則判斷,或者轉義,來甄別這個輸入究竟是不是合法/正常的輸入。

7.2 CSRF攻擊與防範

CSRF就是在使用者不知情的情況下,藉助使用者的資訊,來發起偽造請求。

舉例:使用者訪問A網站,登入以後並沒有關閉網頁或者清空快取資訊。此時被誘導點選B網站,B網站發起惡意請求,此時A網站服務端無法甄別該請求是否是使用者的本意,因為使用者在A網站已經登入,有cookies,所以相當於B網站藉助使用者,來在A網站為所欲為。
防範的主要措施在於後端,後端需要嚴格的來甄別該請求是否使用者自己的本意,常見的方法措施有:驗證請求頭的Refer欄位,加Token驗證等。
參考文章:

https://blog.tonyseek.com/post/introduce-to-xss-and-csrf/
這篇文章寫的很好。

8.強型別語言有繼承,在JS裡面如何做到繼承呢?(proto和prototype)

在JS中,繼承主要是通過函式原型鏈來完成的。每個函式建立的時候都有一個_proto_物件,建構函式則有一個prototype物件,該物件上掛載的是可以繼承的方法、屬性等等。

8.1 建構函式內部有一個test()方法,prototype上也掛著一個test()方法,二者有何不同?

通過例項化物件來繼承,只能繼承prototype上的方法,而內部的test()方法無權訪問。

9.頁面效能優化有哪些方式?

a.檔案(css,js,img)壓縮、合併(雪碧圖)

b.減少請求數量

c.減少頁面重排/重繪

d.使用懶載入,按需載入

e.CSS3動畫有限保持幀率

f.減少dom的訪問次數,將經常的訪問的節點/屬性,進行定義並賦值

g.減少程式碼冗餘量,精簡程式碼

h.靜態資源部署到CDN節點

9.1 重繪/重排是怎麼回事?有什麼區別?

網頁載入的時候,會根據DOM節點構造出一顆DOM節點樹,同時根據CSS樹來渲染出CSS樹,最後合併DOM樹和CSS樹 ,變成Render樹,Render樹將有所有的元素屬性進行渲染、排布,包括使用相對單位的em/vh都通通轉化成px,將隱藏的元素踢出樹中等。

例如:當使用js動態新增div標籤,那麼整個dom樹的構造就會發生變化,因此會引起瀏覽器的重排

當某個DOM節點,甚至幾個、幾十個DOM節點的樣式外觀、屬性發生變化,瀏覽器不得不把這些變化的屬性重新進行渲染,在使用者的瀏覽器view層得到體現,這就是重繪

重排是對dom節點的排布,預先為每個dom節點留好坑,一旦有dom節點增刪、位置變動、寬高增改的情況出現,就會進行重新排布。排布是發生在整個DOM樹的,一旦DOM樹改變,CSS渲染樹的子節點/孫子節點也要重新變化,因而會重新繪製。

也就是說,重排一定會引發重繪。

重繪的過程,實際上是先有確定可見的DOM樹,根據DOM樹,構造出一顆節點/結構相同的CSS樹,來對前者進行繪製。一旦DOM樹結構變化,CSS樹也要跟著變化,那麼就會引起瀏覽器的重新繪製。如果DOM樹沒有發生結構變化,而僅僅是給其中的某個div加了1px height,然後把border:1px solid black,改成1px solid red,雖然沒有進行重排,但是這過程進行了重繪。

也就是說,重繪現象的發生,有可能是以重排作為前提。

9.2 請舉例說明重繪,什麼情況下會重繪?

重排會引發重繪。樣式屬性(例如,顏色,字型大小,背景色)改變會引發重繪。

9.3 你認為樣式是會引起重繪的嗎?什麼樣式會引起重繪/重排?什麼屬性會引起重繪/重排?
是的。

color,background等屬性會引發重繪。

瀏覽器視窗變化,DOM樹結構變化(包括文字節點變化)引發重排。

10. 瀏覽器如何知道一個css檔案,js檔案需要快取?

首先瀏覽器訪問某個站點,會檢查本地是否有快取,如果有快取,檢視快取是否新鮮,如果不新鮮,就去詢問伺服器,我這個快取協議時間到了,可能不新鮮,你那邊更新了嗎?如果伺服器快取也沒有更新,那麼仍然使用本地快取。這時伺服器會返回304,意思是我這裡也沒更新,你就用以前的快取吧。

11.HTTP狀態碼304,502,503

304:快取並未更新,讓瀏覽器繼續使用快取好的靜態檔案,無需向伺服器請求該靜態資源。

502:伺服器作為閘道器或代理,從上游伺服器收到無效響應。

503:伺服器停機維護。

http狀態碼:
1XX:臨時響應。並繼續等待客戶端的請求
2XX:成功。201已建立,202已接受,203未授權資訊,204無返回內容,205重置內容
3XX:重定向。300 多種選擇,301 資源永久移動 ,302 資源臨時移動,303 自動轉到其他位置,304 未修改。
4XX:請求錯誤。401 未授權,404 未找到 ,403 禁止請求,406 不接受,408 超時。
5XX:伺服器錯誤。500內部錯誤,501 尚未實施,502 錯誤閘道器,503 請求不可用。

12.Nodejs出現問題,怎麼處理異常?已經上線的專案,如何處理異常?

任何專案只有未發現 bug 和已經發現 bug 兩種情況

不存在沒有 bug 的情況

即便是測試人員也不可能覆蓋 100% 的可能性

但是測試表中的要求必須 100%

覆蓋如果測試通過上線後產生的 bug

如果是測試表中未覆蓋的則編制測試表的人員背鍋

如果是不可抗力福利彩票背鍋

開個玩笑,根據我自己釋出響應式頁面的時候,首先就是灰度釋出,單位裡有test伺服器,可以直接部署到test上面,模擬上線環境,通過多個使用場景來監測應用是否健壯,例如:超大UV,高併發,載入時間等等,還要看頁面中是否有靜態資源出現路徑錯誤,以及程式碼中寫錯/疏忽/遺漏的地方。

如果沒有這個灰度釋出的條件,專案上線出了問題,應該第一時間向leader反映,並尋求BUG處理的流程,如果專案訪問量不大,可以在夜間偷偷填坑,如果訪問量大,那麼可以緊急追溯錯誤來源,並趕緊釋出補丁/覆蓋原有資源,避免造成不良影響的進一步擴大。如果BUG真的很逆天,那麼可以考慮去填寫離職手續。