一、網頁加載程序

1. 加載資源的形式

htm代碼，

媒體檔案，如圖片、視頻等，

Javascript CSS，

2. 加載資源的程序

DNS決議：將域名轉化為IP地址，
瀏覽器根據 IP 地址向服務器發起 http 請求，
服務器處理 http 請求，并回傳給瀏覽器，

3. 渲染頁面的程序

根據 HTML 代碼生成 DOM Tree ，
根據 CSS 代碼生成 CSSOM ，
將 DOM Tree 和 CSSOM 整合形成 Render Tree ，
根據 Render Tree 渲染頁面，
遇到 <script> 則暫停渲染，優先加載并執行 JS 代碼，完成再繼續，
直至把 Render Tree 渲染完成，

4. 面試題

從輸入 url 到顯示出頁面的整個程序是什么樣的？

下載資源：各個資源型別，下載程序，
渲染頁面：結合 html、css、JavaScript、圖片等，

window.onload 和 DOMContentLoaded 區別？

window.onload：資源全部加載完才能執行，包括圖片，
DOMContentLoaded：DOM 渲染完成即可，圖片可能尚未下載，

二、性能優化

1. 性能優化的原則

多使用記憶體、快取或其他方法，
減少CPU計算量，減少網路加載耗時，
(適用于所有編程的性能優化——空間換時間)，

2. 讓加載更快

減少資源體積：壓縮代碼，
減少訪問次數∶合并代碼、SSR服務器端渲染、緩存，

使用更快的網路：CDN，

3. 讓渲染更快

CSS 放在 head，JS 放在 body 最下面，
盡早開始執行JS，用 DOMContentloaded 觸發，

懶加載（圖片懶加載，上滑加載更多），
對 DOM 查詢進行快取，
頻繁 DOM 操作，合并到一起插入 DOM 結構，
節流 throttle 防抖 debounce，

4. 防抖 debounce

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖 debounce</title>
</head>

<body>
    <input type="text" id="input1">

    <script>
        const input1 = document.getElementById('input1')
        // 防抖
        function debounce(fn, delay = 500) {
            // timer 是閉包中的
            let timer = null

            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                }, delay)
            }
        }
        input1.addEventListener("keyup",
            debounce(function (e) {
                console.log(e.target);
                console.log(this.value);
            }, 600)
        )
    </script>
</body>

</html>

5. 節流 throttle

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>節流 throttle</title>
    <style>
        #div1 {
            border: 1px solid #ccc;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="div1" draggable="true">可拖拽</div>

    <script>
        const div1 = document.getElementById('div1')
        // 節流
        function throttle(fn, delay = 100) {
            // timer 是閉包中的
            let timer = null

            return function () {
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                }, delay)
            }
        }
        div1.addEventListener("drag",
            throttle(function (e) {
                console.log(e.offsetX, e.offsetY);
            })
        )
    </script>
</body>

</html>

三、安全

1. 常見的 web 前端攻擊方式有哪些？

XSS 跨站請求攻擊

跨站腳本（英語：Cross-site scripting，通常簡稱為：XSS）是一種網站應用程式的安全漏洞攻擊，是代碼注入的一種，它允許惡意用戶將代碼注入到網頁上，其他用戶在觀看網頁時就會受到影響，這類攻擊通常包含了HTML以及用戶端腳本語言，

XSRF/CSRF 跨站請求偽造

全稱cross-site request forgery，名為跨站請求偽造，顧名思義就是黑客偽裝成用戶身份來執行一些非用戶自愿的惡意以及非法操作，