1、http和https 待定
說一下http和https_前端校招面試題目合集_?？途W(wǎng) (nowcoder.com)
2、從發(fā)送請求到頁面展現(xiàn)，都經(jīng)過了哪些
3、TCP和UDP的區(qū)別 ??！待定
參考回答:
（1）TCP是面向連接的，udp是無連接的即發(fā)送數(shù)據(jù)前不需要先建立鏈接。
（2）TCP提供可靠的服務(wù)。也就是說，通過TCP連接傳送的數(shù)據(jù)，無差錯，不丟失，不重復，且按序到達;UDP盡最大努力交付，即不保證可靠交付。 并且因為tcp可靠，面向連接，不會丟失數(shù)據(jù)因此適合大數(shù)據(jù)量的交換。
（3）TCP是面向字節(jié)流，UDP面向報文，并且網(wǎng)絡(luò)出現(xiàn)擁塞不會使得發(fā)送速率降低（因此會出現(xiàn)丟包，對實時的應(yīng)用比如IP電話和視頻會議等）。
（4）TCP只能是1對1的，UDP支持1對1,1對多。
（5）TCP的首部較大為20字節(jié)，而UDP只有8字節(jié)。
（6）TCP是面向連接的可靠性傳輸，而UDP是不可靠的。
4、WebSocket的實現(xiàn)和應(yīng)用 待定，需要深入
5、一個圖片url訪問后直接下載怎樣實現(xiàn)？
參考回答：
請求的返回頭里面，用于瀏覽器解析的重要參數(shù)就是OSS的API文檔里面的返回http頭，決定用戶下載行為的參數(shù)。
下載的情況下：
- x-oss-object-type:Normal
- x-oss-request-id:598D5ED34F29D01FE2925F41
- x-oss-storage-class:Standard
6、幾個很實用的BOM屬性對象方法?
幾個很實用的BOM屬性對象方法?前端校招面試題目合集?？途W(wǎng) (nowcoder.com)
7、HTML5 drag
參考回答：
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發(fā)，。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發(fā)。
dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發(fā)。
dragover：事件主體是目標元素，在被拖放在某元素內(nèi)移動時觸發(fā)。
dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發(fā)。
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發(fā)。
dragend：事件主體是被拖放元素，在整個拖放操作結(jié)束時觸發(fā)
8、說一下http2.0和 htttp3.0 （這個可能不對，需要查證）
說一下http2.0_前端校招面試題目合集_?？途W(wǎng) (nowcoder.com)
9、fetch發(fā)送2次請求的原因
參考回答：
fetch發(fā)送post請求的時候，總是發(fā)送2次，第一次狀態(tài)碼是204，第二次才成功？
原因很簡單，因為你用fetch的post請求的時候，導致fetch 第一次發(fā)送了一個Options請求，詢問服務(wù)器是否支持修改的請求頭，如果服務(wù)器支持，則在第二次中發(fā)送真正的請求。
10、Cookie、sessionStorage、localStorage的區(qū)別
應(yīng)該已經(jīng)謝過了
11、說一下web worker
參考回答：
在HTML頁面中，如果在執(zhí)行腳本時，頁面的狀態(tài)是不可相應(yīng)的，直到腳本執(zhí)行完成后，頁面才變成可相應(yīng)。web worker是運行在后臺的js，獨立于其他腳本，不會影響頁面你的性能。并且通過postMessage將結(jié)果回傳到主線程。這樣在進行復雜操作的時候，就不會阻塞主線程了。
如何創(chuàng)建web worker：
檢測瀏覽器對于web worker的支持性
創(chuàng)建web worker文件（js，回傳函數(shù)等）
創(chuàng)建web worker對象
12、HTML5標簽語義化的好處
好像也寫過了
13、iframe是什么？有什么缺點？
參考回答：
定義：iframe元素會創(chuàng)建包含另一個文檔的內(nèi)聯(lián)框架
提示：可以將提示文字放在<iframe></iframe>之間，來提示某些不支持iframe的瀏覽器
缺點：
會阻塞主頁面的onload事件
搜索引擎無法解讀這種頁面，不利于SEO
iframe和主頁面共享連接池，而瀏覽器對相同區(qū)域有限制所以會影響性能。
14、你了解的網(wǎng)絡(luò)安全都有哪些？如何抵御（自己找）
XSS。等
15、cookie和session的區(qū)別 （自己查）
16、講講viewport和移動端布局
響應(yīng)式布局的常用解決方案對比(媒體查詢、百分比、rem和vw/vh）
17、http常用請求頭 （背誦）
http常用請求頭前端校招面試題目合集?？途W(wǎng) (nowcoder.com)
18、強緩存和協(xié)商緩存都是什么 （自己查）
參考：強緩存、協(xié)商緩存什么時候用哪個前端校招面試題目合集牛客網(wǎng) (nowcoder.com)
19、get和post的區(qū)別
get參數(shù)通過url傳遞，post放在request body中。
get請求在url中傳遞的參數(shù)是有長度限制的，而post沒有。
get比post更不安全，因為參數(shù)直接暴露在url中，所以不能用來傳遞敏感信息。
get請求只能進行url編碼，而post支持多種編碼方式
get請求會瀏覽器主動cache，而post支持多種編碼方式。
get請求參數(shù)會被完整保留在瀏覽歷史記錄里，而post中的參數(shù)不會被保留。
GET和POST本質(zhì)上就是TCP鏈接，并無差別。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導致他們在應(yīng)用過程中體現(xiàn)出一些不同。
GET產(chǎn)生一個TCP數(shù)據(jù)包；POST產(chǎn)生兩個TCP數(shù)據(jù)包。
20、在地址欄里輸入一個URL,到這個頁面呈現(xiàn)出來，中間會發(fā)生什么？
（直接看公眾號）
21、畫一條0.5px的線 （自己搜）為什么這個會是一個問題
22、transition和animation的區(qū)別
Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。
23、flex布局 （全背）
24、BFC是什么
25、垂直居中的方法，水平居中的方法。（自己搜，經(jīng)典題目）
垂直居中的方法前端校招面試題目合集牛客網(wǎng) (nowcoder.com)
26、 css動畫和js動畫有什么區(qū)別
渲染線程分為main thread和compositor thread，如果css動畫只改變transform和opacity，這時整個CSS動畫得以在compositor trhead完成（而js動畫則會在main thread執(zhí)行，然后出發(fā)compositor thread進行下一步操作），特別注意的是如果改變transform和opacity是不會layout或者paint的。
區(qū)別：
功能涵蓋面，js比css大
實現(xiàn)/重構(gòu)難度不一，CSS3比js更加簡單，性能跳優(yōu)方向固定
對幀速表現(xiàn)不好的低版本瀏覽器，css3可以做到自然降級
css動畫有天然事件支持
css3有兼容性問題
27、文本溢出省略號（自己查）
28、position屬性
fixed \ relative \ absolute \ sticky \ static \ inherit
29、CSS選擇器，優(yōu)先級
30、三欄布局的實現(xiàn)方式，盡可能多寫，浮動布局時，三個div的生成順序有沒有影響
三欄布局的實現(xiàn)方式，盡可能多寫，浮動布局時，三個div的生成順序有沒有影響前端校招面試題目合集?？途W(wǎng) (nowcoder.com)
31、用css實現(xiàn)一個硬幣旋轉(zhuǎn)的效果
用css實現(xiàn)一個硬幣旋轉(zhuǎn)的效果前端校招面試題目合集?？途W(wǎng) (nowcoder.com)
32、了解重繪和重排嗎，知道怎么去減少重繪和重排嗎，讓文檔脫離文檔流有哪些方法
DOM的變化影響到了預算內(nèi)宿的幾何屬性比如寬高，瀏覽器重新計算元素的幾何屬性，其他元素的幾何屬性也會受到影響，瀏覽器需要重新構(gòu)造渲染書，這個過程稱之為重排，瀏覽器將受到影響的部分重新繪制在屏幕上 的過程稱為重繪，引起重排重繪的原因有：
添加或者刪除可見的DOM元素，
元素尺寸位置的改變
瀏覽器頁面初始化，
瀏覽器窗口大小發(fā)生改變，重排一定導致重繪，重繪不一定導致重排，
減少重繪重排的方法有：
不在布局信息改變時做DOM查詢，
使用csstext,className一次性改變屬性
使用fragment
對于多次重排的元素，比如說動畫。使用絕對定位脫離文檔流，使其不影響其他元素
33、CSS畫基礎(chǔ)形狀，正方形，圓形，橢圓等等
34、前端事件流
參考回答：
HTML中與javascript交互是通過事件驅(qū)動來實現(xiàn)的，例如鼠標點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什么時候進行調(diào)用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
事件捕獲階段
處于目標階段
事件冒泡階段
addEventListener：addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
IE只支持事件冒泡。
35、說一下事件委托
事件委托指的是，不在事件的發(fā)生地（直接dom）上設(shè)置監(jiān)聽函數(shù)，而是在其父元素上設(shè)置監(jiān)聽函數(shù)，通過事件冒泡，父元素可以監(jiān)聽到子元素上事件的觸發(fā)，通過判斷事件發(fā)生元素DOM的類型，來做出不同的響應(yīng)。
舉例：最經(jīng)典的就是ul和li標簽的事件監(jiān)聽，比如我們在添加事件時候，采用事件委托機制，不會在li標簽上直接添加，而是在ul父元素上添加。
好處：比較合適動態(tài)元素的綁定，新添加的子元素也會有監(jiān)聽函數(shù)，也可以有事件觸發(fā)機制。
36、說一下圖片的懶加載和預加載
參考回答：
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
懶加載：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)。
兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。
懶加載對服務(wù)器前端有一定的緩解壓力作用，預加載則會增加服務(wù)器前端壓力。
37、bind，apply，call的區(qū)別
38、手寫bind，apply，call
39、異步加載js的方法
參考回答：
defer：只支持IE如果您的腳本不會改變文檔的內(nèi)容，可將 defer 屬性加入到<script>標簽中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(zhí)行腳本，它將推遲對腳本的解釋，直到文檔已經(jīng)顯示給用戶為止。
async，HTML5屬性僅適用于外部腳本，并且如果在IE中，同時存在defer和async，那么defer的優(yōu)先級比較高，腳本將在頁面完成時執(zhí)行。
創(chuàng)建script標簽，插入到DOM中
40、Ajax解決瀏覽器緩存問題 （待查）
Ajax解決瀏覽器緩存問題前端校招面試題目合集?？途W(wǎng) (nowcoder.com)
41、js的防抖節(jié)流
http://www.cnblogs.com/coco1s/p/5499469.html
