前端試題(四)

1. vue過濾器使用場景

2. v-on綁定多個方法

<p v-on="{click:dbClick,mousemove:MouseClick}"></p>

一個事件綁定多個函數：

<p @click="one(),two()">點擊</p>

3. 在菜單結構不確定時，前端如何動態渲染

樹形結構：深度遍歷、廣度遍歷（遞歸）

4. Vue-router的鉤子函數

[Vue的鉤子函數路由導航守衛、keep-alive、生命周期鉤子

路由導航守衛
在這里插入圖片描述

5. Vue-router的實現原理

更新視圖但不重新請求頁面，是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有2種方式,Hash模式和History模式。

6. Vuex的實現原理

Vuex是一個專為Vue服務，用于管理頁面數據狀態、提供統一數據操作的生態系統。它集中于MVC模式中的Model層，規定所有的數據操作必須通過 action - mutation - state change 的流程來進行，再結合Vue的數據視圖雙向綁定特性來實現頁面的展示更新。統一的頁面狀態管理以及操作處理，可以讓復雜的組件交互變得簡單清晰，同時可在調試模式下進行時光機般的倒退前進操作，查看數據改變過程，使code debug更加方便。
Vuex框架原理與源碼分析

7. Vue-cli的自定義指令

像vue ui那樣在終端用的指令？？還是vue的自定義指令

8. keep-alive的兩個屬性

在開發Vue項目的時候，大部分組件是沒必要多次渲染的，所以Vue提供了一個內置組件keep-alive來緩存組件內部狀態，避免重新渲染。

緩存路由組件：將所有路徑匹配到的路由組件都緩存起來（某個組件切換后不進行銷毀，而是保存之前的狀態）

    <keep-alive><router-view></router-view></keep-alive>

缺點：所有的路由組件都被緩存了，嚴重浪費性能，而且也不符合需求

緩存特定組件

在keep-alive上有兩個屬性，只有匹配的組件會被緩存。

include 值為字符串或者正則表達式匹配的組件name會被緩存。
exclude 值為字符串或正則表達式匹配的組件name不會被緩存。

路由的meta屬性
除了方法二，我們還可以利用路由中的meta屬性來控制

{path: '/',name: 'home',meta:{keepAlive:true},component: Home}

新的問題：組件被緩存，并沒有被銷毀，所以組件在切換的時候也就不會被重新創建，自然也就不會調用created等生命周期函數，所以此時要使用activated與deactivated來獲取當前組件是否處于活動狀態。

在home組件里面寫入了activated與deactivated生命周期函數：

activated(){console.log("哎呀看見我了")console.log("----------activated--------")},deactivated(){console.log("討厭！！你又走了")console.log("----------deactivated--------")}

9. keep-alive組件

10. Vue的核心

Vue核心思想

11. Vue的修飾符

修飾符
事件修飾符
按鍵修飾符
系統修飾符
vue常用的修飾符

12. ES5、ES6的區別

所有es6的新特性都要答到
JavaScript、ES5和ES6的介紹和區別

13. 單頁面應用的原理和優缺點

單頁面應用指只有一個主頁面的應用，瀏覽器一開始就要加載所有必須的html，js，ss，單頁面的頁面跳轉僅刷新局部資源，多應用于pc端，
多頁面就是指一個頁面中有多個頁面，頁面跳轉時是整頁刷新
單頁面優點：
1.用戶體驗好，快，內容改變不需要重新加載整個頁面；
2.沒有頁面之間的切換，就不會出現“白屏現象”
單頁面缺點：
1.首次加載耗時比較多；
2.不利于SEO
3.不可以用導航實現前進后退效果；
4.頁面復雜度高

14. 瀏覽器兼容

15. 前端文件上傳

百度的webuploader，基于jquery封裝的

原生ajax上傳/axios.post上傳+進度條+后端接收文件

15.1 原生

掘金：前端本地文件（圖片）操作與上傳，并顯示在頁面中

底層實現還是基于input輸入框，然后利用onchange事件，監聽文件選擇的事件，然后利用formData對象裝載需要上傳的文件，最后通過XMLHttpRequest來進行文件的網絡異步傳輸。
inputDom.files[0]
var fd=new FormData()
fd.append('pic',pic)
xhr.upload.onprogress

lengthComputable
loaded
total

這里的處理，在于如何顯示出來（讀取文件）
let fileReader = new FileReader()
fileReader.onload
fileReader.readAsDataURL(this.files[0])賦值給img標簽的src

15.1.1 在ipt的onchange事件里打印this對象，有files屬性，是一個數組

在這里插入圖片描述

15.1.2 打印files[0]

在這里插入圖片描述

15.1.3 input dom對象的value值

在這里插入圖片描述

<script type="text/javascript">
function upfile(){var pic=document.getElementsByTagName('input')[0].files[0];var fd=new FormData();var xhr=new XMLHttpRequest();xhr.open('post','01.php',true);xhr.onreadystatechange=function (){//readystate為4表示請求已完成并就緒if(this.readyState==4){document.getElementById('precent').innerHTML=this.responseText;//在進度條下方插入百分比}}xhr.upload.onprogress=function (ev){//如果ev.lengthComputable為true就可以開始計算上傳進度//上傳進度 = 100* ev.loaded/ev.totalif(ev.lengthComputable){var precent=100 * ev.loaded/ev.total;console.log(precent);//更改進度條，及百分比document.getElementById('bar').style.width=precent+'%';document.getElementById('precent').innerHTML=Math.floor(precent)+'%';}}fd.append('pic',pic);xhr.send(fd);}
</script>

input標簽在選擇同一個文件上傳時的bug處理
input在上傳文件的時候，如果連續上傳同一個文件的時候，會出現上傳無效的bug。這個問題出現在第二次選擇同一個文件的時候，input的onchange方法并不會觸發執行。

解決這個問題，上網搜索了一下，找到了辦法，就是需要重新設定input的type屬性。每次選擇完文件后，將input元素的type設置成text，然后在下一次click的時候將其設置成file，再觸發onchange事件，解決這個問題。

15.2 拖拽、粘貼

15.2.1 enctype

編碼格式是multipart/form-data，<form enctype="multipart/form-data" method="post">
參數和參數之間是且一個相同的字符串隔開的，比如這里是：
------WebKitFormBoundary72yvM25iSPYZ4a3F
編碼是application/x-www-form-urlencoded
參數和參數之間使用&連接，如：

key1=value1&key2=value2

如果直接就是一個FormData了，那么直接用ajax發出去就行了，不用做任何處理。

15.2.2 拖拽

dragover事件
event.originalEvent.dataTransfer.files[0]
fileReader讀url，formData，append

$(".img-container").on("dragover", function (event) {event.preventDefault();
}).on("drop", function(event) {event.preventDefault();// 數據在event的dataTransfer對象里let file = event.originalEvent.dataTransfer.files[0];// 然后就可以使用FileReader進行操作fileReader.readAsDataURL(file);// 或者是添加到一個FormDatalet formData = new FormData();formData.append("fileContent", file);
})

15.2.3 粘貼

contenteditable="true"
paste
event.originalEvent.clipboardData.files[0]

 <div contenteditable="true">hello, paste your image here</div>

$("#editor").on("paste", function(event) {let file = event.originalEvent.clipboardData.files[0];
});

15.3 分片斷點續傳

七牛云

1、修改服務端上傳的限制配置；Nginx 以及 PHP 的上傳文件限制不宜過大，一般5M 左右為好；
2、大文件分片，一片一片的傳到服務端，再由服務端合并。這么做的好處在于一旦上傳失敗只是損失一個分片而已，不用整個文件重傳，而且每個分片的大小可以控制在4MB以內，服務端限制在4M即可。
3、使用七牛JavaScript SDK分片上傳
博客園斷點續傳

15.4 如何限制值只能上傳png格式

文件頭信息
hexdump

15.5 如何判斷文件唯一性

算hash值，比如md5

<input type="file"><script src="md5.js"></script><script>//https://www.npmjs.com/package/js-md5var input  = document.querySelector('input');input.addEventListener('change', function () {var file=  this.files[0];var reader = new FileReader();reader.readAsArrayBuffer(file);reader.addEventListener('load',function (e) {var buffer = e.target.result;var md = md5(buffer);console.log(md);});});</script>

文件過大，怎么算md5不卡頓：

web-worker
時間切片（react fiber架構 requestldleCallback）
抽樣

15.6 文件切片數量過多，上傳請求過多，導致卡頓，怎么處理

控制異步任務并發數量（如果有報錯怎么重試，報錯三次怎么統一終止所有切片）

15.7 移動端/pc端，每個切片大小如何控制

根據網速來動態調整包的大小

15.8 并發數+包控制如何實現

五月分割線

16. 瀏覽器緩存

在這里插入圖片描述

1. DNS緩存

有dns的地方,就有緩存。瀏覽器、操作系統、Local DNS、根域名服務器，它們都會對DNS結果做一定程度的緩存。

DNS查詢過程如下:

首先搜索瀏覽器自身的DNS緩存,如果存在，則域名解析到此完成。
如果瀏覽器自身的緩存里面沒有找到對應的條目，那么會嘗試讀取操作系統的hosts文件看是否存在對應的映射關系,如果存在，則域名解析到此完成。
如果本地hosts文件不存在映射關系，則查找本地DNS服務器(ISP服務器,或者自己手動設置的DNS服務器),如果存在,域名到此解析完成。
如果本地DNS服務器還沒找到的話,它就會向根服務器發出請求,進行遞歸查詢。

2. CDN緩存

當瀏覽器向CDN節點請求數據時，CDN節點會判斷緩存數據是否過期，若緩存數據并沒有過期，則直接將緩存數據返回給客戶端；否則，CDN節點就會向服務器發出回源請求，從服務器拉取最新數據，更新本地緩存，并將最新數據返回給客戶端。 CDN服務商一般會提供基于文件后綴、目錄多個維度來指定CDN緩存時間，為用戶提供更精細化的緩存管理。
打個比方：

10年前，還沒有火車票代售點一說，12306.cn更是無從說起。那時候火車票還只能在火車站的售票大廳購買，而我所在的小縣城并不通火車，火車票都要去市里的火車站購買，而從我家到縣城再到市里，來回就是4個小時車程，簡直就是浪費生命。后來就好了，小縣城里出現了火車票代售點，甚至鄉鎮上也有了代售點，可以直接在代售點購買火車票，方便了不少，全市人民再也不用在一個點苦逼的排隊買票了。

簡單的理解CDN就是這些代售點(緩存服務器)的承包商,他為買票者提供了便利,幫助他們在最近的地方(最近的CDN節點)用最短的時間(最短的請求時間)買到票(拿到資源),這樣去火車站售票大廳排隊的人也就少了。也就減輕了售票大廳的壓力(起到分流作用,減輕服務器負載壓力)。

用戶在瀏覽網站的時候，CDN會選擇一個離用戶最近的CDN邊緣節點來響應用戶的請求，這樣海南移動用戶的請求就不會千里迢迢跑到北京電信機房的服務器（假設源站部署在北京電信機房）上了。

3. http緩存

簡書http緩存
實踐這一次，徹底搞懂瀏覽器緩存機制
在這里插入圖片描述

只緩存get請求相應的資源
緩存是從第二次請求開始
第一次請求資源時，服務器返回資源，并在響應頭中回傳資源的緩存參數
第二次請求時，瀏覽器判斷這些請求參數
Cache-Control': 'max-age=300'在服務端設置
js設置 <head> 里的<meta>標簽
Cache-Control的默認值就是no-cache(需要進行協商緩存)
HTTP中并沒有指定如何生成ETag，哈希是比較理想的選擇。（在服務器端實現中，很多情況下并不會用哈希來計算ETag，這會嚴重浪費服務器端資源，很多網站默認是禁用ETag的）
思考：多服務器時,INode不一樣，所以不同的服務器生成的ETag不一樣，所以用戶有可能重復下載(這時ETag就會不準)，明白了上面的原理和設置后，解決方法也很容易，讓ETag后面二個參數，MTime和Size就好了。只要ETag的計算沒有INode參于計算,就會很準了。
關于ETAG的工作原理
使用 Last-Modified 的問題在于它的精度在秒(s)的級別，比較適合不太敏感的靜態資源。
思考，這幾個參數怎么配合使用？

3.1 三級緩存原理 (訪問緩存優先級)

先在內存中查找,如果有,直接加載。
如果內存中不存在,則在硬盤中查找,如果有直接加載。
如果硬盤中也沒有,那么就進行網絡請求。
請求獲取的資源緩存到硬盤和內存。

3.2 強緩存（有沒有過期）

Expires：這個時間代表著這個資源的失效時間，在此時間之前，即命中緩存。這種方式有一個明顯的缺點，由于失效時間是一個絕對時間，所以當服務器與客戶端時間偏差較大時，就會導致緩存混亂。
Cache-Control：它是一個相對時間，例如 Cache-Control:max-age=3600，代表著資源的有效期是 3600 秒。
- no-cache：需要進行協商緩存，發送請求到服務器確認是否使用緩存。
- no-store：禁止使用緩存，每一次都要重新請求數據。
- public：可以被所有的用戶緩存，包括終端用戶和 CDN 等中間代理服務器。
- private：只能被終端用戶的瀏覽器緩存，不允許 CDN 等中繼緩存服務器對其緩存。

Cache-Control 與 Expires 可以在服務端配置同時啟用，同時啟用的時候 Cache-Control 優先級高。

3.3 協商緩存（有沒有變化）

Last-Modify（服務器）/If-Modify-Since（瀏覽器）

瀏覽器第一次請求一個資源的時候，服務器返回的 header 中會加上 Last-Modify，Last-modify 是一個時間標識該資源的最后修改時間。
當瀏覽器再次請求該資源時，request 的請求頭中會包含 If-Modify-Since，該值為緩存之前返回的 Last-Modify。服務器收到 If-Modify-Since 后，根據資源的最后修改時間判斷是否命中緩存。

ETag/If-None-Match：ETag 可以保證每一個資源是唯一的，資源變化都會導致 ETag 變化。

4 localStorage、sessionStorage、cookie的區別，應用場景

17. 瀏覽器輸入網址

對url地址進行域名解析，解析為ip地址
本機hosts文件 - 瀏覽器本身DNS緩存 - 本機配置的首選DNS服務器（ip地址）
瀏覽器向服務器發起tcp連接，三次握手
瀏覽器發送請求報文（請求行、請求頭、空行、請求體）
服務器響應數據
渲染頁面
html解析->外部樣式、腳本加載->外部樣式執行(CSSOM樹)->外部腳本執行->html繼續解析->DOM樹構建完成->CSSOM + DOM繪制Render Tree-> 頁面的重排、重繪 ->加載圖片->頁面加載完成。

若在HTML頭部加載JS文件，由于JS阻塞，會推遲頁面的首繪。為了加快頁面渲染，一般將JS文件放到HTML底部進行加載，或是對JS文件執行async或defer加載。

拓展5：
在這里插入圖片描述
請求報文頭中，accept代表客戶端希望接受的數據類型，這是瀏覽器自動封裝的請求頭。如果服務器返回的content-type是accept中的任何一個（比如text/html ），瀏覽器都能解析，并直接展示在網頁上。如果服務器返回的content-type是其他類型，此時瀏覽器有三種處理狀態：
8. 正常顯示。例如返回類型為text/javascript，瀏覽器能直接處理并展示。
9. 下載。例如返回類型為application/octet-stream（二進制流，不知道下載文件類型），這種瀏覽器不能直接處理的，會被下載。
10. 報錯。當我們返回一個字符串hello world，卻使用text/xml，格式時，瀏覽器不能正確解析，就會報錯，并把報錯信息呈現在網頁中。

瀏覽器能直接處理很多種格式，并直接呈現在網頁中，并不限于accept中規定的字段，具體有哪些，就需要自己親自動手試試了。

18. data為什么要作為方法返回

data的值是一個對象，是引用數據類型,如果不用函數return ,每個組件的data 都是同一個對象,一個數據改變了其他也改變了;

所以為了不讓多處的組件共享同一data對象，只能返回函數。這都是因為js本身的特性帶來的，跟vue本身設計無關。

19. nginx（輕量級占用更少內存，支持更多的并發連接）、 apache區別

Apache和Nginx在應用中如何選擇？

一般訪問量網站優先使用Apache，穩定可靠。
Apache模塊非常豐富，為了用它的模塊選它。
Apache的rewrite非常強大，rewrite多就選它。
大訪問量優先使用Nginx，支持更多的并發連接。
處理的都是靜態資源（圖片 html），首選Nginx（Nginx定位于靜態資源分發，反向代理，在處理靜態資源更有優勢）
需要反向代理使用Nginx。

20. websocket（持久化、全雙工通訊協議）

1. websocket使用

看完讓你徹底理解 WebSocket 原理

ajax輪詢：定時，每隔一段時間問一下
長輪詢：打電話，收到回復才掛斷，并發起新的

服務器有更新時，前端不需要去輪詢（消耗資源），因為瀏覽器可以主動推送消息。
前端代碼：
url:

未加密：ws://
已加密：wss://

if (window.WebSocket) {// wsurl服務器地址websocket = new WebSocket(wsurl);//連接建立websocket.onopen = function (evevt) {......}//收到消息websocket.onmessage = function (event) {var msg = JSON.parse(event.data); //解析收到的json消息數據var umsg = msg.message; //消息文本var uname = msg.name; //發送人......（一些操作：比如顯示消息在對話框）}//發生錯誤websocket.onerror = function (event) {......（一些操作：比如顯示錯誤提示在對話框）}//連接關閉websocket.onclose = function (event) {......}function send() {var name = $('#name').val();var message = $('#message').val();var msg = {message: message,name: name};try {websocket.send(JSON.stringify(msg)); // 復雜的數據結構要先進行序列化} catch (ex) {console.log(ex);}}
}
else {alert('該瀏覽器不支持web socket');
}

var 實例 = new WebSocket(url)
實例.onopen = function（event）{ }
實例.onmessage = function（event）{ }
實例.onerror = function（event）{ }
實例.onclose = function（event）{ }
實例.send(data) // 向服務器發送消息

2. HTTP 1.0 1.1 2.0

2.1. HTTP 1.0 連接無法復用

瀏覽器的每次請求都需要與服務器建立一個TCP連接，服務器完成請求處理后立即斷開TCP連接。（每次請求都經歷三次握手和慢啟動）在這里插入圖片描述

2.2. HTTP 1.1 持久連接/長連接

在這里插入圖片描述

支持持久連接（HTTP/1.1的默認模式使用帶流水線的持久連接），在一個TCP連接上可以傳送多個HTTP請求和響應，減少了建立和關閉連接的消耗和延遲。
HTTP 1.1還允許客戶端不用等待上一次請求結果返回，就可以發出下一次請求，但服務器端必須按照接收到客戶端請求的先后順序依次回送響應結果，以保證客戶端能夠區分出每次請求的響應內容，這樣也顯著地減少了整個下載過程所需要的時間。一旦有某請求超時等，后續請求只能被阻塞，毫無辦法，也就是人們常說的線頭阻塞。
緩存處理：在HTTP1.0中主要使用header里的If-Modified-Since,Expires（協商緩存/強緩存）來做為緩存判斷的標準，HTTP1.1則引入了更多的緩存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match（協商緩存）等更多可供選擇的緩存頭來控制緩存策略。
支持斷點續傳 Accept-Ranges : bytes | none （圖片等資源）
HTTP 1.1還提供了與身份認證、狀態管理和Cache緩存等機制相關的請求頭和響應頭。
在HTTP 1.1中增加Host請求頭字段。
我們可以在一臺WEB服務器上可以在同一個IP地址和端口號上使用不同的主機名來創建多個虛擬WEB站點。

瀏覽器阻塞（HOL blocking/head of line blocking）：
瀏覽器對于同一個域名，一般PC端瀏覽器會針對單個域名的server同時建立6～8個連接，手機端的連接數則一般控制在4～6個（這個根據瀏覽器內核不同可能會有所差異），超過瀏覽器最大連接數限制，后續請求就會被阻塞。HTTP1.0有這個問題。

2.3. HTTP 2.0

HTTP/2多個請求可同時在一個連接上并行執行。某個請求任務耗時嚴重，不會影響到其它連接的正常執行
服務端推送

在這里插入圖片描述

21. 軟件開發流程、軟件模型

需求分析-概要設計-詳細設計-程序編碼-程序測試-軟件交付-客戶驗收-碼農維護
增量模型：設計核心功能+逐步累加

22. js處理異步的幾種方式

回調函數
事件監聽
promise
async/await

23. vue3

24. 版本迭代時，修復bug，使用git是一個怎樣的過程

25. 閉包的實際應用，除了閉包還有什么內存泄漏的情況

閉包用來封裝變量，收斂權限。
利用閉包可以給對象設置私有屬性并利用特權(Privileged)方法訪問私有屬性。
如果外界想訪問secret變量，只能通過我定義的函數get_secret來進行訪問，用new_secret進行設置。外界能做的就只是使用我的函數，然后傳幾個不同的參數罷了。

26. 怎么判斷一個頁面加載完了

window.onload【頁面包含圖片等文件在內的所有元素都加載完成】
當一個文檔完全下載到瀏覽器中時，才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素加載完畢才會執行。這種情況對編寫功能性代碼非常有利，因為無需考慮加載的次序。
jQuery的ready方法【表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）】
會在DOM完全就緒并可以使用時調用。雖然這也意味著所有元素對腳本而言都是可以訪問的，但是，并不意味著所有關聯的文件都已經下載完畢。換句話說，當HMTL下載完成并解析為DOM樹之后，代碼就會執行。

$(document).ready(function(){dosth//你要做的事情
})

document.onreadystatechange

document.onreadystatechange = function() 　　//當頁面加載狀態改變的時候執行function{ if(document.readyState == "complete"){ 　　//當頁面加載狀態為完全結束時進入 init();　　 //你要做的操作。}}

27. 頁面加載優化、加載圖片優化

頁面加載優化

精靈圖
使用外部的JavaScript和CSS（瀏覽器就有可能緩存它們，從而在以后加載的時候能夠直接使用緩存，而HTML文檔的大小減小，從而提高加載速度）
樣式表放在頭部（頁面內容逐步呈現，改善用戶體驗，防止“白屏”）、腳本放在底部（js的下載和執行會阻塞Dom樹的構建）
壓縮CSS和JavaScript【移除不必要的字符（如TAB、空格、回車、代碼注釋等）】
壓縮：客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持Accept-Encoding: gzip 服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器通過響應中的Content-Encoding來通知 Web客戶端。
Content-Encoding: gzip
瀏覽器緩存
cdn（將整個站點的靜態資源放到一個專門的域名下，以求減小網絡開銷）

加載圖片優化

28. get/post有什么區別

GET	POST
回退時是無害的	再次提交請求
可以被收藏	不能被收藏
請求參數會被完整保留在瀏覽器歷史記錄里	不保留參數
參數是有長度限制的	參數無限
更不安全暴露參數	更安全
參數通過URL傳遞	request body
參數的數據類型，GET只接受ASCII字符	無限制
GET請求會被瀏覽器主動cache	POST不會，除非手動設置

29. 前端請求時參數錯誤狀態碼400

請求沒有進入后臺服務器里

原因：（1）前端提交的字段名稱或者字段類型和后臺的實體類不一樣或者前端提交的參數跟后臺需要的參數個數不一致，導致無法封裝

（2）前端提交到后臺的數據應該是JSON字符串類型，而前端沒有將對象轉化為字符串類型；

解決方法：對照字段名稱，類型保證一致

30. 同源策略具體要解決什么安全問題

31. http2.0

32.前端優化

從外部引入css、js，對優化有什么幫助？
當我們瀏覽網頁的時候，在客戶端這邊都會有頁面的緩存文件。在我們訪問這一個頁面的時候，客戶端就會下載css和js文件到本地。其實區別就在這里，當我們訪問完這一頁面，再去訪問網站其他頁面，頁面就會重新加載一次。如果我們將css樣式和js腳本寫到html網頁當中，那么它將每次都得重新加載一次這些css樣式和js腳本。但是，通過外部引入的方式導入css文件和js文件則不同，因為之前訪問頁面的時候客戶端已經下載js文件和css文件到本地，所以再次訪問頁面的時候就會判斷不會再次下載這個文件，也就是說訪問頁面的時候對于css,js靜態文件如果未修改過頁面在刷新或者其他頁面引用的相同路徑的文件的時候會直接用緩存,不需要再次從服務器下載。這樣就減少了網頁載入的速度，因為更利于網頁的優化。
使用精靈圖，如果圖片很大呢？
博客園精靈圖使用注意事項
請求的次數越少越好嗎？如果和之前同域的情況下，沒有耗費
精靈圖，為什么能更快呢？
所有的js都放下面嗎？如果頁面依賴這個js呢？
304具體的交互流程，什么情況下產生的304

33. 設計模式-單例模式

34. 操作系統里進程和線程的區別

35. 死鎖及發生死鎖的條件

36. 32位的機器最大能承載多大的內存

37. https怎么驗證ca證書，如果黑客獲取證書呢？

38. 組件復用

39. 閉包的應用場景，一定會用到閉包

筆試題

1. select下拉列表

在這里插入圖片描述

下拉列表屬性
selected（默認選中）
autocomplete
autofocus（規定下拉列表在頁面加載時自動獲得焦點）
disabled
select對象
selectedIndex
option對象
js事件

//js事件
οnchange="fun(this.options[this.options.selectedIndex].text)"
//獲取文本的值
this.options[this.options.selectedIndex].text  是文本的值
//獲取value的值
this.options[this.options.selectedIndex].value 是value值

<select autocomplete="off"><option value="郵件" selected="selected">郵件</option><option value="FTP">FTP</option><option value="TELNET">TELNET</option>
</select>

運用new Option(“文本”,“值”)方法添加選項option

var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));

刪除所有選項options

var obj = document.getElementById("mySelect");
obj.options.length = 0;

刪除選中選項option

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);

刪除select

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除當前對象

修改選中選項option

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改對應的值
obj.options[index].selected = true; //保持選中狀態

2. 使圖片具有”提交”按鈕同樣的功能

直接使用< input type=“image”>即可，此標簽放置在標簽內就具有提交功能，如果不在< form>標簽內，則可以使用< input type=“image” onClick = “formName.submit()”>方式提交。

說明：
INPUT type=image 元素 | input type=image 對象
創建一個圖像控件，該控件單擊后將導致表單立即被提交。

3. javascript進行表單驗證的目的是

b)檢查提交的數據必須符合實際

4. class不屬于javascript關鍵字

5. [‘1’,‘2’, ‘3’].map(parseInt)

['1','2', '3'].map(parseInt)
(3) [1, NaN, NaN]

由于map的回調函數的參數index索引值作了parseInt的基數radix，導致出現超范圍的radix賦值和不合法的進制解析，才會返回NaN。
parseInt(string, radix)

參數	描述
string	必需。要被解析的字符串。
radix	可選。表示要解析的數字的基數。該值介于 2 ~ 36 之間。如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數。如果該參數小于 2 或者大于 36，則 parseInt() 將返回 NaN。

6. pixelTop和top

都不是Location對象的屬性

pixelTop	top
返回以像素為單位的位置坐標的數值	返回帶單位的位置坐標字符串

在這里插入圖片描述

7. 正則

+號代表前面的字符必須至少出現一次（1次或n次）
* 號代表字符可以不出現，也可以出現一次或者多次（0次、或1次、或多次）
?問號代表前面的字符最多只可以出現一次（0次、或1次）
$匹配輸入字符串的結尾位置。如果設置了 RegExp 對象的 Multiline 屬性，則 $ 也匹配 ‘\n’ 或 ‘\r’。要匹配 $ 字符本身，請使用 $。
*、+ 限定符都是貪婪的，因為它們會盡可能多的匹配文字，只有在它們的后面加上一個?就可以實現非貪婪或最小匹配。
| 符號 |含義 |
|–|--|
| + |1~n {1,} |
| * |0~n {0,}|
| ？ |0或1 {0,1} |
|^ | 開始 |
| $ | 結尾 |
| \ |轉義 |
| ( )| 子表達式|
| .| 除換行符 \n 之外的任何單字符|
| | | 兩項之間的一個選擇 |
|{n} | 匹配確定的 n 次|
| {n,}|至少匹配n 次 |
|{n,m} | 最少匹配 n 次且最多匹配 m 次|
| \b| 匹配一個單詞邊界，即字與空格間的位置。|
| \B| 非單詞邊界匹配|
| \1 |指定第一個子匹配項 |
|g | 將該表達式應用到輸入字符串中能夠查找到的盡可能多的匹配|
| i| 不區分大小寫|
| [xyz]|匹配所包含的任意一個字符 |
| \d| 匹配一個數字字符 |
|\D | 匹配一個非數字字符。等價于 [^0-9]|
| \s| 匹配任何空白字符，包括空格、制表符、換頁符等等 |
|\S | 匹配任何非空白字符|
|\w |匹配字母、數字、下劃線。等價于’[A-Za-z0-9_]’。 |
| \W| 匹配非字母、數字、下劃線。等價于 ‘[^A-Za-z0-9_]’。 |