前端面試問題整理2

簡介

接上一章繼續講

HTML

一、HTML5新特性，語義化

用於繪畫的 canvas 元素 用於媒介回放的 video 和 audio 元素 對本地離線存儲的更好的支持 新的特殊內容元素，好比 article、footer、header、nav、section 新的表單控件，好比 calendar、date、time、email、url、search

二、瀏覽器的標準模式和怪異模式 渲染的方式不同，標註模式是標準推出以後、怪異模式是標準推出以前。主要問題在於1：盒模型的處理差別：二、行內元素的垂直對齊。 三、xhtml和html的區別

XHTML 元素必須被正確地嵌套。
    XHTML 元素必須被關閉。
    標籤名必須用小寫字母。
    XHTML 文檔必須擁有根元素。
複製代碼

四、使用data-的好處 可以自定義數據

var animalType = node.getAttribute("data-animal-type");
複製代碼

五、meta標籤 content 屬性 http-equiv 屬性

元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。 ``` ```

六、Canvas

Canvas是使用JavaScript程序繪圖(動態生成)，SVG是使用XML文檔描述來繪圖。從這點來看：SVG更適合用來作動態交互，並且SVG繪圖很容易編輯，只須要增長或移除相應的元素就能夠了。同時SVG是基於矢量的，全部它可以很好的處理圖形大小的改變。Canvas是基於位圖的圖像，它不可以改變大小，只能縮放顯示； canvas 畫個小球

七、css js放置位置和緣由 這裏講瀏覽器如何渲染 zhuanlan.zhihu.com/p/29418126 這裏面要說一點JS的下載的時候是阻塞的CSS不是 8 meta viewport原理

CSS

一、盒模型，box-sizing content-box border-box 二、CSS3新特性，僞類，僞元素，錨僞類 三、如何隱藏 visibility display position opacity clip-path

四、浮動元素引發的問題和解決辦法？絕對定位和相對定位，元素浮動後的display值 五、link和@import引入css的區別

1.導入的語法不相同

link （連接式）語法爲：

<link rel="stylesheet" href="style.css" type="text/css"/>

@import （導入式）語法爲：

<style type="text/css">

@import url("style.css");

</style>

2.  link 和 import 語法結構不一樣，前者 <link> 是 html 標籤，只能放入 html 源代碼中使用， link 標籤除了能夠加載 CSS 外，還能夠作不少其它的事情，好比定義 RSS ，定義 rel 鏈接屬性等， @import 看做爲 css 的樣式，就只能加載 CSS 了；

3.使用 link 方式，瀏覽器將 CSS 文件和 HTML 的主體部分一同裝載，因此顯示出來的頁面從開始就是帶樣式效果的；而採用 @import 方式，瀏覽器則會先裝載完整個 HTML 文件後再裝載 CSS 文件；

4.當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，由於 @import 眼裏只有 CSS ，不是 DOM 能夠控制的；

5link 是 XHTML 標籤，無兼容問題； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支持
複製代碼

解釋一下css3的flexbox，以及適用場景

inline和inline-block的區別

哪些是塊級元素那些是行級元素，各有什麼特色 grid佈局 table佈局的做用 實現兩欄佈局有哪些方法？ css dpi 你知道attribute和property的區別麼 css佈局問題？css實現三列布局怎麼作？若是中間是自適應又怎麼作？ 流式佈局如何實現，響應式佈局如何實現 移動端佈局方案 實現三欄佈局（聖盃佈局，雙飛翼佈局，flex佈局） 清除浮動的原理 overflow:hidden有什麼缺點？ padding百分比是相對於父級寬度仍是自身的寬度 css3動畫，transition和animation的區別，animation的屬性，加速度，重力的模擬實現 CSS 3 如何實現旋轉圖片（transform: rotate） sass less 對移動端開發瞭解多少？（響應式設計、Zepto；@media、viewport、JavaScript 正則表達式判斷平臺。） 什麼是bfc，如何建立bfc？解決什麼問題？ CSS中的長度單位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax） CSS 選擇器的優先級是怎樣的？ 1
雪碧圖 svg 媒體查詢的原理是什麼？ CSS 的加載是異步的嗎？表如今什麼地方？ 常遇到的瀏覽器兼容性問題有哪些？經常使用的hack的技巧 外邊距合併 解釋一下「::before」和「:after」中的雙冒號和單冒號的區別 單冒號僞類 雙冒號僞元素

三、JS

js的基本類型有哪些？引用類型有哪些？null和undefined的區別。

如何判斷一個變量是Array類型？如何判斷一個變量是Number類型？（都不止一種） typeof Object.prototype.toString.call();

Object是引用類型嘛？引用類型和基本類型有什麼區別？哪一個是存在堆哪個是存在棧上面的？

JS常見的dom操做api 解釋一下事件冒泡和事件捕獲 事件委託（手寫例子），事件冒泡和捕獲，如何阻止冒泡？如何組織默認事件？ 對閉包的理解？何時構成閉包？閉包的實現方法？閉包的優缺點？

this有哪些使用場景？跟C,Java中的this有什麼區別？如何改變this的值？ call，apply，bind 顯示原型和隱式原型，手繪原型鏈，原型鏈是什麼？爲何要有原型鏈

建立對象的多種方式

實現繼承的多種方式和優缺點 new 一個對象具體作了什麼 手寫Ajax，XMLHttpRequest 變量提高 舉例說明一個匿名函數的典型用例 指出JS的宿主對象和原生對象的區別，爲何擴展JS內置對象不是好的作法？有哪些內置對象和內置函數？ attribute和property的區別 document load和document DOMContentLoaded兩個事件的區別 === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined typeof可以獲得哪些值 什麼是「use strict」,好處和壞處 函數的做用域是什麼？js 的做用域有幾種？ JS如何實現重載和多態 經常使用的數組api，字符串api 原生事件綁定（跨瀏覽器），dom0和dom2的區別？ 給定一個元素獲取它相對於視圖窗口的座標 如何實現圖片滾動懶加載 js 的字符串類型有哪些方法？ 正則表達式的函數怎麼使用？ 深拷貝 編寫一個通用的事件監聽函數 web端cookie的設置和獲取 setTimeout和promise的執行順序 JavaScript 的事件流模型都有什麼？ navigator對象，location和history js的垃圾回收機制 內存泄漏的緣由和場景 DOM事件的綁定的幾種方式 DOM事件中target和currentTarget的區別 typeof 和 instanceof 區別，instanceof原理 js動畫和css3動畫比較 JavaScript 倒計時（setTimeout） js處理異常 js的設計模式知道那些 輪播圖的實現，以及輪播圖組件開發，輪播10000張圖片過程 websocket的工做原理和機制。 手指點擊能夠觸控的屏幕時，是什麼事件？ 什麼是函數柯里化？以及說一下JS的API有哪些應用到了函數柯里化的實現？(函數柯里化一些瞭解，以及在函數式編程的應用，最後說了一下JS中bind函數和數組的reduce方法用到了函數柯里化。) JS代碼調試 四、ES6

談一談 promise 全部的 ES6 特性你都知道嗎？若是遇到一個東西不知道是 ES6 仍是 ES5, 你該怎麼區分它 es6的繼承和es5的繼承有什麼區別 promise封裝ajax let const的優勢 es6 generator 是什麼，async/await 實現原理 ES6和node的commonjs模塊化規範區別 箭頭函數，以及它的this 五、計算機網絡

HTTP協議頭含有哪些重要的部分，HTTP狀態碼 網絡url輸入到輸出怎麼作？ 性能優化爲何要減小 HTTP 訪問次數？ Http請求的過程與原理 https（對是https）有幾回握手和揮手？https的原理。 http有幾回揮手和握手？TLS的中文名？TLS在哪一網絡層？ TCP鏈接的特色，TCP鏈接如何保證安全可靠的？ 爲何TCP鏈接須要三次握手，兩次不能夠嗎，爲何 爲何tcp要三次握手四次揮手？ tcp的三次握手和四次揮手畫圖（當場畫寫ack 和 seq的值）？ tcp與udp的區別 get和post的區別？什麼狀況下用到？ http2 與http1 的區別？ websocket 什麼是tcp流，什麼是http流 babel是如何將es6代碼編譯成es5的 http2的持久鏈接和管線化 域名解析時是tcp仍是udp 域名發散和域名收斂 Post一個file的時候file放在哪的？ HTTP Response的Header裏面都有些啥？ 六、瀏覽器相關

跨域，爲何JS會對跨域作出限制 前端安全：xss，csrf… 瀏覽器怎麼加載頁面的？script腳本阻塞有什麼解決方法？defer和async的區別？ 瀏覽器強緩存和協商緩存 瀏覽器的全局變量有哪些 瀏覽器同一時間可以從一個域名下載多少資源 按需加載，不一樣頁面的元素判斷標準 web存儲、cookies、localstroge等的使用和區別 瀏覽器的內核 如何實現緩存機制？（從200緩存，到cache到etag再到） 說一下200和304的理解和區別 什麼是預加載、懶加載 一個 XMLHttpRequest 實例有多少種狀態？ dns解析原理，輸入網址後如何查找服務器 服務器如何知道你？ 瀏覽器渲染過程 ie的某些兼容性問題 session 拖拽實現 拆解url的各部分 七、工程化

對webpack,gulp，grunt等有沒有了解?對比。 webpack的入口文件怎麼配置，多個入口怎麼分割。 webpack的loader和plugins的區別 gulp的具體使用。 前端工程化的理解、如何本身實現一個文件打包，好比一個JS文件裏同時又ES5 和ES6寫的代碼，如何編譯兼容他們 八、塊化

對AMD,CMD,CommonJS有沒有了解? 爲何要模塊化？不用的時候和用RequireJs的時候代碼大概怎麼寫？ 說說有哪些模塊化的庫，有了解過模塊化的發展的歷史嗎？ 分別說說同步和異步模塊化的應用場景，說下AMD異步模塊化實現的原理？ 如何將項目裏面的全部的require的模塊語法換成import的ES6的語法？ 使用模塊化加載時，模塊加載的順序是怎樣的，若是不知道，根據已有的知識，你以爲順序應該是怎麼樣的？ 九、框架

使用過哪些框架？ zepto 和 jquery 是什麼關係，有什麼聯繫麼？ jquery源碼如何實現選擇器的，爲何(‘xxx’)作了什麼事情 介紹一下bootstrap的柵格系統是如何實現的 十、Nodejs

對nodejs有沒有了解 Express 和 koa 有什麼關係，有什麼區別？ nodejs適合作什麼樣的業務？ nodejs與php，java有什麼區別 Nodejs中的Stream和Buffer有什麼區別？ node的異步問題是如何解決的？ node是如何實現高併發的？ 說一下 Nodejs 的 event loop 的原理 十一、數據結構

基本數據結構：（數組、隊列、鏈表、堆、二叉樹、哈希表等等） 8種排序算法，原理，以及適用場景和複雜度 說出越多越好的費波拉切數列的實現方法？ 12性、能優化

cdn的用法是什麼？何時用到？ 瀏覽器的頁面優化？ 如何優化 DOM 操做的性能 單頁面應用有什麼SEO方案？ 單頁面應用首屏顯示比較慢，緣由是什麼？有什麼解決方案？ 1三、其餘

正則表達式 前端渲染和後端渲染的優缺點 數據庫的四大特性，什麼是原子性，表的關係 你以爲前端體系應該是怎樣的？ 一個靜態資源要上線，裏面有各類資源依賴，你如何平穩上線 若是要你去實現一個前端模板引擎，你會怎麼作 知道流媒體查詢嗎？ SEO mysql 和 mongoDB 有什麼區別？ restful的method解釋 數據庫知識、操做系統知識 click在ios上有300ms延遲，緣由及如何解決 移動端的適配，rem+媒體查詢/meta頭設置 移動端的手勢和事件； unicode，utf8，gbk編碼的瞭解，亂碼的解決 1四、開放性問題

你都看過什麼書？最近在看什麼書？ 用過什麼框架？有沒有看過什麼框架的代碼？ 有沒有學過設計模式？ 說一說觀察者模式吧！能不能寫出來？ 你最大的優勢是什麼？那你最大的缺點呢？ 你除了寫博客還有什麼輸出？ 如今你的領導給你了一份工做，要求你一個星期完成，但你看了需求之後估計須要3周才能完成，你該怎麼辦？ 平時關注的前端技術 如何規劃本身的職業生涯 項目過程當中，有遇到什麼問題嗎？怎麼解決的？ 最近在研究哪方面的東西？ 請介紹一項你最熱愛、最擅長的專業領域，而且介紹的學習規劃。 請介紹你參與的印象最深入的一個項目，爲何？而且介紹你在項目中的角色和發揮的做用。 1五、HR面

你爲何要學習前端？ 你平時的是怎麼學習前端的？有什麼輸出？ 你以爲本身最好的項目是什麼？ 身邊比較佩服的人有什麼值得你學習的？你爲何沒有跟他們同樣？ 同事的什麼問題會讓你接受不了 壓力最大的事情是什麼？ 身邊的朋友一般對你的評價是什麼 喜歡什麼樣的工做氛圍 如何看待加班 有沒有對象 意向城市 其餘的offer 爲何要錄取你？ 週末都會幹什麼？ 將來職業規劃