前端工程師面試題匯總

HTML

?

  • Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?

  • HTML5 為什么只需要寫 <!DOCTYPE HTML>?

  • 行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

  • 頁面導入樣式時,使用link和@import有什么區別?

  • 介紹一下你對瀏覽器內核的理解?

  • 常見的瀏覽器內核有哪些?

  • html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

  • 簡述一下你對HTML語義化的理解?

  • HTML5的離線儲存怎么使用,工作原理能不能解釋一下?

  • 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢?

  • 請描述一下 cookies,sessionStorage 和 localStorage 的區別?

  • iframe有那些缺點?

  • Label的作用是什么?是怎么用的?(加 for 或 包裹)

  • HTML5的form如何關閉自動完成功能?

  • 如何實現瀏覽器內多個標簽頁之間的通信? (阿里)

  • webSocket如何兼容低瀏覽器?(阿里)

  • 頁面可見性(Page Visibility)API 可以有哪些用途?

  • 如何在頁面上實現一個圓形的可點擊區域?

  • 實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

  • 網頁驗證碼是干嘛的,是為了解決什么安全問題?

  • tite與h1的區別、b與strong的區別、i與em的區別?

?

CSS

?

  • 介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什么不同的?

  • CSS選擇符有哪些?哪些屬性可以繼承?

  • CSS優先級算法如何計算?

  • CSS3新增偽類有那些?

  • 如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?

  • 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規范(塊級格式化上下文:block formatting context)的理解?

  • CSS權重優先級是如何計算的?

  • 請解釋一下為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式

  • 移動端的布局用過媒體查詢嗎?

  • 使用 CSS 預處理器嗎?喜歡那個?

  • 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時不能平滑滾動的問題怎么處理?

  • 有一個高度自適應的div,里面有兩個div,一個高度100px,希望另一個填滿剩下的高度。

  • png、jpg、gif 這些圖片格式解釋一下,分別什么時候用。有沒有了解過webp?

  • 什么是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎么做)

  • style標簽寫在body后與body前有什么區別?

?

JavaScript

?

  • 介紹JavaScript的基本數據類型。

  • 說說寫JavaScript的基本規范?

  • JavaScript原型,原型鏈 ? 有什么特點?

  • JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?

  • Javascript如何實現繼承?

  • Javascript創建對象的幾種方式?

  • Javascript作用鏈域?

  • 談談This對象的理解。

  • eval是做什么的?

  • 什么是window對象? 什么是document對象?

  • null,undefined的區別?

  • 寫一個通用的事件偵聽器函數(機試題)。

  • [“1”, “2”, “3”].map(parseInt) 答案是多少?

  • 關于事件,IE與火狐的事件機制有什么區別? 如何阻止冒泡?

  • 什么是閉包(closure),為什么要用它?

  • javascript 代碼中的”use strict”;是什么意思 ? 使用它區別是什么?

  • 如何判斷一個對象是否屬于某個類?

  • new操作符具體干了什么呢?

  • 用原生JavaScript的實現過什么功能嗎?

  • Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?

  • 對JSON的了解?

  • [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?

  • js延遲加載的方式有哪些?

  • Ajax 是什么? 如何創建一個Ajax?

  • 同步和異步的區別?

  • 如何解決跨域問題?

  • 頁面編碼和被請求的資源編碼如果不一致如何處理?

  • 模塊化開發怎么做?

  • AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)規范區別?

  • requireJS的核心原理是什么?(如何動態加載的?如何避免多次加載的?如何 緩存的?)

  • 讓你自己設計實現一個requireJS,你會怎么做?

  • 談一談你對ECMAScript6的了解?

  • ECMAScript6 怎么寫class么,為什么會出現class這種東西?

  • 異步加載的方式有哪些?

  • documen.write和 innerHTML的區別?

  • DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

  • .call() 和 .apply() 的含義和區別?

  • 數組和對象有哪些原生方法,列舉一下?

  • JS 怎么實現一個類。怎么實例化這個類

  • 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里的fire函數是什么意思,什么時候用?

  • jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)

  • 針對 jQuery性能的優化方法?

  • Jquery與jQuery UI有啥區別?

  • JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?

  • jquery 中如何將數組轉化為json字符串,然后再轉化回來?

  • jQuery和Zepto的區別?各自的使用場景?

  • 針對 jQuery 的優化方法?

  • Zepto的點透問題如何解決?

  • jQueryUI如何自定義組件?

  • 需求:實現一個頁面操作不會整頁刷新的網站,并且能在瀏覽器前進、后退時正確響應。給出你的技術實現方案?

  • 如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)

  • 移動端最小觸控區域是多大?

  • jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯后的反復執行,該如何處理呢?

  • 把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區別?瀏覽器會如何解析它們?

  • 移動端的點擊事件的有延遲,時間是多久,為什么會有? 怎么解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)

  • 知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?

  • Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?

  • 解釋JavaScript中的作用域與變量聲明提升?

  • 那些操作會造成內存泄漏?

  • JQuery一個對象可以同時綁定多個事件,這是如何實現的?

  • 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 的對模板的基本處理流程, 如何編譯的?如何緩存的?

  • 用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)

  • 檢測瀏覽器版本版本有哪些方式?

  • 我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然后會先執行冒泡還是捕獲

?

其他問題

?

  • 原來公司工作流程是怎么樣的,如何與其他人協作的?如何夸部門合作的?

  • 你遇到過比較難的技術問題是?你是如何解決的?

  • 設計模式 知道什么是singleton, factory, strategy, decrator么?

  • 常使用的庫有哪些?常用的前端開發工具?開發過什么應用或組件?

  • 頁面重構怎么操作?

  • 列舉IE與其他瀏覽器不一樣的特性?

  • 99%的網站都需要被重構是那本書上寫的?

  • 什么叫優雅降級和漸進增強?

  • 是否了解公鑰加密和私鑰加密。

  • WEB應用從服務器主動推送Data到客戶端有那些方式?

  • 對Node的優點和缺點提出了自己的看法?

  • 你有用過哪些前端性能優化的方法?

  • http狀態碼有那些?分別代表是什么意思?

  • 一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發生了什么?(流程說的越詳細越好)

  • 部分地區用戶反應網站很卡,請問有哪些可能性的原因,以及解決方法?

  • 從打開app到刷新出內容,整個過程中都發生了什么,如果感覺慢,怎么定位問題,怎么解決?

  • 除了前端以外還了解什么其它技術么?你最最厲害的技能是什么?

  • 你用的得心應手用的熟練地編輯器&開發環境是什么樣子?

  • 對前端界面工程師這個職位是怎么樣理解的?它的前景會怎么樣?

  • 你怎么看待Web App 、hybrid App、Native App?

  • 你移動端前端開發的理解?(和 Web 前端開發的主要區別是什么?)

  • 你對加班的看法?

  • 平時如何管理你的項目?

  • 說說最近最流行的一些東西吧?常去哪些網站?

  • 如何設計突發大規模并發架構?

  • 說說最近最流行的一些東西吧?常去哪些網站?

  • 是否了解開源的工具 bower、npm、yeoman、grunt、gulp,一個 npm 的包里的 package.json 具備的必要的字段都有哪些?(名稱、版本號,依賴)

  • 每個模塊的代碼結構都應該比較簡單,且每個模塊之間的關系也應該非常清晰,隨著功能和迭代次數越來越多,你會如何去保持這個狀態的?

  • Git知道branch, diff, merge么?

  • 如何設計突發大規模并發架構?

  • 當團隊人手不足,把功能代碼寫完已經需要加班的情況下,你會做前端代碼的測試嗎?

  • 說說最近最流行的一些東西吧?平時常去哪些網站?

  • 知道什么是SEO并且怎么優化么? 知道各種meta data的含義么?

  • 移動端(Android IOS)怎么做好用戶體驗?

  • 簡單描述一下你做過的移動APP項目研發流程?

  • 你在現在的團隊處于什么樣的角色,起到了什么明顯的作用?

  • 你認為怎樣才是全端工程師(Full Stack developer)?

  • 介紹一個你最得意的作品吧?

  • 你有自己的技術博客嗎,用了哪些技術?

  • 對前端安全有什么看法?

  • 是否了解Web注入攻擊,說下原理,最常見的兩種攻擊(XSS 和 CSRF)了解到什么程度?

  • 項目中遇到國哪些印象深刻的技術難題,具體是什么問題,怎么解決?。

  • 最近在學什么東西?

  • 你的優點是什么?缺點是什么?

  • 如何管理前端團隊?

  • 最近在學什么?能談談你未來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插件

?

?

轉載于:https://www.cnblogs.com/qiao20/p/8608071.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/280917.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/280917.shtml
英文地址,請注明出處:http://en.pswp.cn/news/280917.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MySQL-04:數據內容操作-增刪改查-基本命令筆記

1、增 insert into 表 (列名,列名...) values (值,值,值...) insert into 表 (列名,列名...) values (值,值,值...),(值,值,值...) insert into 表 (列名,列名...) select (列名,列名...) from 表 2、刪 delete from 表 delete from 表 where id&#xff1d;1 and name&…

火狐和chrome_Firefox,Chrome和Edge都將支持WebAuthn的硬件兩因素身份驗證

火狐和chromeLogging into Gmail or Facebook could soon mean plugging in a USB device, potentially making phishing a thing of the past. 登錄Gmail或Facebook可能很快就意味著要插入USB設備&#xff0c;這可能使網絡釣魚成為過去。 That’s thanks to WebAuthn, a new o…

Could not delete .........May be locked by another process.

問題 原因&#xff1a;默認的設置是文件修改后立即發布&#xff0c;這樣的設置是在你每個保存文件時都會觸發&#xff0c;如果tomcat已經在運行&#xff0c;這樣頻繁的操作也會造成文件鎖死 解決&#xff1a; Tomcat 右鍵clean 轉載于:https://www.cnblogs.com/feiZhou/p/93…

flask的基礎1

1.python 現階段三大主流web框架Django Tornado Flask的對比 1.Django 主要特點是大而全,集成了很多組件,例如: Models Admin Form 等等, 不管你用得到用不到,反正它全都有,屬于全能型框架 2.Tornado 主要特點是原生異步非阻塞,在IO密集型應用和多任務處理上占據絕對性的優勢,屬…

python實現批量壓縮文件夾

前段時間碰到一個需要把目錄下文件夾壓縮的項目&#xff0c;但是度娘里沒找到&#xff0c;只好自己寫腳本了。 #coding:utf-8 import os filePath raw_input("請輸入路徑&#xff1a;") if filePath "":os._exit() #需要退出ds list(os.walk(filePath…

單元測試01:nunit 安裝與代碼測試

1.nunit 下載與安裝 a.下載 下載地址&#xff1a; http://nunit.org/download/ b.添加到系統環境變量 解壓下載包后&#xff0c;添加兩個路徑到環境變量&#xff0c;如&#xff1a; D:\nunitD:\nunit\nunit-console 2.建立測試項目 a.建立class project b.project 里re…

如何將您的Google Authenticator憑證移至新的Android手機或平板電腦

Most of the app data on your Android is probably synced online will automatically sync to a new phone or tablet. However, your Google Authenticator credentials won’t — they aren’t synchronized for obvious security reasons. Android上的大多數應用程序數據可…

關于經緯度的兩個計算[Teaksxgluxv]

一、子午線周長(公里) 40008.548 赤道周長(公里) 40075.704 緯度40008.548 / 360(度) 111.135 公里/度40008.548 / (360*60)(分) 1.85 公里/分40008.548 / (360*60*60)(秒) 30.87 米/秒 經度首先算相應經度位置的緯度圈長度40075.704 * cos(經度)然后方法相同&#xff0c;除…

轉載通過 Docker 實現傳統應用程序的現代化

長期以來&#xff0c;IT 組織將其預算的 80% 用于簡單地維護現有應用程序&#xff0c;而只花費 20% 用于創新。 在過去的 10 年里&#xff0c;這一比例并沒有太大改觀。而同時又必須面對創新的壓力。無論是直接來自客戶的需求&#xff0c;要求提供新的功能&#xff0c;還是來自…

org.eclipse.jdt.internal.compiler包下的類找不到

到maven庫上下載jar包&#xff1a;org.eclipse.jdt.core-3.13.jar <!-- https://mvnrepository.com/artifact/org.eclipse.jdt/org.eclipse.jdt.core --><dependency> <groupId>org.eclipse.jdt</groupId> <artifactId>org.eclipse.jdt.core<…

單元測試02:Open-Cover安裝與使用

1.Open-Cover 用于測試代碼是否被測試過。 1.下載open-cover與ReportGenerator 2.下載壓縮包后&#xff0c;設置系統環境變量&#xff0c;如&#xff1a; D:\OpenCover D:\OpenCover\ReportGenerator2.執行 OpenCover.console -register -target:nunit3-console.exe -targ…

Blazor學習之旅 (6) 路由系統

【Blazor】| 總結/Edison Zhou大家好&#xff0c;我是Edison。許久沒有更新Blazor學習系列了&#xff0c;今天續更。Blazor 的路由系統就和 ASP.NET MVC的路由系統一樣&#xff0c;可以為我們提供靈活的選項&#xff0c;可用于確保用戶請求到達可處理它們并返回用戶想要的信息的…

kindle降級卡大樹_從提示框:Kindle購物流程圖,iOS降級和DIY焊接筆

kindle降級卡大樹Once a week we round up some of the tips from the HTG tips box and share them with the greater readership; this week we’re looking at shopping for Kindles with a flowchart, downgrading iOS, and rolling your own DIY soldering pen. 每周一次&…

MS CRM 2011 Form與Web Resource在JScript中的相互調用

原創地址&#xff1a;http://www.cnblogs.com/jfzhu/archive/2013/02/14/2912580.html 轉載請注明出處 在Form中可以添加一個html的web resource&#xff0c;在web resource里可以用JScript來使用REST Endpoint或者SOAD Endpoint。 你可以在Form中添加一個web resource&#xf…

判斷字符是否在1-15之間

var str $(#name).val();//獲取字符的value var reg /^\S{1,15}$/; //字符在1-15之間的正則 var flag reg.test(str); // 判斷字符與正則是否匹配 if(!flag){ //提示不滿足條件 }轉載于:https://www.cnblogs.com/yxl-java/p/8617661.html

從 .NET 6 更新到 .NET 7

Upgrade from .NET 6 to .NET 7Intro.NET 7 已經發布了一段時間了&#xff0c;將幾個服務升級到了 .NET 7&#xff0c;升級還是比較順利的&#xff0c;也有遇到幾個問題&#xff0c;分享一下TargetFramework首先我們需要將項目文件中的目標框架&#xff08;TargetFramework&…

MySQL-05:pymysql與pycharm設置

PyMySQL介紹 PyMySQL 是在 Python3.x 版本中用于連接 MySQL 服務器的一個庫&#xff0c;Python2中則使用mysqldb。 Django中也可以使用PyMySQL連接MySQL數據庫。 PyMySQL安裝 pip install pymysql 連接數據庫 前置條件&#xff1a; 已有一個MySQL數據庫&#xff0c;并且…

如何將前端數據保存到文件

有時候&#xff0c;網頁上需要提供將當前頁面上的數據導出為本地文件的功能&#xff0c;例如將頁面上的一個表格導出為csv文件。這個功能看似簡單&#xff0c;實際上卻沒有什么直接的方法。由于導出文件的操作&#xff08;比如瀏覽文件目錄&#xff0c;創建本地文件等&#xff…

hdmi-cec_如何使用HDMI-CEC使用PlayStation 4或Pro自動打開電視

hdmi-cecCall it petty, but there’s just something about eliminating the “turn on the TV” portion of firing up your PlayStation 4 that makes the whole process seem faster. And the good news is that getting this action on your setup is as easy and ticking…

Microsoft POS for .NET v1.12 發布了

Microsoft POS for .NET v1.12是一個類庫&#xff0c;它為你的.NET應用程序與POS設備的交互提供了一組簡單統一的接口。使得供應商能夠為常見的POS設備(如收銀機&#xff0c;掃描儀等)輕松開發出通用的應用程序&#xff0c;您可以在此處下載.POSv1.12的更新&#xff1a;與 UPOS…