【230頁】初級前端工程師面試題精編解析大全

前言

初級前端工程師如何有計划的學習前端？前端基礎是第一步也是非常重要的一步，從初學前端到成長為一名架構師，會經歷很多挫折和困難，唯一不變的就是堅持、成長、與反思。

前端學習的方法很重要，學習前端需要分階段，通過階段性的學習才能快的掌握前端技能。

完整學習路線圖：點擊此處免費領取

前端初級工程師面試題

前端初級工程師面試題精編解析大全內容大綱包括：HTML 篇、CSS篇、JavaScript 篇、瀏覽器、服務端與網絡、Vue 框架、算法篇。

HTML 篇

• 你是怎么理解 HTML 語義化
• 你用過哪些 HTML5 標簽
• meta viewport 是做什么用的，怎么寫？
• H5 是什么
• label 標簽的作用
• 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
• a 標簽中 如何禁用 href 跳轉頁面 或 定位鏈接
• canvas 在標簽上設置寬高 和在 style 中設置寬高有什么區別
• 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?
• iframe 有哪些缺點？
• HTML5 新特性
• HTML5 離線儲存
• 瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢？
• Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?
• HTML 與 XHTML——二者有什么區別
  

CSS 篇

• 頁面渲染時，dom 元素所采用的 布局模型,可通過box-sizing 進行設置。根- 據計算寬高的區域可分為：
• ie 盒模型算上 border、padding 及自身（不算 margin），標准的只算上自身窗體的大小 css 設置方法如下：
• 幾種獲得寬高的方式
• 拓展各種獲得寬高的方式
• 邊距重疊解決方案(BFC) BFC 原理
• css reset 和 normalize.css 有什么區別
• 居中方法
• css 優先確定級
• 如何清除浮動
• 自適應布局
• 畫三角形
• link @import 導入 css
• 長寬比方案
• display 相關
• CSS 優化
• CSS 開啟 GPU 加速
• 開啟 GPU 硬件加速可能觸發的問題
• CSS 中 link 與@import 的區別
• CSS 選擇器列表優先級及權重
• display:none 和 visibility:hidden 的區別
• position 的 absolute 與 fixed 共同點與不同點
• 介紹一下 CSS 的盒子模型
• CSS 選擇符有哪些
• 哪些屬性可以繼承
• 優先級算法如何計算
• CSS3 新增偽類有哪些
• 列出 display 的值，說明他們的作用
• position 的值，relative 和 absolute 分別是相對於誰進行定位的
• CSS3 有哪些新特性
• 為什么要初始化 CSS 樣式
• canvas 在標簽上設置寬高 和在 style 中設置寬高有什么區別
• 什么是 css HACK
• Less/Sass/Scss 的區別
• css 與 js 動畫差異
• CSS 預處理器(Sass/Less/Postcss)
• CSS 動畫
• 去除浮動影響，防止父級高度塌陷
• 選擇器優先級
• 居中布局
• 層疊上下文
• BFC
• 介紹一下標准的 CSS 的盒子模型？與低版本 IE 的盒子模型有什么不同的？
• box-sizing 屬性
• CSS 選擇器有哪些？哪些屬性可以繼承？
• CSS 優先級算法如何計算？
• display 有哪些值？說明他們的作用?
• position 的值
• 文字陰影
• font-face 屬性
• 圓角（邊框半徑）
• 邊框圖片
• 盒陰影
• 媒體查詢
• 請解釋一下 CSS3 的 flexbox（彈性盒布局模型）,以及適用場景？
• 用純 CSS 創建一個三角形的原理是什么？
• 一個滿屏品字布局如何設計?
• 為什么要初始化 CSS 樣式
• absolute 的 containing block 計算方式跟正常流有什么不同？
• 解釋 css sprites ，如何使用？
• ......
  

JavaScript 篇

• 請你談談 Cookie 的優缺點
• Array.prototype.slice.call(arr，2)方法的作用是
• 以下代碼執行后，控制台的輸出是
• 簡單說一下瀏覽器本地存儲是怎樣的
• 原型 / 構造函數 / 實例
• 原型鏈
• 執行上下文(EC)
• 變量對象
• 作用域鏈
• 閉包
• 對象的拷貝
• new 運算符的執行過程
• instanceof 原理
• 代碼的復用
• 繼承
• 類型轉換
• 類型判斷
• 模塊化
• 防抖與節流
• 函數執行改變 this
• ES6/ES7
• AST
• babel 編譯原理
• 函數柯里化
• get 請求傳參長度的誤區
• 補充 get 和 post 請求在緩存方面的區別
• 說一下閉包
• 說一下類的創建和繼承
• 如何解決異步回調地獄
• 說說前端中的事件流
• 如何讓事件先冒泡后捕獲
• 說一下事件委托
• 說一下圖片的懶加載和預加載
• mouseover 和 mouseenter 的區別
• js 的 new 操作符做了哪些事情
• 改變函數內部 this 指針的指向函數（bind，apply，call 的區別）
• js 拖拽功能的實現
• 異步加載 js 的方法
• Ajax 解決瀏覽器緩存問題
• js 的防抖
• js 節流
• JS 中的垃圾回收機制
• eval 是做什么的
• 如何理解前端模塊化
• 說一下 Commonjs、AMD 和 CMD
• 對象深度克隆的簡單實現
• 實現一個 once 函數，傳入函數參數只執行一次
• 將原生的 ajax 封裝成 promise
• js 監聽對象屬性的改變
• 如何實現一個私有變量，用 getName 方法可以訪問，不能直接訪問
• setTimeout、setInterval 和 requestAnimationFrame 之間的區別
• 實現一個兩列等高布局，講講思路
• 自己實現一個 bind 函數
• 用 setTimeout()方法來模擬 setInterval()與 setInterval()之間的什么區別？
• js 怎么控制一次加載一張圖片，加載完后再加載下一張
• 如何實現 sleep 的效果（es5 或者 es6）
• Function.proto(getPrototypeOf)是什么？
• 實現 js 中所有對象的深度克隆（包裝對象，Date 對象，正則對象）
• 簡單實現 Node 的 Events 模塊
• 箭頭函數中 this 指向舉例
• js 判斷類型
• 數組常用方法
• 數組去重
• 閉包有什么用
• 事件代理在捕獲階段的實際應用
• 去除字符串首尾空格
• 性能優化
• ......
  

瀏覽器篇

• 跨標簽頁通訊
• 瀏覽器架構
• 瀏覽器下事件循環(Event Loop)
• 從輸入 url 到展示的過程
• 重繪與回流
• 存儲
• Web Worker
• V8 垃圾回收機制
• 內存泄露
• reflow(回流)和 repaint(重繪)優化
• 如何減少重繪和回流?
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
• localStorage 與 sessionStorage 與 cookie 的區別總結
• 瀏覽器如何阻止事件傳播，阻止默認行為
• 虛擬 DOM 方案相對原生 DOM 操作有什么優點，實現上是什么原理？
• 瀏覽器事件機制中事件觸發三個階段
• 什么是跨域？為什么瀏覽器要使用同源策略？你有幾種方式可以解決跨域問題？了解預檢請求嘛？
• 了解瀏覽器緩存機制嗎？
• 什么情況會阻塞渲染？
• 如何判斷 js 運行在瀏覽器中還是 node 中？
• 關於 web 以及瀏覽器處理預加載有哪些思考？
• http 多路復用
• http 和 https
• cookie 可設置哪些屬性？httponly?
• 登錄后，前端做了哪些工作，如何得知已登錄
• http 狀態碼
• # Http 請求頭緩存設置方法
• 實現頁面回退刷新
• 正向代理和反向代理
• 關於預檢請求
• 三次握手四次揮手
• TCP 和 UDP 協議
• 進程和線程的區別
• 瀏覽器內核
• 渲染引擎
• 主流瀏覽器內核
• rident 內核常見瀏覽器
• 開源內核
• Firefox 內核
• 描述瀏覽器渲染過程
• 什么是 DOCTYPE 及作用？
• 常見的 DOCTYPE 聲明有幾種？
• 什么是 Reflow？
• 什么是 Repaint？
• 從瀏覽器地址欄輸入 url 到顯示頁面的步驟
• 請描述一下 cookie、sessionStorage、localStorage 的區別
• 什么是 XXS 攻擊
• CSRF 攻擊
• DDOS 攻擊
• 從 URL 輸入到頁面展現到底發生什么
• cookie 中存放的數據
• cookie 生成過程
• 常用那幾種瀏覽器測試？
• 主流瀏覽器的內核有哪些？
• 說說你對瀏覽器內核的理解？
• URL 和 URI 有什么區別
• HTTP 和 HTTPS 的區別
• 簡單說一下瀏覽器本地存儲是怎樣的
• 請你談談關於 Cookie 的利弊
• 為什么 JavaScript 是單線程的，與異步沖突嗎
• CSS 加載會造成阻塞嗎
• 為什么 JS 會阻塞頁面加載
• defer 和 async 的區別 ?
• DOMContentLoaded 與 load 的區別 ?
• 為什么 CSS 動畫比 JavaScript 高效
• 高性能動畫是什么，那它衡量的標准是什么呢？
• ......
  

服務端與網絡

• http/https 協議
• 常見狀態碼
• get / post
• Websocket
• TCP 三次握手
• TCP 四次揮手
• Node 的 Event Loop: 6 個階段
• URL 概述
• HTTPS 和 HTTP 的區別
• HTTP 版本
• 從輸入 URL 到頁面呈現發生了什么？
• HTTP 緩存
• 緩存位置
• 強緩存
• 協商緩存
• 緩存的資源在那里
• 用戶行為對瀏覽器緩存的影響
• 緩存的優點
• 不同刷新的請求執行過程
• 為什么會有跨域問題
• 如何解決跨域
• 訪問控制場景（簡單請求與非簡單請求）
• withCredentials 屬性
• 服務器如何設置 CORS
• URL 類中的常用方法
• 常見網絡架構
• TCP 連接過程客戶端和服務端狀態
• 多進程多線程的區別
• OSI，TCP/IP，五層協議的體系結構，以及各層協議
• HTTP 的長連接和短連接?
• 運輸層協議與網絡層協議的區別？
• 數據鏈路層協議可能提供的服務？
• 為什么 TCP 連接要建立三次連接？
• 為什么要 4 次揮手？
• 如果已經建立了連接，但是客戶端突然出現故障了怎么辦？
• TCP 和 UDP 的區別？
• TCP 對應的協議
• UDP 對應的協議
• 端口及對應的服務？
• TCP/IP 的流量控制？
• TCP 擁塞控制？
• HTTPS 安全的局限性
• TCP 的連接管理
• 交換機與路由器有什么區別？
• 網橋的作用？
• 數據鏈路層協議可能提供的服務？
• 網絡接口卡（網卡）的功能？
• 私有（保留）地址？
• TTL 是什么？作用是什么？哪些工具會用到它（ping traceroute ifconfig netstat）？
• 路由表是做什么用的？在 Linux 環境中怎么配置一條默認路由？
• RARP？
• TCP 特點
• TCP 連接 與 套接字
• TCP 可靠傳輸的實現
• 停止等待協議的原理
• 流量控制的目的？
• 如何實現流量控制？
• ......
  

Vue 框架

• vue.js 的兩個核心是什么？
• vue 的雙向綁定的原理是什么？
• vue 生命周期鈎子函數有哪些？
• 請問 v-if 和 v-show 有什么區別？
• vue 常用的修飾符
• nextTick
• 什么是 vue 生命周期
• 數據響應(數據劫持)
• virtual dom 原理實現
• Proxy 相比於 defineProperty 的優勢
• vuex
• vue 中 key 值的作用
• Vue 組件中 data 為什么必須是函數？
• v-for 與 v-if 的優先級
• 說出至少 4 種 vue 當中的指令和它的用法
• vue 中子組件調用父組件的方法
• vue 中父組件調用子組件的方法
• vue 頁面級組件之間傳值
• 說說 vue 的動態組件
• keep-alive 內置組件的作用
• 遞歸組件的用法
• 怎么定義 vue-router 的動態路由？怎么獲取傳過來的值？
• vue-router 有哪幾種路由守衛?
• $route 和 $router 的區別是什么？
• vue-router 響應路由參數的變化
• vue-router 傳參
• 不用 Vuex 會帶來什么問題？
• vuex 有哪幾種屬性？
• vuex 的 State 特性是？
• Vue.js 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 actions 中？
• 什么是 MVVM？
• mvvm 和 mvc 區別？它和其它框架（jquery）的區別是什么？哪些場景適合？
• vue 的優點是什么？
• 組件之間的傳值？
• 路由之間跳轉
• vue.cli 中怎樣使用自定義的組件？有遇到過哪些問題嗎？
• vue 如何實現按需加載配合 webpack 設置
• Vue 中引入組件的步驟?
• 指令 v-el 的作用是什么?
• 在 Vue 中使用插件的步驟
• vue 生命周期的作用是什么
• vue 生命周期總共有幾個階段
• 第一次頁面加載會觸發哪幾個鈎子
• vue-loader 是什么？使用它的用途有哪些？
• scss 是什么？在 vue.cli 中的安裝使用步驟是？有哪幾大特性？
• 為什么使用 key？
• 為什么避免 v-if 和 v-for 用在一起
• VNode 是什么？虛擬 DOM 是什么？
• vue-loader 是什么？使用它的用途有哪些？
• 請說出 vue.cli 項目中 src 目錄每個文件夾和文件的用法？
• vue.cli 中怎樣使用自定義的組件？有遇到過哪些問題嗎？
• 聊聊你對 Vue.js 的 template 編譯的理解？
• vue 路由跳轉的幾種方式
• vue-cli 創建自定義組件
• <keep-alive></keep-alive> 的作用是什么?
• vue 如何實現按需加載配合 webpack 設置?
• Vue 實現數據雙向綁定的原理 Object.defineProperty()
• Vue 的路由實現：hash 模式和 history 模式
• Vue 與 Angular 以及 React 的區別？
• vue 路由的鈎子函數
• route 和 router 的區別
• 什么是 vue 的計算屬性？
• vue 等單頁面應用（spa）及其優缺點
• vue-cli 如何新增自定義指令？
• ......
  

算法篇

• 五大算法
• 基礎排序算法
• 高級排序算法
• 遞歸運用(斐波那契數列)： 爬樓梯問題
• 數據樹
• 天平找次品
  

最后：💕 分享初級前端模塊筆記，前端學習路線圖，初級前端工程師面試題精編解析大全PDF文檔（含答案解析），需要可以 點擊此處免費領取！ 💕