【JS面試】 第十二章 運行環境

1. 從輸入url到獲得html的詳細過程
2. window.load和DOMContentLoaded的區別

頁面加載過程

---

• 瀏覽器就能夠經過訪問連接來獲得頁面的內容
• 經過繪製和渲染，顯示出頁面的最終的樣子

加載資源的形式

• 輸入url或跳轉頁面加載html http://coding.m.imooc.com
• 加載html的靜態資源<script src="jquery.js"></script>

加載一個資源的過程

1. 瀏覽器根據DNS服務器獲得域名的IP地址
2. 向這個IP的機器發送http請求
3. 服務器收處處理並返回http請求
4. 瀏覽器獲得返回內容

瀏覽器渲染頁面的過程

1. 根據HTML結構生成DOM Tree
2. 根據CSS生成CSSOM
3. 將DOM和CSSOM整合造成Render Tree（渲染樹）
4. 根據Render Tree開始渲染和展現
5. 遇到<script>時，會執行並阻塞渲染
   由於JS會改變DOM結構及內容，因此二者不能同時進行

• 將CSS放於head中，加載完CSS後瀏覽器直接知道規則，在渲染body中的元素時，已將CSS考慮進去渲染
• 將CSS放於body尾部，元素先按照默認加載，而後再根據CSS進行改變，性能較差
• 將script放於body尾部，能夠拿到全部DOM標籤和結構，不會阻塞body上面的元素的渲染，性能較優
• <p><img src="XXX" /></p>img DOM元素會順序生成，但圖片src異步加載

性能優化

---

原則

• 多使用內存、緩存或者其餘方法
• 減小CPU計算、減小網絡請求、減小IO操做（前端不考慮）

從哪裏入手

加載頁面和靜態資源

靜態資源的壓縮合並（打包合併+代碼壓縮）

• 手動合併效率低、會出錯，通常用構建工具合併
• 3個文件須要發3個請求，每一個請求都會耗費不少時間
• 1個文件只需發送1個請求

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
// 打包合併後
<script src="abc.js"></script>

靜態資源緩存

• 經過連接名稱控制緩存，<script src=「abc_1.js」></script>
• 只有內容改變的時候，連接名稱纔會改變，<script src="abc_2.js"></script>

使用CDN

• 不一樣地域的資源優化
• 讓資源加載更快

使用SSR後端渲染

• 如今VUe React提出了這樣的概念
• 其實jsp php asp都屬於後端渲染
• 數據直接輸出到HTML中

頁面渲染

CSS放前面，js放後面

懶加載

• 圖片懶加載、下拉加載更多
• 給src賦值一個很小的圖
• 真正的圖片放在一個data後面
• 用的時候再把data屬性賦值到src中
• 加快頁面渲染速度

<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script> var img1 = document.getElementById('img1'); img1.src = img1.getAttribute('data-realsrc'); </script>

減小DOM操做

• 緩存DOM查詢，減小DOM查詢，對DOM查詢作緩存

// 未緩存DOM查詢
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {
  // TODO
}

// 緩存了DOM查詢
var pList = document.getElementsByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
  // TODO
}

• 合併DOM插入，減小DOM操做，多個操做盡可能合併在一塊兒執行

var listNode = document.getElementById('list');
// 建立1個片斷
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);

事件節流

• 合併頻繁操做
• 很快的連着的操做，快速打字先不觸發

var textaarea = document.getElementById('text');
var timeoutId;
textaarea.addEventListener('keyup', function () {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(function () {
    // 觸發change事件
    console.log("用戶中止打字，開始觸發事件")
  }, 100);
})

儘早執行操做

window.addEventListener('load', function () {
  // 頁面所有加載完以後纔會執行，包括圖片、視頻等
})

document.addEventListener('DOMContentLoaded', function () {
  // DOM渲染完便可執行，此時圖片、視頻還可能沒有加載完
  // jQuery、zepto均使用此方法
})

安全性

---

XSS跨站請求攻擊

• 在新浪博客寫一篇文章，同時偷偷插入一段<script>
• 攻擊代碼中，獲取cookie，發送到本身的服務器
• 發佈博客，有人查看博客內容
• 會把查看者的cookie發送到攻擊者的服務器

預防

• 前端替換關鍵字，例如替換<爲<、>爲>（配合）
• 後端替換（建議）

XSRF跨站請求僞造

• 你已登陸一個購物網站，正在瀏覽器商品
• 該網站付費接口是 xxx.com/pay?id=100 ，可是沒有任何驗證
• 而後你收到一封郵件，隱藏着<img src=xxx>
• 你查看郵件的時候，就已經悄悄的付費購買了

預防

• 增長驗證流程，如輸入指紋、密碼、短信驗證碼等

面試技巧

---

簡歷

• 簡潔明瞭，重點突出項目經歷和解決方案
• 把我的博客放在簡歷中，而且按期維護更新博客
• 把我的的開源項目放在簡歷中，並維護開源項目
• 簡歷千萬不要造假，要保持能力和經歷上的真實性

過程當中

• 如何看待加班？加班就像借錢，救急不救窮
• 千萬不可挑戰面試官，不要反銬面試官
• 學會給面試官驚喜，但不要太多
• 遇到不會回答的問題，說出你知道的就能夠
• 談談你的缺點：說說你最近正在學什麼就能夠了

可能對React不是很瞭解，最近正在學React，大約1個月後就能作出1個React的網站

題目解答

---

1. 從輸入url到獲得html的詳細過程

• 瀏覽器根據DNS服務器獲得域名的IP地址
• 向這個IP的機器發送http請求
• 服務器收處處理並返回http請求
• 瀏覽器獲得返回內容

2. window.load和DOMContentLoaded的區別

window.addEventListener('load', function () {
  // 頁面所有加載完以後纔會執行，包括圖片、視頻等
})

document.addEventListener('DOMContentLoaded', function () {
  // DOM渲染完便可執行，此時圖片、視頻還可能沒有加載完
  // jQuery、zepto均使用此方法
})