vue-cli到哪做了那些事
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，快速搭建Vue.js項目。
vue cli內置了webpack的一些功能，這些是用webpack打包時需要我們自己配置的，例如：
1.ES6代碼轉換成ES5代碼
2. scss/sass/less/stylus轉css
3. .vue文件轉換成js文件
4. 使用 jpg、png，font等資源文件
5. 自動添加css各瀏覽器產商的前綴
6. 代碼熱更新
7. 資源預加載
8. 每次構建代碼清除之前生成的代碼
瀏覽器存儲的方式有哪些
?
瀏覽器 cookie 和 session 的認識?
介紹下304過程?
HTTP 狀態碼中的 304 狀態碼表示“未修改”（Not Modified），通常在瀏覽器向服務器請求資源時使用。下面是關于 304 狀態碼的簡要介紹：
?
304 狀態碼的過程：
-
瀏覽器緩存檢查：
- 當瀏覽器向服務器請求資源時，會攜帶上次請求該資源時服務器返回的緩存標識（如 ETag 或 Last-Modified）。
-
服務器檢查資源狀態：
- 服務器接收到請求后，會檢查請求中攜帶的緩存標識與服務器當前資源的標識是否一致。
-
資源未修改：
- 如果服務器檢測到請求的資源自上次請求以來未發生變化，即資源未被修改，則服務器會返回 304 狀態碼給瀏覽器。
-
瀏覽器處理：
- 瀏覽器收到 304 狀態碼后，表示本地緩存的資源仍然有效，瀏覽器會從本地緩存加載資源，而不是重新請求服務器獲取資源。
304 狀態碼的優勢：
- 減少網絡流量：通過避免重復傳輸未更改的資源，可以減少網絡流量和加快頁面加載速度。
- 節省服務器資源：減少了服務器處理相同請求的頻率，節省了服務器資源。
網頁顏色變灰?
// 獲取 body 元素
var body = document.getElementsByTagName("body")[0];// 修改背景色為灰色
body.style.backgroundColor = "gray";// 修改文本顏色為灰色
body.style.color = "gray";
?
nginx處理跨域-反向代理（原理）?
原理：
-
配置 Nginx：
- 在 Nginx 的配置文件中，可以使用?
add_header?指令來添加 CORS 相關的響應頭部。 - 通常需要在目標服務器的代理位置或者對應的 location 塊中進行配置。
- 在 Nginx 的配置文件中，可以使用?
-
添加響應頭：
- 使用?
add_header?指令，可以向響應頭部添加 CORS 相關的信息，如允許的 Origin、允許的方法（GET、POST 等）、允許的頭部字段等。
- 使用?
-
示例配置：
-
下面是一個簡單的示例配置，用于在 Nginx 中處理跨域請求：
-
-
location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;} }4.重啟 Nginx：
- 保存配置文件后，需要重啟 Nginx 服務使配置生效。
?
性能優化-如何評價頁面性能好壞，用什么指標?
-
加載時間：
- 頁面加載時間（Page Load Time）：從用戶發起請求到頁面完全加載顯示所需的時間。
- 首次內容渲染時間（First Contentful Paint）：頁面上首次有內容渲染的時間，用戶能夠看到頁面內容的時間。
- DOM 加載時間（DOM Load Time）：DOM 樹加載完成的時間，影響頁面的可交互性。
-
資源加載：
- 資源加載時間：各種資源（如圖片、CSS、JavaScript 文件）加載完成的時間。
- 緩存利用率：瀏覽器是否有效利用緩存，減少不必要的資源請求。
-
交互性能：
- 響應時間（Response Time）：用戶與頁面交互后，頁面作出響應的時間。
- 滾動性能（Scroll Performance）：頁面滾動時的流暢度和響應速度。
-
渲染性能：
- 重繪與重排（Repaint & Reflow）：頁面的布局和樣式改變時，瀏覽器重新繪制和重排元素的次數。
- 幀率（Frame Rate）：頁面的動畫和交互效果是否達到流暢的 60 FPS。
?
優化手段 從幾秒到幾毫秒?
-
減少 HTTP 請求：
- 合并 CSS 和 JavaScript 文件，減少文件數量和大小。
- 使用 CSS 精靈將多個小圖片合并為一個大圖，減少圖片請求次數。
-
使用 CDN 加速：
- 將靜態資源部署到內容分發網絡（CDN），加速資源的加載速度。
-
壓縮資源：
- 壓縮 HTML、CSS、JavaScript 代碼，減小文件大小。
- 使用圖片壓縮工具對圖片進行壓縮，減小圖片文件大小。?
-
延遲加載：
- 對于非關鍵資源，可以延遲加載，等頁面主要內容加載完畢后再加載其他資源。
-
使用緩存：
- 設置合適的緩存策略，讓瀏覽器能夠緩存頁面資源，減少重復請求。
-
減少重排和重繪：
- 通過合并樣式表、優化 DOM 結構等方式減少頁面的重排和重繪操作。
- 使用 Web Workers：
- 將一些耗時的任務交給 Web Workers 處理，以減輕主線程的負擔，提高頁面響應速度。
過去遇到有挑戰的事情，怎么解決的?
分析問題：
-
首先，我會深入了解問題的本質和背景，明確問題的范圍和影響。這有助于我全面理解挑戰，并為解決問題制定合適的方案做好準備。
-
持續學習：解決問題的過程也是一個學習的過程。無論問題的解決結果如何，我都會總結經驗教訓，明白成功的原因和失敗的原因，以便將這些經驗運用到未來的挑戰中。
-
保持樂觀：在面對挑戰時，我會保持樂觀的態度。我相信每個問題都有解決的方法，而挑戰也是成長和進步的機會。
?
?xss攻擊 怎么解決?
跨站腳本攻擊（XSS）是一種常見的網絡安全漏洞，攻擊者通過在網頁中注入惡意腳本，來獲取用戶信息或利用用戶的權限進行攻擊。以下是一些常見的方法來解決 XSS 攻擊：
-
輸入過濾和驗證：
- 對用戶輸入的數據進行嚴格的過濾和驗證，確保不含有惡意腳本。可以使用白名單機制，只允許特定類型的輸入，過濾掉潛在的惡意代碼。
-
轉義輸出：
- 在將用戶輸入的數據輸出到網頁上時，需要對其進行合適的轉義處理，以防止其中的 HTML、JavaScript 或其他腳本代碼得以執行。比如將?
<?轉義為?<，>?轉義為?>?等。
- 在將用戶輸入的數據輸出到網頁上時，需要對其進行合適的轉義處理，以防止其中的 HTML、JavaScript 或其他腳本代碼得以執行。比如將?
?
?CSRF避免方式：
添加驗證碼
使用token
服務端給用戶生成一個token，加密后傳遞給用戶
webpack如何實現代碼分離?
1．入口起點：使用 entry 配置手動地分離代碼。
2．防止重復：使用 CommonsChunkPlugin 去重和分離 chunk。
3．動態導入：通過模塊的內聯函數調用來分離代碼。
常見的Webpack Loader? 如何實現一個Webpack Loader(NO)?
loader: 是一個導出為函數的javascript模塊，根據rule匹配文件擴展名，處理文件的轉換器。
file-loader：把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件 (處理圖片和字體)
url-loader： 與file-loader類似，區別是用戶可以設置一個閾值，大于閾值會交給file-loader處理，小于閾值時返回文件base64 形式編碼 (處理圖片和字體)
babel-loader：把 ES6 轉換成 ES5
sass-loader：將SCSS/SASS代碼轉換成CSS?
