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經過在網絡各處放置節點服務器。會按最近服務器推送資源給客戶端。

• 服務器端把一些接口能夠設置瀏覽器緩存

• 將腳本放在底部。腳本放在底部對於實際頁面加載的時間並不能形成太大影響，可是這會減小頁面首屏出現的時間，使頁面內容逐步呈現。