前端運行環境（2017）
頁面加載過程
1、加載資源的形式：
輸入url（或跳轉頁面）加載html；
加載html中的靜態資源；
2、加載一個資源的過程：
瀏覽器根據DNS服務器得到域名的IP地址；
向這個IP的機器發送http請求；
服務器收到、處理並返回http請求；
瀏覽器得到返回內容。
3、瀏覽器渲染頁面的過程：
根據HTML結構生成DOM Tree；
根據CSS生成CSSOM（視圖模塊）；
將DOM和CSSOM整合形成RenderTree（渲染樹）；
根據RenderTree開始渲染和展示；
遇到<script>時，會執行並阻塞渲染。
4、面試題：
從輸入url到得到html的詳細過程
答：瀏覽器根據DNS服務器得到域名的IP地址==>向這個IP的機器發送http請求==>服務器收到、處理並返回http請求==>瀏覽器得到返回內容
window.onload和DOMContentLoaded的區別？
window.addEventListener(‘load‘,function(){ //頁面的全部資源加載完才會執行，包括圖片、視頻等 }) document.addEventListener(‘DOMContentLoaded‘,function(){ //DOM渲染完即可執行，此時圖片、視頻還可能沒有加載完 })
為何把css放在head中？
答：一是為了用戶體驗；二是為了性能
性能優化
原則：多使用內存、緩存或者其他方法；減少CPU計算和網絡。
加載資源優化：
1、靜態資源的壓縮合並（require.js、webpack）；
2、靜態資源緩存（通過連接名稱控制緩存）；
3、使用CDN讓資源加載更快（CDN全稱是Content Delivery Network，即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近獲得所需內容，解決internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.bom/bootstrap/..." rel="stylesheet" />
<script src="https://cdn.bootcss.com/zepto/..."></script>
</head>
<body>
</body>
</html>
4、使用SSR後端渲染；
5、數據直接輸出到HTML中。
渲染優化：
1、CSS放前面，JS放後面；
2、圖片懶加載；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--事先使用一個小圖片替換真正要顯示的圖片，等真正的圖片完全加載後再替換小圖片-->
<img id="img1" src="small.jpg" data-realsrc="readlly.jpg" />
<script>
var img1 = document.getElementById(‘img1‘);
img1.src = img1.getAttribute(‘data-realsrc‘);
</script>
</body>
</html>
3、減少DOM查詢，對DOM查詢做緩存；
//未緩存DOM查詢 var i; for(i=0;i<document.getElementsByTagName(‘p‘).length;i++){ //執行代碼 } //緩存了DOM查詢 var i; var pList = document.getElementsByTagName(‘p‘); for(i=0;i<pList.length;i++){ //執行代碼 }
4、減少DOM操作，多個操作盡量合並在一起執行；
var listNode = document.getElementById(‘list‘); //要插入10個li標簽 var frag = document.createDocumentFragment(); var x,li; for(x=0;x<10;x++){ li = document.createElement(‘li‘); li.innerHTML = ‘List item‘+x; frag.appendChild(li); } listNode.appendChild(frag);
5、事件節流；
//讓事件延遲執行 var textar = document.getElementById(‘text‘) var timeoutId; textar.addEventListener(‘keyup‘,function(){ if(timeoutId){ clearTimeout(timeoutId); } timeoutId = setTimeout(function(){ //觸發change事件 },100) })
6、盡早執行操作，如DOMContentLoaded）。
window.addEventListener(‘load‘,function(){
//頁面的全部資源加載完才會執行，包括圖片、視頻等
})
document.addEventListener(‘DOMContentLoaded‘,function(){
//DOM渲染完即可執行，此時圖片、視頻還可能沒有加載完
})
安全性
1、XSS（跨站請求攻擊）:
概念 惡意攻擊者往Web頁面裏插入惡意的腳本代碼，當用戶瀏覽該網頁時，嵌入其中的腳本會被執行，從而達到惡意攻擊用戶的目的。
分類 內部攻擊，主要是利用程序自身的漏洞，構造跨站語句；外部攻擊，主要是自己構造XSS跨站漏洞網頁或者尋找非目標以外的有跨站漏洞的網頁。
類型 存儲型XSS，持久化，代碼是存儲在服務器中的，如在個人信息或發表文章等地方，假如代碼，如果沒有過濾或者過濾不嚴，那麽這些代碼將儲存到服務器中，用戶訪問該頁面時觸發代碼執行；反射型XSS，非持久化，需要欺騙用戶自己去點擊鏈接才能觸發XSS代碼（服務器中沒有這樣的頁面和內容），一般容易出現搜索頁面。
2、XSRF（跨站請求偽造）:
概念 跨站請求偽造是一種對網站的惡意利用，盡管聽起來像是跨站請求攻擊（XSS），但它與XSS非常不同，XSS利用站點內的信任用戶，而CSRF則通過偽裝來自受信任用戶的請求來利用受信任的網站。與XSS攻擊相比，CSRF攻擊往往不大流行，導致對其進行防範的資源也相當稀少，因此難以防範，所以被認為比XSS更具有危險性。
小栗子 攻擊通過在授權用戶訪問的頁面中包含鏈接或者腳本的方式工作。例如：一個網站用戶A可能正在瀏覽聊天論壇，而同時另一個用戶B也在此論壇中，並且後者剛剛發布了一個具有A銀行鏈接的圖片消息。設想一下，B編寫一個在A的銀行站點上進行取款的form提交的鏈接，並將此鏈接作為圖片src。如果A的銀行在cookie中保存他的授權信息，並且cookie沒有過期，那麽當A的瀏覽器嘗試裝載圖片時將提交這個取款form和他的cookie，這樣在沒經A同意的情況下便授權了這次事務。
攻擊原理
防禦措施 Token驗證、Referer驗證、隱藏令牌。
前端運行環境（2017）