導航:首頁 > 程序命令 > 做前端程序員面試做些什麼題

做前端程序員面試做些什麼題

發布時間:2023-08-15 18:01:05

㈠ Web前端崗位面試題有哪些

前端面試題匯總,基本上會有四大類問題,具體如下:
一、HTML

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

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>?
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
4、頁面導入樣式時,使用link和@import有什麼區別?
5、介紹一下你對瀏覽器內核的理解?
6、常見的瀏覽器內核有哪些?
7、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
8、簡述一下你對HTML語義化的理解?
9、HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
11、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
12、iframe有那些缺點?
13、Label的作用是什麼?是怎麼用的?(加 for 或 包裹)
14、HTML5的form如何關閉自動完成功能?
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器?(阿里)
17、頁面可見性(Page Visibility)API 可以有哪些用途?
18、如何在頁面上實現一個圓形的可點擊區域?
19、實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的,是為了解決什麼安全問題?
21、tite與h1的區別、b與strong的區別、i與em的區別?

二、css

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

2、CSS選擇符有哪些?哪些屬性可以繼承?
3、CSS優先順序演算法如何計算?
4、CSS3新增偽類有那些?
5、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
6、display有哪些值?說明他們的作用。
7、position的值relative和absolute定位原點是?
8、CSS3有哪些新特性?
9、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
10、用純CSS創建一個三角形的原理是什麼?

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題?


  1. 1、li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
    2、經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?
    3、為什麼要初始化CSS樣式。
    4、absolute的containing block計算方式跟正常流有什麼不同?
    5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
    6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
    7、對BFC規范(塊級格式化上下文:block formatting context)的理解?
    8、CSS權重優先順序是如何計算的?
    9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
    10、移動端的布局用過媒體查詢嗎?
    11、使用 CSS 預處理器嗎?喜歡那個?
    12、CSS優化、提高性能的方法有哪些?
    13、瀏覽器是怎樣解析CSS選擇器的?
    14、在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
    15、margin和padding分別適合什麼場景使用?
    16、抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]
    17、元素豎向的百分比設定是相對於容器的高度嗎?
    18、全屏滾動的原理是什麼?用到了CSS的那些屬性?
    19、什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
    20、視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)
    21、::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
    22、如何修改chrome記住密碼後自動填充表單的黃色背景 ?
    23、你對line-height是如何理解的?
    24、設置元素浮動後,該元素的display值是多少?(自動變成display:block)
    25、怎麼讓Chrome支持小於12px 的文字?
    26、讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing: antialiased;)
    27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思?
    28、position:fixed;在android下無效怎麼處理?
    29、如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)
    30、display:inline-block 什麼時候會顯示間隙?(攜程)
    31、overflow: scroll時不能平滑滾動的問題怎麼處理?
    32、有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
    33、png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
    34、什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
    35、style標簽寫在body後與body前有什麼區別?

    四、javaScript

    1、介紹JavaScript的基本數據類型。
    2、說說寫JavaScript的基本規范?
    3、JavaScript原型,原型鏈 ? 有什麼特點?
    4、JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?
    5、Javascript如何實現繼承?
    6、Javascript創建對象的幾種方式?
    7、Javascript作用鏈域?
    8、談談This對象的理解。
    9、eval是做什麼的?
    10、什麼是window對象? 什麼是document對象?
    11、null,undefined的區別?
    12、寫一個通用的事件偵聽器函數(機試題)。
    13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少?
    14、關於事件,IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
    15、什麼是閉包(closure),為什麼要用它?
    16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼?
    17、如何判斷一個對象是否屬於某個類?
    18、new操作符具體幹了什麼呢?
    19、用原生JavaScript的實現過什麼功能嗎?
    20、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
    21、對JSON的了解?
    22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?
    23、js延遲載入的方式有哪些?
    24、Ajax 是什麼? 如何創建一個Ajax?
    25、同步和非同步的區別?
    26、如何解決跨域問題?
    27、頁面編碼和被請求的資源編碼如果不一致如何處理?
    28、模塊化開發怎麼做?
    29、AMD(Moles/Asynchronous-Definition)、CMD(Common Mole

    Definition)規范區別?
    30、requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何 緩存的?)
    31、讓你自己設計實現一個requireJS,你會怎麼做?
    32、談一談你對ECMAScript6的了解?
    33、ECMAScript6 怎麼寫class么,為什麼會出現class這種東西?
    34、非同步載入的方式有哪些?
    35、documen.write和 innerHTML的區別?
    36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
    37、.call() 和 .apply() 的含義和區別?
    38、數組和對象有哪些原生方法,列舉一下?
    39、JS 怎麼實現一個類。怎麼實例化這個類
    40、JavaScript中的作用域與變數聲明提升?
    41、如何編寫高性能的Javascript?
    42、那些操作會造成內存泄漏?
    43、JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
    44、jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
    45、jquery中如何將數組轉化為json字元串,然後再轉化回來?
    46、jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
    47、jquery.extend 與 jquery.fn.extend的區別?
    48、jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
    49、談一下Jquery中的bind(),live(),delegate(),on()的區別?
    50、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    51、是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?
    52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)
    53、針對 jQuery性能的優化方法?
    54、Jquery與jQuery UI有啥區別?
    55、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
    56、jquery 中如何將數組轉化為json字元串,然後再轉化回來?
    57、jQuery和Zepto的區別?各自的使用場景?
    58、針對 jQuery 的優化方法?
    59、Zepto的點透問題如何解決?
    60、jQueryUI如何自定義組件?
    61、需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
    62、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
    63、移動端最小觸控區域是多大?
    64、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行,該如何處理呢?
    65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?
    66、移動端的點擊事件的有延遲,時間是多久,為什麼會有? 怎麼解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)
    67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
    68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?
    69、解釋JavaScript中的作用域與變數聲明提升?
    70、那些操作會造成內存泄漏?
    71、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    72、Node.js的適用場景?
    (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
    73、解釋一下 Backbone 的 MVC 實現方式?
    74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
    75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
    76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
    77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
    78、簡述一下 Handlebars 的基本用法?
    79、簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
    80、用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)
    檢測瀏覽器版本版本有哪些方式?
    81、我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

㈡ 你遇到的前端面試題都有什麼

大家好,我是王我。

隨著春節的結束,各個行業也普遍開始了上班的節奏, 不過本人17號才上班。為什麼?因為長得帥的都上班比較晚。 當然,每到新年結束,又迎來了一批招聘者與面試者,我來說說作為一年工作經驗應該知道的面試題。

HTML篇

1.doctype是什麼?有哪些類型?

2.input有哪些新類型?簡要說明其8用法。

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

4.bootstrap響應式的原理是什麼?

5.多移動終端頁面適配是如何實現的?

CSS篇

1.如何實現兩列布局,左邊自適應,右邊固定寬度?

2.用CSS畫一個三角形

3.CSS實現字體大寫

4.display有哪些常用的屬性值?分別是什麼意思?

5.position為absolute,relative,fixed的定點位置

6.用三種方法清除浮動

7.請介紹一下margin塌陷問題

js篇

1.什麼是事件冒泡和捕獲?如何阻止事件冒泡?(分別用原生和jquery實現)

2.js創建對象,至少使用三種方法

3.簡述一下事件穿透以及解決辦法

4.用三種方式判斷變數類型是否是數組

5.如何實現對象的拷貝?

6.什麼是閉包?閉包的優缺點。

7.簡述一下ajax請求的過程。

8.簡述一下new一個人構造函數的人過程。

9.為什麼會有跨域?是怎麼解決跨域問題的?簡述一下原理。

10.js原始數據類型有哪些?

11.學一個函數,判斷一個變數是否是字元串

12.typeof有哪些結果?

13.剪頭函數和普通函數有什麼區別?

14.請用三種方法實現數組去重

15.href和src有什麼區別?

jquery篇

1.attr()和prop()有什麼區別?

2.on和bind有什麼區別?js動態添加的dom元素是通過on還是bind?

3.touch和click有什麼區別?

4.window.onload和jquery的ready有什麼區別?

vue篇

1.簡述一下vue的生命周期及其特點

2.vue雙向綁定的原理是什麼?

3.vue的特點有哪些?和jquery有什麼區別?

4.父子組件之間傳遞數據的方法

5.子組件如何共享數據?

6.一般有什麼工具進行數據交互?

7.webpack的原理是什麼?

8.簡述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區別是什麼?

2.有用過瀏覽器緩存嗎?簡述一下基本的緩存機制

網路篇

1.http和https之間的區別

2.從伺服器的安全考慮,是使用get請求還是post請求?

3.URL請求的過程有哪些?

項目經驗篇

1.項目中遇到的最大挑戰以及解決辦法

2.常見的網頁優化有哪些?

作為一個面試一年以內工作經驗的前端程序員來說,以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。

希望大家年後找工作能夠順順利利, 千萬不要跟我一樣哦,只有帥氣就一無所有了。

大家好,我是王我,中國最帥的前端程序員。

前幾次都是各種培訓公司,各種忽悠就不提了,說說後面4次面試的經歷。

第一次是面一個小公司,不過他們好像沒有厲害的前端,來面我的是個後端,一來沒有問我關於js的知識,直接問我以前做過什麼,有沒有經驗,我本人不會吹牛,簡歷也沒怎麼包裝,就是自己把自學的知識和做的幾個小demo弄在上面,也用github掛在頁面上了,不過他根本不點開看,也不問,問我會不會vue,我當時對框架還不了解,他就說他們需要能直接上手開始寫的,所以我第一個就直接掛了。

第二次面試是一個國企,這個問了很多問題,都很基礎,js數據類型,數組操作,事件,大概就是高程的前面幾章看看就差不多都能答到,然後因為他們主要用jq,所以問了很多jq的操作,關於節點的,動畫的,我看鋒利的jq大概看了3遍,也練過多次,所以我答的很熟。然後問了些布局方面的,bootstrap我了解過,又看過css3,所以這方面也沒啥問題,最後在現場做了個題目,主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意,說我jq很熟,一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信,雖然沒問技術,但是我沒啥自信,把沒項目經驗什麼的也不知怎麼就一五一十交代了,估計因為這個掛掉了。

第三次沒問問題,直接就是一套題開做,我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來,我也搞忘了我當時卡在哪個地方了,坐在那得時候就是做不出來,沒有設計圖,要根據他的描述自己找個設計圖然後做,我第一次遇到這個有點懵,雖然當時沒做出來,不過回來我自己花了幾個小時把它做了。所以這個也是涼了。

第四個問的比較多,數據類型,數組操作,跨域,ajax,閉包,原型鏈,繼承,深拷貝,淺拷貝,模塊amd cmd,基本都是問的js。然後問了html5的新特性 css3 的新特性,遇到過什麼瀏覽器的兼容性問題,怎麼解決的,以後想往什麼方面發展。這個時候我已經會點vue了,照著做了個小demo,不過後來知道公司用的angularjs,面試官也沒看我做的,問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。

最後總結下如果面的比較初級的崗位,應該主要問js,原型鏈,繼承,閉包,深淺拷貝,ajax,跨域,然後js的基礎知識,對了還有apply和call也問了,html5的新特性了解下就行。主要就是看你js掌握的程度,如果稍微要求高一點的,暫時還沒面過,等以後面過在來回答

1. cookie session 的用途和區別,以及有效期

1、cookie數據存放在客戶的瀏覽器上,session數據放在伺服器上。

2、cookie不是很安全,別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在伺服器上。當訪問增多,會比較佔用你伺服器的性能

考慮到減輕伺服器性能方面,應當使用COOKIE。

4、單個cookie保存的數據不能超過4K,很多瀏覽器都限制一個站點最多保存20個cookie。

2. vue的數據綁定原理,mvvm與mvc的區別

MVVM:

m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式,這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密,就是為了解決mvc反饋不及時的問題

圖片說明一下:


說到MVVM就要說一下雙向綁定和數據劫持的原理,

MVC:

m:model數據模型層 v:view視圖層 c:controller控制器

原理: c層需要控制model層的數據在view層進行顯示

MVC兩種方式,圖片說明:


總結:

mvvm與mvc最大的區別:
MVVM實現了view與model的自動同步,也就是model屬性改變的時候, 我們不需要再自己手動操作dom元素去改變view的顯示,而是改變屬性後該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看:

https://www.pianshen.com/article/3716256399/

3. storage 的區別 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存儲數據,即使關閉瀏覽器,也不會讓數據消失,除非主動的去刪除數據,使用的方法如上所示。localStorage有length屬性


sessionStorage 的生命周期是在瀏覽器關閉前。也就是說,在整個瀏覽器未關閉前,其數據一直都是存在的。sessionStorage也有length屬性,其基本的判斷和使用方法和localStorage的使用是一致的


4.v-model雙向數據原理

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改(肯定input)然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】



5.keepAlive用過嗎?什麼作用?

緩存路由組件


使用的是vue的一個組件,參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候,原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

Home是對應的組件對象的名字,不是路由的名字

6.多維數組拍平

數組拍平也稱數組扁平化,就是將數組裡面的數組打開,最後合並為一個數組

一紅六種方法吧……

了解的請看: https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這里跨域是廣義的。

這樣就可以說同源策略----協議---埠---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是後端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§ 如果你使用cli創建項目(即項目根目錄是package.json),不管用什麼ide,即便是用HBuilderX,切記cli項目的編譯器是在項目下的,HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器,也需要自己npm安裝在項目下,而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包,請注意HBuilderX升級後,真機運行基座和雲打包對應引擎跟隨HBuilderX升級,而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座,之前製作的自定義基座是不會跟隨HBuilderX升級的,升級HBuilderX後你應該重新製作新版自定義基座。

§ 如果你使用wgt升級,新版HBuilderX編譯的wgt,運行到之前的runtime上,一定要先測試好,看有沒有兼容性問題。如果有問題,就不要wgt升級,整包升級。

§ 考慮到向下兼容,uni-app編譯器在升級為新的自定義組件模式後,同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中,App端一定會使用新編譯器,不理會manifest配置。
在HBuilderX 正式版中,新創建的項目會使用新編譯器,老項目不會強制使用,而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app,會經常因為拼錯單詞而運行失敗,因為經過webpack編譯一道,很多錯誤反應的不夠直觀,排錯時間很長,不如從開始就依賴有良好提示的HBuilderX,避免敲錯單詞。

§ 雲打包的引擎版本說明
HBuilderX Alpha,只有1套雲打包機,不管你的HBuilderX alpha版本多少,對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版,有2套打包機,一個是最新正式版,一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子:
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。(即每個大版本的最後一個版本)
除了這2個HBuilderX版本外,其他版本的雲打包都指向最新的1.9.1版對應的打包機。(即只保留2個大版本的雲打包機)

【詳情請看】

https://ask.dcloud.net.cn/article/35845

一、HTML

HTML書寫規范

H5新增標簽

HTML渲染過程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級事件模型

閉包

原型鏈

四、移動Web開發

常見的布局方案

移動端前端常見的觸摸相關事件touch、tap、swipe等整理

移動端前端手勢事件

移動端頁面渲染優化

GPU渲染

GPU核心渲染過程

五、調試

常用的調試工具

Chrome控制台調試js使用

移動端測試

六、HTTP網路知識

常見的HTTP狀態碼

不同請求類型的區別

WEB緩存方案

——————————

牛客網(www.nowcoder.com)

- 專業IT筆試面試備考平台

- 最全C++JAVA前端等互聯網技術求職題庫

- 全面提升IT編程能力

- 程序員交友聖地

分享了一些Web前端的面試題,限時一小時,你看看自己能夠答出多少道!

放心,這些面試題都是一些非常基礎的知識,只要你在平時認真聽課、學習了,那麼這些面試題肯定不會難道你。

建議:雖然沒有人監督你,但還是希望你不要去尋找答案,脫離網路,拿起紙筆,你試一下自己究竟能夠答出個什麼水平!有沒有真本領?答案盡在這些面試題里!那麼,你准備好了嗎?OK!計時開始!

一、HTML常見題目

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

02、HTML5為什麼只需要寫?

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

04、頁面導入樣式時,使用link和@import有什麼區別?

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

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

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

08、如何區分HTML和HTML5?

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

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

二、CSS類的題目

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

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

03、CSS優先順序演算法如何計算?

04、CSS3新增偽類有那些?

05、如何居中p?如何居中一個浮動元素?如何讓絕對定位的p居中?

06、display有哪些值?說明他們的作用。

07、position的值relative和absolute定位原點是?

08、CSS3有哪些新特性?

09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?

10、用純CSS創建一個三角形的原理是什麼?

三、Java類的題目

01、介紹Java的基本數據類型。

02、說說寫Java的基本規范?

03、Java原型,原型鏈?有什麼特點?

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

05、Java如何實現繼承?

06、Java創建對象的幾種方式?

07、Java作用鏈域?

08、談談This對象的理解。

09、eval是做什麼的?

10、什麼是window對象?什麼是document對象?

OK,一小時到了,這個時間可不算短了,那麼這些面試題你答出了幾道呢?你寫的答案正確了嗎?現在你可以去翻看答案了。

如果你答出了絕大多數的或者是全部的題,並且答案也正確了,那麼恭喜你……

你這時心裡是不是有點小竊喜,認為自己有能力拿高薪了?雖然我也很想這么告訴你,但事實上這只能表明你的基礎扎實,畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧!

如果你只答出了小部分或者答出了大部分題但答案不正確,那麼我只想說:「騷年,你的水平還差的遠呢。」連這么基礎的題你都打不出來,還想拿高薪?回去再練一段時間吧!

扎實的基礎是你拿高薪的重要武器,如果你連基礎都不扎實,那麼想要攻克「高薪」這個厚實的堡壘,那隻是痴人說夢罷了。

1.前端框架類問題,問你會不會用vue react啊

2.語言類,問你一些JavaScript語言的問題

3.項目經驗,讓你講講做過的項目,遇到的問題和解決之道

㈢ Web前端面試的常見面試題匯總

今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧,希望本篇文章能夠對大家有所幫助。

1.漸進增強與優雅降級


漸進增強
並不是一種技術,而是一種設計思想。各個瀏覽器的渲染能力各不相同,要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性,保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等),並為他們提供當前條件下最好的體驗,這就是漸進增強得核心思想。


優雅降級也是一種設計思想,為了保證在高版本瀏覽器中提供最好的體驗,碰到低版本瀏覽器再降級進行兼容處理,使其能正常瀏覽。


這兩種思想的區別在於:


1.漸進增強是向上兼容,優雅降級是向下兼容;


2.漸進增強是從簡單到復雜,優雅降級是從復雜到簡單;


3.漸進增強關注的是內容(保證核心內容),優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型,決定何種協議來解析,以及切換瀏覽模式。


DOCTYPE是用來聲明文檔類型和DTD
規范的,一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法,那麼瀏覽器解析時便會出現一些差錯。


HTML5的文檔類型聲明:





HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性,但不包括展示性的和棄用的元素(如font),它的文檔類型聲明:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


標准模式與怪異模式


怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規范,隨著瀏覽器支持越來越多的規范,在那些舊的瀏覽器中開發的頁面在顯示時會被破壞。為了向後兼容,瀏覽器發明了怪異模式,一行錯誤或無效的
DOCTYPE都會觸發怪異模式。


瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔,以及執行相同的渲染模式。


怪異模式與標准模式的主要區別:


1.怪異模式的寬度和高度會包含padding和border。標准模式不包含,標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。


2.怪異模式下,當內容超出容器高度時,會將容器拉伸,而不是溢出。


3.怪異模式下,在表格中的字體樣式(如font-size)不會繼承。


4.怪異模式下顏色值必須使用十六進制標記法。


3.語義化


HTML5
中的語義化就是讓元素、屬性或屬性值有含義,更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離,元素只負責文檔內容的結構與含義,而CSS
樣式控制內容的呈現,像元素,沒有語義但卻能將字體變粗,這類元素違背了語義化的目的,將會被廢棄。


優點


·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。


·有利於SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。


·方便其他設備解析,如盲人閱讀器根據語義渲染網頁。


·有利於開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。


語義化標簽


·
定義文檔的頁眉區域,應作為介紹內容或者導航鏈接欄的容器;


·footer內容的頁腳,通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;


·article
文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件,或者其他獨立的內容項目;


·nav描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;


·section表示文檔中的一個區域(或節),比如,內容中的一個專題組;


·main定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站
logo,搜索框(搜索框作為文檔的主要內容);


·aside
表示一個和其餘頁面內容幾乎無關的部分,被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。


4.超鏈接偽類


:link、:visited、:active和:hover的聲明順序是怎樣的?


:link表示未訪問的鏈接狀態;


:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。


推薦順序是LVHA,即:link:visited:hover:active。理由如下:


·當滑鼠懸停在未訪問的鏈接上時,:link和:hover都會命中,如果:hover在:link
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠懸停在已訪問的連接上時,:visited和:hover都會命中,如果:hover在:visited
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠單擊鏈接時,:active和:hover都會命中,我們大多是想讓:hover只在懸停時展示樣式,按下滑鼠時使用:active
樣式,因此:active在:hover之後聲明;


·綜上,:hover應在:link和:visited之後,在:active之前,因此active在最後。而:link和
:visited兩者的順序無所謂,互不影響。


5.CSS常見的長度單位


CSS中除了px長度單位之外,還有下面幾個長度單位:


·pc六分之一英寸,1pc=12pt=1/6*1in=16px;


·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸,1in=2.54cm=96px;


·ex在含有「X」字母的字體中,它是該字體的小寫字母的高度。對於很多字體來說,1ex≈0.5em;


·em1em等於父級元素的字體大小,2em就是父級元素字體大小的二倍;


·rem當用在根元素()的font-size上面時,它代表了它的初始值;


·ch代表元素所用字體font中「0」這一字形的寬度;


·vh1vh相當於視口高度的1%,100vh就是視口的高度;


·vw1vw相當於視口寬度的1%,100vw就是視口的寬度;


·vmax視口高度vw和寬度vh兩者中的最小值


·vmin視口高度vw和寬度vh兩種中的最大值;


·%相對於父級元素的大小來確定;


參考:CSS[1]


CSSpercentage[2]


6.事件對象


冒泡與捕獲


事件冒泡與捕獲是事件處理的兩種機制,主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。


在點擊子元素時,瀏覽器運行了兩種不同的階段:捕獲階段和冒泡階段。捕獲階段的行為:


·瀏覽器檢查元素的最外層祖先,是否在捕獲階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·
然後,它移動到中單擊元素的下一個祖先元素,並執行相同的操作,然後是單擊元素再下一個祖先元素,依此類推,直到到達實際點擊的元素;


而冒泡與捕獲恰恰相反:


·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·然後它移動到下一個直接的祖先元素,並做同樣的事情,然後是下一個,等等,直到它到達元素;


而現代瀏覽器在默認情況下,所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件,然後向上冒泡,觸發父元素綁定的事件。


addEventListener函數的第三個參數是個布爾值。含義:


·當布爾值是false時(這也是默認值),表示向上冒泡觸發事件;


·當布爾值是true時,表示向下捕獲觸發事件;


不能冒泡的事件


有些事件是不會冒泡的。比如:


·blur元素失去焦點時觸發,focusout事件也是失去焦點時觸發,但可以冒泡;


·focus元素獲取焦點時觸發;


·mouseenter滑鼠移動到元素上時會觸發該事件,與之對應的是mouseover事件,但會冒泡;


·mouseleave滑鼠離開元素時觸發,與之對應的是mouseout,但會冒泡;


事件冒泡可以讓我們利用事件委託,尤其是處理大量子元素時,如果給每個子元素都綁定事件,這是不優雅的,可以將事件綁定到父元素上,並讓子節點上發生的事件冒泡到父節點上,利用
e.target屬性可以獲取到當前觸發事件的子元素。


事件對象中的方法


·stopPropagation()阻止事件冒泡,當設置後,點擊該元素時父元素綁定的事件就不會再觸發;


·preventDefault()阻止默認事件的發生;


·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡,比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個),當在第二個事件函數中調用
stopImmediatePropagation方法時,點擊div元素時,後面注冊的click將不會被觸發,而且還會阻止事件冒泡;


比如下面的例子,給p綁定多個click事件,在第二個事件函數中調用stopImmediatePropagation,第三個click
事件就不會觸發,因為也阻止了冒泡,因此父元素的click事件也不會觸發。





paragraph




與做前端程序員面試做些什麼題相關的資料

熱點內容
android獲取apn 瀏覽:69
phpfpm進程池 瀏覽:791
解壓掏耳朵音頻 瀏覽:670
爬香山解壓 瀏覽:948
演算法導論回溯 瀏覽:339
開盤指標源碼查詢 瀏覽:526
有道雲保存伺服器出錯 瀏覽:639
生成360文件夾 瀏覽:1004
圖庫的文件夾是哪個 瀏覽:505
程序員為什麼葯學日語 瀏覽:423
熟悉linux常用命令 瀏覽:860
印度外賣小哥是程序員 瀏覽:413
紹興程序員開發駐場流程 瀏覽:546
索納塔8的壓縮比 瀏覽:16
私有雲主要伺服器 瀏覽:939
為什麼主題解壓那麼慢 瀏覽:862
怎麼下載掃描二維碼的手機app 瀏覽:729
雲伺服器創建私有鏡像的時候一定要關機嗎 瀏覽:117
php開發學習門戶 瀏覽:387
傳奇游戲伺服器怎麼設置 瀏覽:825
© Arrange www.craffts.com 2012-2022
溫馨提示:資料來源於互聯網,僅供參考