天天看點
傳回

前端開發面試題 （題目清單頁）

前端開發面試題 （題目清單頁）

AD:https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Question

目錄

  1. ​​前言​​
  2. ​​HTML部分​​
  3. ​​CSS部分​​
  4. ​​JavaScript部分​​
  5. ​​其他問題​​
  6. ​​前端學習網站推薦​​

前言

HTML

  • Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
  • HTML5 為什麼隻需要寫 <!DOCTYPE HTML>？
  • 行内元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
  • 頁面導入樣式時，使用link和@import有什麼差別？
  • CSS選擇符有哪些？哪些屬性可以繼承？
  • CSS優先級算法如何計算？
  • CSS3新增僞類有那些？
  • 如何居中div？如何居中一個浮動元素？
  • 常見的浏覽器核心有哪些？
  • html5有哪些新特性、移除了那些元素？如何處理HTML5新标簽的浏覽器相容問題？如何區分 HTML 和 HTML5？
  • 簡述一下你對HTML語義化的了解？
  • (寫)描述一段語義的html代碼吧。
  • HTML5的離線儲存怎麼用，工作原理能不能解釋一下？
  • 浏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
  • 請描述一下 cookies，sessionStorage 和 localStorage 的差別？
  • iframe有那些缺點？
  • Label的作用是什麼？是怎麼用的？（加 for）
  • HTML5的form如何關閉自動完成功能？給不想要提示的input是設定autocomplete=off即可
  • 如何實作浏覽器内多個标簽頁之間的通信? (阿裡)
  • 如何使用websocket？如何相容低浏覽器？(阿裡)
  • 頁面可見性（Page Visibility）API 可以有哪些用途？

CSS

  • 介紹一下标準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
  • display有哪些值？說明他們的作用。position的值relative和absolute定位原點是？
  • CSS3有哪些新特性（包含哪些子產品）？
  • 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及适用場景？
  • 用純CSS建立一個三角形的原理是什麼？
  • 一個滿屏 品 字布局 如何設計?
  • li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
  • 經常遇到的浏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
  • 為什麼要初始化CSS樣式。
  • absolute的containing block計算方式跟正常流有什麼不同？
  • CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同浏覽器下以後什麼差別？
  • position跟display、margin collapse、overflow、float這些特性互相疊加後會怎麼樣？
  • 對BFC規範的了解？
  • CSS權重優先級是如何計算的？
  • 請解釋一下浮動和它的工作原理？清除浮動的技巧
  • 移動端的布局用過媒體查詢嗎？
  • 使用 CSS 預處理器嗎？喜歡那個，Why？
  • CSS優化、提高性能的方法有哪些？
  • 浏覽器是怎樣解析CSS選擇器的？
  • 在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
  • margin和padding分别适合什麼場景使用？
  • 元素豎向的百分比設定是相對于容器的高度嗎？
  • 全屏滾動的原理是什麼？用到了CSS的那些屬性？
  • 什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
  • 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和隻出現一次分别怎麼做？）
  • ::before 和 :after中雙冒号和單冒号 有什麼差別？解釋一下這2個僞元素的作用。
  • 如何修改chrome記住密碼後自動填充表單的黃色背景 ？
  • 你對line-height是如何了解的？
  • 設定元素浮動後，該元素的display值是多少？（自動變成display:block）
  • 怎麼讓Chrome支援小于12px 的文字？
  • 讓頁面裡的字型變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
  • font-style屬性可以讓它指派為“oblique” oblique是什麼意思？
  • position:fixed;在android下無效怎麼處理？
  • 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿裡）
  • display:inline-block 什麼時候會顯示間隙？(攜程)
  • overflow: scroll時不能平滑滾動的問題怎麼處理？

JavaScript

  • 用原生JavaScript的實作過什麼功能嗎？
  • 介紹JavaScript的基本資料類型。
  • 說說寫JavaScript的基本規範？
  • 請解釋一下JavaScript原型(prototype)? 每個JS對象都有原型屬性嗎？
  • JavaScript有幾種類型值？（堆：原始值和 棧：引用值），你能畫一下他們的記憶體圖嗎？
  • Javascript如何實作繼承？
  • 如何建立一個對象? （畫出此對象的記憶體圖）
  • 談談This對象的了解。
  • eval（機試題)。
  • ["1", "2", "3"].map(parseInt) 答案是多少？
  • 關于事件，IE與火狐的事件機制有什麼差別？ 如何阻止冒泡？
  • 什麼是閉包（closure），為什麼要用它？
  • "use strict";是什麼意思 ? 使用它的有什麼好處或壞處？
  • 如何判斷一個對象是否屬于某個類？
  • new操作符具體幹了什麼呢?
  • Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
  • 對JSON的了解？
  • ​

    ​[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })​

     ​ 能解釋一下這段代碼的意思嗎？
  • js延遲加載的方式有哪些？
  • ajax是什麼，解釋一下它的工作原理?
  • 同步和異步的差別?
  • 如何解決跨域問題?
  • JS子產品化開發怎麼做？
  • requireJS的核心原理是什麼？（如何動态加載的？如何避免多次加載的？如何 緩存的？）
  • 談一談你對ECMAScript6的了解？
  • ECMAScript6 怎麼寫class麼，為什麼會出現class這種東西?
  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範差別？
  • 異步加載的方式有哪些？
  • .call() 和 .apply() 的差別？
  • JavaScript中的作用域與變量聲明提升？
  • 如何編寫高性能的Javascript？
  • 那些操作會造成記憶體洩漏？
  • JQuery的源碼看過嗎？能不能簡單概況一下它的實作原理？
  • jQuery.fn的init方法傳回的this指的是什麼對象？為什麼要傳回this？
  • jquery中如何将數組轉化為json字元串，然後再轉化回來？
  • jQuery 的屬性拷貝(extend)的實作原理是什麼，如何實作深拷貝？
  • jquery.extend 與 jquery.fn.extend的差別？
  • jQuery 的隊列是如何實作的？隊列可以用在哪些地方？
  • 談一下Jquery中的bind(),live(),delegate(),on()的差別？
  • JQuery一個對象可以同時綁定多個事件，這是如何實作的？
  • jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
  • 針對 jQuery性能的優化方法？
  • Jquery與jQuery UI有啥差別？
  • jQuery和Zepto的差別？各自的使用場景？
  • Zepto的點透問題如何解決？
  • jQueryUI如何自定義元件?
  • 需求：實作一個頁面操作不會整頁重新整理的網站，并且能在浏覽器前進、後退時正确響應。給出你的技術實作方案？
  • 如何判斷目前腳本運作在浏覽器還是node環境中？（阿裡）
  • 移動端最小觸控區域是多大？
  • jQuery 的 slideUp動畫 ，如果目标元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滞後的反複執行，該如何處理呢?
  • 把 Script 标簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼差別？浏覽器會如何解析它們？
  • 移動端的點選事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實作safari的輕按兩下事件的設計，浏覽器要知道你是不是要輕按兩下操作。）
  • 知道各種JS架構(Angular, Backbone, Ember, React, Meteor, Knockout...)麼? 能講出他們各自的優點和缺點麼?
  • Underscore 對哪些 JS 原生對象進行了擴充以及提供了哪些好用的函數方法？
  • Node.js的适用場景？
  • (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?
  • 解釋一下 Backbone 的 MVC 實作方式？
  • 什麼是“前端路由”?什麼時候适合使用“前端路由”? “前端路由”有哪些優點和缺點?
  • 知道什麼是webkit麼? 知道怎麼用浏覽器的各種工具來調試和debug代碼麼?
  • 如何測試前端代碼麼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?
  • 前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
  • 簡述一下 Handlebars 的基本用法？
  • 簡述一下 Handlerbars 的對模闆的基本處理流程， 如何編譯的？如何緩存的？

其他問題

  • 原來公司工作流程是怎麼樣的，如何與其他人協作的？如何誇部門合作的？
  • 你遇到過比較難的技術問題是？你是如何解決的？
  • 設計模式 知道什麼是singleton, factory, strategy, decrator麼?
  • 常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？
  • 頁面重構怎麼操作？
  • 列舉IE與其他浏覽器不一樣的特性？
  • 99%的網站都需要被重構是那本書上寫的？
  • 什麼叫優雅降級和漸進增強？
  • WEB應用從伺服器主動推送Data到用戶端有那些方式？
  • 對Node的優點和缺點提出了自己的看法？
  • 你有用過哪些前端性能優化的方法？
  • http狀态碼有那些？分别代表是什麼意思？
  • 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）
  • 除了前端以外還了解什麼其它技術麼？你最最厲害的技能是什麼？
  • 你用的得心應手用的熟練地編輯器&開發環境是什麼樣子？
  • 對前端界面工程師這個職位是怎麼樣了解的？它的前景會怎麼樣？
  • 你怎麼看待Web App 、hybrid App、Native App？
  • 你移動端前端開發的了解？（和 Web 前端開發的主要差別是什麼？）
  • 你對加班的看法？
  • 平時如何管理你的項目？
  • 每個子產品的代碼結構都應該比較簡單，且每個子產品之間的關系也應該非常清晰，随着功能和疊代次數越來越多，你會如何去保持這個狀态的？
  • Git知道branch, diff, merge麼?
  • 如何設計突發大規模并發架構？
  • 當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎？
  • 說說最近最流行的一些東西吧？平時常去哪些網站？
  • 知道什麼是SEO并且怎麼優化麼? 知道各種meta data的含義麼?
  • 移動端（Android IOS）怎麼做好使用者體驗?
  • 你在現在的團隊處于什麼樣的角色，起到了什麼明顯的作用？
  • 你認為怎樣才是全端工程師（Full Stack developer）？
  • 介紹一個你最得意的作品吧？
  • 你有自己的技術部落格嗎，常去那些部落格？
  • 對前端安全有什麼看法？
  • 最近在學什麼東西嗎？
  • 能談談你未來3，5年給自己的規劃嗎？

有趣的問題

  • .A、B兩人分别在兩座島上。B生病了，A有B所需要的藥。C有一艘小船和一個可以上鎖的箱子。C願意在A和B之間運東西，但東西隻能放在 箱子裡。隻要箱子沒被上鎖，C都會偷走箱子裡的東西，不管箱子裡有什麼。如果A和B各自有一把鎖和隻能開自己那把鎖的鑰匙，A應該如何把東西安全遞交給 B？ 
答案：A把藥放進箱子，用自己的鎖把箱子鎖上。B拿到箱子後，再在箱子上加一把自己的鎖。
箱子運回A後，A取下自己的鎖。箱子再運到B手中時，B取下自己的鎖，獲得藥物。
  • Amazon首頁的左上角有一個商品分類浏覽的下拉菜單 沒有延遲，而且子菜單也不會在不應該的時候消失。它是怎樣做到這一點的呢？ 
答案是通過探測滑鼠移動的方向和軌迹，具體檢視Khan Academy工程師 Ben Kamens 寫的 jQuery插件
jquery css javascript
上一篇: Python開發基礎記錄
下一篇: 《二、清單的操作》練習題答案

繼續閱讀