Web前端常見問題彙總
1.get 和post的區別
1.1資料傳輸大小：get 傳輸資料大小限制在1KB，post傳輸資料大小沒有嚴格限制
1.2快取和安全：get請求某個url，資料追加到url中傳送（http的header傳送），即瀏覽器將各個表單欄位元素及其資料按照URL引數的格式附加在請求行中的資源路徑後面，檢視瀏覽器歷史記錄就可以看到使用者資料，自然就不夠安全，一些檔案在訪問的時候同時也被快取了。
post請求時瀏覽器把各表單欄位元素及其資料作為HTTP訊息的實體內容傳送給Web伺服器，而不是作為URL地址的引數進行傳遞，這樣就無法輕易獲取，相對安全，檔案一般不會被快取。
2.XSS（cross site script）跨站指令碼攻擊
XSS是指惡意攻擊者利用網站沒有對使用者提交資料進行轉義處理或者過濾不足的缺點，進而新增一些程式碼，嵌入到web頁面中去。使別的使用者訪問都會執行相應的嵌入程式碼。
2.1.反射型XSS攻擊
原請求：http://www.test.com/message.php?send=Hello world!
攻擊請求：http://www.test.com/message.php?send=<script>alert('foolish')</script>!
2.2.存貯型XSS攻擊
留言板表單中的表單域：<input
type=“text” name=“content” value=“這裡是使用者填寫的資料”>
使用者是提交相應留言資訊；將資料儲存到資料庫；其他使用者訪問留言板，應用去獲取資料並顯示。
攻擊者在value填寫<script>alert(‘foolish!’)</script>，將資料儲存到資料庫中，其他使用者取出資料顯示的時候，將會執行攻擊性程式碼。
2.3DOMBasedXSS
通過修改頁面的DOM節點形成的XSS
<HTML>
<TITLE>Welcome!</TITLE>
Hi
<SCRIPT>
var pos=document.URL.indexOf("name=")+5;
document.write(document.URL.substring(pos,document.URL.length));
</SCRIPT>
<BR>
Welcome to our system
…
</HTML>
正常操作：http://www.vulnerable.site/welcome.html?name=Joe
攻擊性操作：http://www.vulnerable.site/welcome.html?name=<script>alert(document.cookie)</script>
3.Web前端頁面效能優化
內容大多來自http://blog.csdn.net/mahoking/article/details/51472697
http://www.cnblogs.com/sprying/p/4251682.html
3.1瀏覽器工作原理
3.1.1 ETag工作原理
If-None-Match: 頭資訊中包含 ETag hash，如果資料沒有改變，伺服器將返回 304 狀態程式碼。
是 Entity Tag 的縮寫，是實體標籤的意思。在HTTP1.1協議中其實就是請求HEAD中的一個屬性，用來幫助伺服器控制Web端的快取驗證。它的原理是這樣的，當瀏覽器請求伺服器的某項資源(A)時,
伺服器根據A算出一個雜湊值(3f80f-1b6-3e1cb03b)並通過 ETag 返回給瀏覽器，瀏覽器把"3f80f-1b6-3e1cb03b" 和 A 同時快取在本地，當下次再次向伺服器請求A時，會通過類似If-None-Match: "3f80f-1b6-3e1cb03b" 的請求頭把ETag傳送給伺服器，伺服器再次計算A的雜湊值並和瀏覽器返回的值做比較，如果發現A發生了變化就把A返回給瀏覽器(200)，如果發現A沒有變化就給瀏覽器返回一個304未修改。這樣通過控制瀏覽器端的快取，可以節省伺服器的頻寬，因為伺服器不需要每次都把全量資料返回給客戶端。
通常情況下，ETag更類似於資源指紋(fingerprints)，如果資源發生變化了就會生成一個新的指紋，這樣可以快速的比較資源的變化。在伺服器端實現中，很多情況下並不會用雜湊來計算ETag，這會嚴重浪費伺服器端資源，很多網站預設是禁用ETag的。有些情況下，可以把ETag退化，比如通過資源的版本或者修改時間來生成ETag。
3.1.2 Last-Modified
請求中傳送一個 If-Modified-Since 頭資訊，它包含了上一次從伺服器連同資料所獲得的日期。如果資料從那時起沒有改變，伺服器將返回一個特殊的 HTTP 狀態程式碼 304，這意味著從上一次請求後這個資料沒有改變。
3.2優化方法
3.2.1 減少http請求，合理設定 HTTP快取
每次http請求都需要建立通訊鏈路、進行資料傳輸，而在伺服器端，每個http都需要啟動獨立的執行緒去處理。這些通訊和服務的開銷都很昂貴，減少http請求的數目可有效提高訪問效能。
減少http的主要手段是合併CSS、合併javascript、合併圖片。將瀏覽器一次訪問需要的javascript和CSS合併成一個檔案，這樣瀏覽器就只需要一次請求。圖片也可以合併，多張圖片合併成一張，如果每張圖片都有不同的超連結，可通過CSS偏移響應滑鼠點選操作，構造不同的URL。
對一個網站而言，CSS、javascript、logo、圖示這些靜態資原始檔更新的頻率都比較低，而這些檔案又幾乎是每次http請求都需要的，如果將這些檔案快取在瀏覽器中，可以極好的改善效能。通過設定http頭中的cache-control和expires的屬性，可設定瀏覽器快取，快取時間可以是數天，甚至是幾個月。
3.2.2 啟用壓縮
在伺服器端對檔案進行壓縮，在瀏覽器端對檔案解壓縮，可有效減少通訊傳輸的資料量。如果可以的話，儘可能的將外部的指令碼、樣式進行合併，多個合為一個。文字檔案的壓縮效率可達到80%以上，因此HTML、CSS、javascript檔案啟用GZip壓縮可達到較好的效果。但是壓縮對伺服器和瀏覽器產生一定的壓力，在通訊頻寬良好，而伺服器資源不足的情況下要權衡考慮。
3.2.3 圖片懶載入（Lazyload）
這條策略實際上並不一定能減少 HTTP請求數，但是卻能在某些條件下或者頁面剛載入時減少 HTTP請求數。對於圖片而言，在頁面剛載入的時候可以只加載第一屏，當用戶繼續往後滾屏的時候才載入後續的圖片。這樣一來，假如使用者只對第一屏的內容感興趣時，那剩餘的圖片請求就都節省了。
對於網站優化加速的個人理解：
1.合併：css, js, 圖片（CSS sprites）
2.快取 客戶端儲存不常更新的資源
3.壓縮
4.圖片懶載入（Lazyload images）
所有這些都有減少http請求次數，或者一次性請求次數