web專案常問面試題

不愛寫程式碼的程式設計師發表於2018-03-07
Web面試題

1:你做過哪些效能優化？

  • html效能優化
1:語意化標籤         (利於搜尋引擎收錄 也提高了程式碼閱讀性)
2:減少標籤的巢狀      (利於渲染引擎的加速渲染)
3:把script標籤移到HTML檔案末尾，因為JS會阻塞後面的頁面的顯示
4:減少iframe的使用，因為iframe會增加一條http請求，阻止頁面載入，即使內容為空，載入也需要時間
5:減少註釋，因為過多註釋不光佔用空間，如果裡面有大量關鍵詞會影響搜尋引擎的搜尋。上線的時候最好清空註釋
6:html結構的複用性
複製程式碼
  • css效能優化
1:儘量不使用萬用字元(＊)
2:把頁面公用的樣式給封裝到css檔案裡面(減少程式碼量、複用性強、便於維護)
3:不要用內聯樣式和行類樣式(比較亂  維護性比較差)
4:儘量使用最具體的類別、避免後代選擇器、屬於標籤類別的規則永遠不要包含子選擇器
//因為從左到右解析關係，在CSS選擇器中後代選擇器非但沒有幫我們加快CSS查詢。反而查詢很慢
5:能用css實現的樣式就不要用圖片。減少http請求
6:合併壓縮css檔案 減少http請求
複製程式碼
  • js效能優化
1:可以多使用事件委託  減少事件註冊
2:多使用if語句多做判斷  減少不必要的操作
3:建立標籤的時候儘量通過字串建立，不要通過createElement。因為通過 createElement建立完之後還要再次操作這個dom去設定屬性和文字等。而直接建立字串只需要一步設定好。
4:設定樣式的時候  儘量不要用style去設定樣式  維護性 可讀性差  最好新增通過class去設定樣式
5:儘量少使用eval函式。(使用eval相當於在執行時再次呼叫解釋引擎對內容進行執行，需要消耗大量時間，而且使用Eval帶來的安全性問題也是不容忽視的。)
6:使用三目運算子替代條件分支可以減少直譯器對條件的探測次數
7:提高程式碼複用性使用封裝。減少程式碼量、維護性好。
8:合併壓縮js 減少http請求
複製程式碼
  • 圖片效能優化
1:合併圖片生成雪碧圖 減少http請求
2:圖片小於2KB轉換成base64 通過css去設定  減少http請求
3:圖片壓縮大小
4:如果不考慮相容問題  可以通過canvas代替圖片
5:配合js使用懶載入。載入圖片
複製程式碼

2:公司專案開發流程

1:產品根據需求做出產品原型 --> 後臺
2:ui根據產品原型做設計稿 psd
3:前端是根據設計稿作出頁面
4:整合開發 + 前後臺互動
5:測試-->改bug 1:本地測試 2:灰度(bate)測試 3:線上測試
6:上線-->夜晚12點

3.電商專案負責模組有哪些？購物車商品資料存在什麼地方?支付功能?

1: 自己總結一下找到電商網站有哪些頁面？
2: 購物車資料一般存在後臺。不能用本地儲存，因為換一臺瀏覽器的話 本地儲存的資料就用不了。而且商品的價格是會改變的。如果用本地儲存，價格改變了拿不到最新資料。
3:通過用ping++去實現

4:說說模組化 commonjs、AMD、CMD不同?

AMD/CMD/CommonJs是JS模組化開發的標準，目前對應的實現是RequireJs/SeaJs/nodeJs。CommonJs主要針對服務端，AMD/CMD主要針對瀏覽器端，所以最容易混淆的是AMD/CMD。

AMD/CMD區別

1:AMD是預載入，在並行載入js檔案同時，還會解析執行該模組（因為還需要執行，所以在載入某個模組前，這個模組的依賴模組需要先載入完成）。CMD是懶載入，雖然會一開始就並行載入js檔案，但是不會執行，而是在需要的時候才執行。
2:AMD載入快速，尤其遇到多個大檔案，因為並行解析，所以同一時間可以解析多個檔案。CMD執行等待時間會疊加。因為每個檔案執行時是同步執行（序列執行），因此時間是所有檔案解析執行時間之和，尤其在檔案較多較大時，這種缺點尤為明顯。
3:AMD並行載入，非同步處理，載入順序不一定，可能會造成一些困擾，甚至為程式埋下大坑。CMD因為只有在使用的時候才會解析執行js檔案，因此，每個JS檔案的執行順序在程式碼中是有體現的，是可控的

5:一個網站的js檔案過多的情況下，會出現變數名被汙染和函式名衝突。有什麼解決方法？

1:一個js檔案用一個匿名函式自執行。這樣一個js檔案的變數和函式的作用域只存在這個js檔案中 不會出現汙染
2:一個js檔案一個物件包含著變數和方法，使用的時候去呼叫這個物件。
3:使用模組化載入js庫。比如require.js和sea.js

6:瀏覽器快取怎麼解決？

1:設定meta標籤禁止快取

<!--http-equiv顧名思義，相當於http的檔案頭作用，
它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，
與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。-->

//Expires(期限)
//說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸。
<meta   http-equiv="Expires"   CONTENT="0">

//Cache-Control指定請求和響應遵循的快取機制。no-cache指示請求或響應訊息不能快取
<meta   http-equiv="Cache-Control"   CONTENT="no-cache">

//Pragma(cache模式)
//說明：禁止瀏覽器從本地計算機的快取中訪問頁面內容。
<meta   http-equiv="Pragma"   CONTENT="no-cache">。
複製程式碼

2:給靜態資原始檔設定時間戳。每一次請求的檔案不一樣的話 會去伺服器請求最新的資源

"www.baidu.com/index.css?timestamp=" + new Date().getTime();
複製程式碼

3:伺服器端設定響應頭不快取

   //對應html設定meta標籤
   response.setHeader("Pragma", "no-cache");
   response.setHeader("Cache-Control", "no-cache");
   response.setDateHeader("Expires", 0);
複製程式碼

7:說出幾條能加快頁面載入的方案？

  • 減少客戶端第一次瀏覽網站的圖片量。使用圖片資源懶載入。通過滾動到可視區域去請求圖片資源載入。
  • 減少http請求 加快速度。css和js和圖片的壓縮合並
  • 把靜態資源如js、css、圖片都放在cdn上。cdn通過在網路各處放置節點伺服器。會按最近伺服器推送資源給客戶端。
  • 伺服器端把一些介面可以設定瀏覽器快取
  • 將指令碼放在底部。指令碼放在底部對於實際頁面載入的時間並不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現。

相關文章