面試問題匯總
h5路由與hash路由區(qū)別（單頁面應(yīng)該程序）
hash路由
- 1、hash變化會觸發(fā)頁面跳轉(zhuǎn)，即瀏覽器的前進(jìn)后退
- 2、hash會改變url，但不會觸發(fā)頁面重新加載，不利于seo
- 3、hash 通過 window.onhashchange 的方式，來監(jiān)聽 hash 的改變，借此實(shí)現(xiàn)無刷新跳轉(zhuǎn)的功能。
- 4、hash 永遠(yuǎn)不會提交到 server 端（可以理解為純前端路由）。
H5路由
- 1、history API 是 H5 提供的新特性，允許開發(fā)者直接更改前端路由，即更新瀏覽器 URL 地址而不重新發(fā)起請求
- 2、新的 url 可以是與當(dāng)前 url 同源的任意 url ，也可以是與當(dāng)前 url 一樣的地址，但是這樣會導(dǎo)致的一個問題是，會把重復(fù)的這一次操作記錄到棧當(dāng)中。
- 3、通過 history.state ，添加任意類型的數(shù)據(jù)到記錄中。
- 4、可以額外設(shè)置 title 屬性，以便后續(xù)使用。
- 5、通過 pushState 、 replaceState 來實(shí)現(xiàn)無刷新跳轉(zhuǎn)的功能
HTML5 History 模式 部署刷報(bào)404解決方案
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
原生 Node.js
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})
基于 Node.js 的 Express
對于 Node.js/Express，請考慮使用 connect-history-api-fallback 中間件。
前端大數(shù)據(jù)處理方法
- 1、setTimeout分頁渲染，這個方法就是，把10w按照每頁數(shù)量limit分成總共Math.ceil(total / limit)頁，然后利用setTimeout，每次渲染1頁數(shù)據(jù)，這樣的話，渲染出首頁數(shù)據(jù)的時間大大縮減了
-2、requestAnimationFrame，使用requestAnimationFrame代替setTimeout，減少了重排的次數(shù)，極大提高了性能，建議大家在渲染方面多使用requestAnimationFrame
-3、文檔碎片 + requestAnimationFrame，文檔碎片的好處
1、之前都是每次創(chuàng)建一個div標(biāo)簽就appendChild一次，但是有了文檔碎片可以先把1頁的div標(biāo)簽先放進(jìn)文檔碎片中，然后一次性appendChild到container中，這樣減少了appendChild的次數(shù)，極大提高了性能
2、頁面只會渲染文檔碎片包裹著的元素，而不會渲染文檔碎片
-4、懶加載
-5、虛擬列表
event loop
首先，js是單線程的，主要的任務(wù)是處理用戶的交互，而用戶的交互無非就是響應(yīng)DOM的增刪改，使用事件隊(duì)列的形式，一次事件循環(huán)只處理一個事件響應(yīng)，使得腳本執(zhí)行相對連續(xù)，所以有了事件隊(duì)列，用來儲存待執(zhí)行的事件，那么事件隊(duì)列的事件從哪里被push進(jìn)來的呢。那就是另外一個線程叫事件觸發(fā)線程做的事情了，他的作用主要是在定時觸發(fā)器線程、異步HTTP請求線程滿足特定條件下的回調(diào)函數(shù)push到事件隊(duì)列中，等待js引擎空閑的時候去執(zhí)行，當(dāng)然js引擎執(zhí)行過程中有優(yōu)先級之分，首先js引擎在一次事件循環(huán)中，會先執(zhí)行js線程的主任務(wù)，然后會去查找是否有微任務(wù)microtask（promise），如果有那就優(yōu)先執(zhí)行微任務(wù)，如果沒有，在去查找宏任務(wù)macrotask（setTimeout、setInterval）進(jìn)行執(zhí)行。
事件流
事件流分為兩種，捕獲事件流和冒泡事件流。
捕獲事件流從根節(jié)點(diǎn)開始執(zhí)行，一直往子節(jié)點(diǎn)查找執(zhí)行，直到查找執(zhí)行到目標(biāo)節(jié)點(diǎn)。
冒泡事件流從目標(biāo)節(jié)點(diǎn)開始執(zhí)行，一直往父節(jié)點(diǎn)冒泡查找執(zhí)行，直到查到到根節(jié)點(diǎn)。
DOM事件流分為三個階段，一個是捕獲節(jié)點(diǎn)，一個是處于目標(biāo)節(jié)點(diǎn)階段，一個是冒泡階段。
描述一下this
this，函數(shù)執(zhí)行的上下文，可以通過apply，call，bind改變this的指向。對于匿名函數(shù)或者直接調(diào)用的函數(shù)來說，this指向全局上下文（瀏覽器為window，nodejs為global），剩下的函數(shù)調(diào)用，那就是誰調(diào)用它，this就指向誰。當(dāng)然還有es6的箭頭函數(shù)，箭頭函數(shù)的指向取決于該箭頭函數(shù)聲明的位置，在哪里聲明，this就指向哪里。
說一下瀏覽器的緩存機(jī)制
瀏覽器緩存機(jī)制有兩種，一種為強(qiáng)緩存，一種為協(xié)商緩存。
對于強(qiáng)緩存，瀏覽器在第一次請求的時候，會直接下載資源，然后緩存在本地，第二次請求的時候，直接使用緩存。
對于協(xié)商緩存，第一次請求緩存且保存緩存標(biāo)識與時間，重復(fù)請求向服務(wù)器發(fā)送緩存標(biāo)識和最后緩存時間，服務(wù)端進(jìn)行校驗(yàn)，如果失效則使用緩存。
強(qiáng)緩存方案
Exprires：服務(wù)端的響應(yīng)頭，第一次請求的時候，告訴客戶端，該資源什么時候會過期。Exprires的缺陷是必須保證服務(wù)端時間和客戶端時間嚴(yán)格同步。
Cache-control：max-age，表示該資源多少時間后過期，解決了客戶端和服務(wù)端時間必須同步的問題，
協(xié)商緩存方案
If-None-Match/ETag：緩存標(biāo)識，對比緩存時使用它來標(biāo)識一個緩存，第一次請求的時候，服務(wù)端會返回該標(biāo)識給客戶端，客戶端在第二次請求的時候會帶上該標(biāo)識與服務(wù)端進(jìn)行對比并返回If-None-Match標(biāo)識是否表示匹配。
Last-modified/If-Modified-Since：第一次請求的時候服務(wù)端返回Last-modified表明請求的資源上次的修改時間，第二次請求的時候客戶端帶上請求頭If-Modified-Since，表示資源上次的修改時間，服務(wù)端拿到這兩個字段進(jìn)行對比。
ETag是這個字符串是怎么生成的？
說說svg和canvas各自的優(yōu)缺點(diǎn)？
共同點(diǎn)：都是有效的圖形工具，對于數(shù)據(jù)較小的情況下，都很又高的性能，它們都使用 JavaScript 和 HTML；它們都遵守萬維網(wǎng)聯(lián)合會 (W3C) 標(biāo)準(zhǔn)。
svg優(yōu)點(diǎn)：
矢量圖，不依賴于像素，無限放大后不會失真。
以dom的形式表示，事件綁定由瀏覽器直接分發(fā)到節(jié)點(diǎn)上。
svg缺點(diǎn)：
dom形式，涉及到動畫時候需要更新dom，性能較低。
canvas優(yōu)點(diǎn)：
定制型更強(qiáng)，可以繪制繪制自己想要的東西。
非dom結(jié)構(gòu)形式，用JavaScript進(jìn)行繪制，涉及到動畫性能較高。
canvas缺點(diǎn)：
事件分發(fā)由canvas處理，繪制的內(nèi)容的事件需要自己做處理。
依賴于像素，無法高效保真，畫布較大時候性能較低。
