[面試題] 某企業(yè)前端開發(fā)面試題 【HTML & CSS】1. Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?2. 行內(nèi)元素有哪些？塊級(jí)元素有哪些？CSS的盒模型？3. CSS引入的方式有哪些? link和@import的區(qū)別是?4. CSS選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？?jī)?nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高？5. 前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？6. css的基本語句構(gòu)成是？7. 你做的頁面在哪些流覽器測(cè)試過？這些瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？怎么會(huì)出現(xiàn)？解決方法是什么？8. 如何居中一個(gè)浮動(dòng)元素?9. 有沒有關(guān)注HTML5和CSS3?如有請(qǐng)簡(jiǎn)單說一些您對(duì)它們的了解情況！10. 你怎么來實(shí)現(xiàn)下面這個(gè)設(shè)計(jì)圖,主要講述思路 （效果圖省略）11. 如果讓你來制作一個(gè)訪問量很高的大型網(wǎng)站，你會(huì)如何來管理所有CSS文件、JS與圖片？12. 你對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？【Javascript】1. js是什么，js和html 的開發(fā)如何結(jié)合？2. 怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別4. 面向?qū)ο缶幊?b怎么繼承a5. 看看下面alert的結(jié)果是什么view sourceprint? b(x, y, a) {.arguments[2] = 10;.alert(a);}b(1, 2, 3);如果函數(shù)體改成下面，結(jié)果又會(huì)是什么？a = 10;alert(arguments[2] );6. 請(qǐng)編寫一個(gè)JavaScript函數(shù) parseQueryString，它的用途是把URL參數(shù)解析為一個(gè)對(duì)象var obj = parseQueryString(url);alert() // 輸出07. ajax是什么? ajax的交互模型? 同步和異步的區(qū)別? 如何解決跨域問題?8. 什么是閉包？下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index?

• 這是第一條
• 這是第二條
• 這是第三條

大家好，我是王我。

隨著春節(jié)的結(jié)束，各個(gè)行業(yè)也普遍開始了上班的節(jié)奏， 不過本人17號(hào)才上班。為什么？因?yàn)殚L(zhǎng)得帥的都上班比較晚。 當(dāng)然，每到新年結(jié)束，又迎來了一批招聘者與面試者，我來說說作為一年工作經(jīng)驗(yàn)應(yīng)該知道的面試題。

HTML篇

是什么？有哪些類型？

有哪些新類型？簡(jiǎn)要說明其8用法。

有哪些新特性，移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？

響應(yīng)式的原理是什么？

5.多移動(dòng)終端頁面適配是如何實(shí)現(xiàn)的？

CSS篇

1.如何實(shí)現(xiàn)兩列布局，左邊自適應(yīng)，右邊固定寬度？

2.用CSS畫一個(gè)三角形

實(shí)現(xiàn)字體大寫

有哪些常用的屬性值？分別是什么意思？

為absolute，relative，fixed的定點(diǎn)位置

6.用三種方法清除浮動(dòng)

7.請(qǐng)介紹一下margin塌陷問題

js篇

1.什么是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實(shí)現(xiàn))

創(chuàng)建對(duì)象，至少使用三種方法

3.簡(jiǎn)述一下事件穿透以及解決辦法

4.用三種方式判斷變量類型是否是數(shù)組

5.如何實(shí)現(xiàn)對(duì)象的拷貝？

6.什么是閉包？閉包的優(yōu)缺點(diǎn)。

7.簡(jiǎn)述一下ajax請(qǐng)求的過程。

8.簡(jiǎn)述一下new一個(gè)人構(gòu)造函數(shù)的人過程。

9.為什么會(huì)有跨域？是怎么解決跨域問題的？簡(jiǎn)述一下原理。

原始數(shù)據(jù)類型有哪些？

11.學(xué)一個(gè)函數(shù)，判斷一個(gè)變量是否是字符串

有哪些結(jié)果？

13.剪頭函數(shù)和普通函數(shù)有什么區(qū)別？

14.請(qǐng)用三種方法實(shí)現(xiàn)數(shù)組去重

和src有什么區(qū)別？

jquery篇

()和prop()有什么區(qū)別？

和bind有什么區(qū)別？js動(dòng)態(tài)添加的dom元素是通過on還是bind？

和click有什么區(qū)別？

和jquery的ready有什么區(qū)別？

vue篇

1.簡(jiǎn)述一下vue的生命周期及其特點(diǎn)

雙向綁定的原理是什么？

的特點(diǎn)有哪些？和jquery有什么區(qū)別？

4.父子組件之間傳遞數(shù)據(jù)的方法

5.子組件如何共享數(shù)據(jù)？

6.一般有什么工具進(jìn)行數(shù)據(jù)交互？

的原理是什么？

8.簡(jiǎn)述一下$nextTick的用法

瀏覽器篇

、sessionStorage、localStorage的區(qū)別是什么？

2.有用過瀏覽器緩存嗎？簡(jiǎn)述一下基本的緩存機(jī)制

網(wǎng)絡(luò)篇

和https之間的區(qū)別

2.從服務(wù)器的安全考慮，是使用get請(qǐng)求還是post請(qǐng)求？

請(qǐng)求的過程有哪些？

項(xiàng)目經(jīng)驗(yàn)篇

1.項(xiàng)目中遇到的最大挑戰(zhàn)以及解決辦法

2.常見的網(wǎng)頁優(yōu)化有哪些？

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

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

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

前幾次都是各種培訓(xùn)公司，各種忽悠就不提了，說說后面4次面試的經(jīng)歷。

第一次是面一個(gè)小公司，不過他們好像沒有厲害的前端，來面我的是個(gè)后端，一來沒有問我關(guān)于js的知識(shí)，直接問我以前做過什么，有沒有經(jīng)驗(yàn)，我本人不會(huì)吹牛，簡(jiǎn)歷也沒怎么包裝，就是自己把自學(xué)的知識(shí)和做的幾個(gè)小demo弄在上面，也用github掛在頁面上了，不過他根本不點(diǎn)開看，也不問，問我會(huì)不會(huì)vue，我當(dāng)時(shí)對(duì)框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個(gè)就直接掛了。

第二次面試是一個(gè)國企，這個(gè)問了很多問題，都很基礎(chǔ)，js數(shù)據(jù)類型，數(shù)組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因?yàn)樗麄冎饕胘q，所以問了很多jq的操作，關(guān)于節(jié)點(diǎn)的，動(dòng)畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然后問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最后在現(xiàn)場(chǎng)做了個(gè)題目，主要就是布局然后通過ajax呈現(xiàn)數(shù)據(jù)。后面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜后面電話面試不知怎么回事可能表現(xiàn)的不夠自信，雖然沒問技術(shù)，但是我沒啥自信，把沒項(xiàng)目經(jīng)驗(yàn)什么的也不知怎么就一五一十交代了，估計(jì)因?yàn)檫@個(gè)掛掉了。

第三次沒問問題，直接就是一套題開做，我在那做了一個(gè)多小時(shí)。題目就是按照要求一步一步做一個(gè)頁面出來，我也搞忘了我當(dāng)時(shí)卡在哪個(gè)地方了，坐在那得時(shí)候就是做不出來，沒有設(shè)計(jì)圖，要根據(jù)他的描述自己找個(gè)設(shè)計(jì)圖然后做，我第一次遇到這個(gè)有點(diǎn)懵，雖然當(dāng)時(shí)沒做出來，不過回來我自己花了幾個(gè)小時(shí)把它做了。所以這個(gè)也是涼了。

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

最后總結(jié)下如果面的比較初級(jí)的崗位，應(yīng)該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎(chǔ)知識(shí)，對(duì)了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點(diǎn)的，暫時(shí)還沒面過，等以后面過在來回答

1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能

考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

MVVM：

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

圖片說明一下：

說到MVVM就要說一下雙向綁定和數(shù)據(jù)劫持的原理，

MVC：

m:model數(shù)據(jù)模型層 v:view視圖層 c:controller控制器

原理： c層需要控制model層的數(shù)據(jù)在view層進(jìn)行顯示

MVC兩種方式，圖片說明：

總結(jié)：

mvvm與mvc最大的區(qū)別： MVVM實(shí)現(xiàn)了view與model的自動(dòng)同步，也就是model屬性改變的時(shí)候， 我們不需要再自己手動(dòng)操作dom元素去改變view的顯示，而是改變屬性后該屬性對(duì)應(yīng)的view層會(huì)自動(dòng)改變。

不懂得可以復(fù)制鏈接查看：

localStorage 的生命周期是永久性的。假若使用localStorage存儲(chǔ)數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會(huì)讓數(shù)據(jù)消失，除非主動(dòng)的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性

sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的

有一個(gè)文本框 通過v-bind綁定了value屬性 值為myname 是我們?cè)趘ue實(shí)例中定義的屬性 傳統(tǒng)我們獲取文本框值方法 可能通過getElementById找到文本框 然后獲取其value屬性 但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值 所以在后面的按鈕中獲取name值 直接獲取vue實(shí)例對(duì)象data里面的myname屬性即可

【數(shù)據(jù)為尊 ----數(shù)據(jù)映射到瀏覽器 如果數(shù)據(jù)v-model后修改（肯定input）然后到數(shù)據(jù)在有數(shù)據(jù)映射到瀏覽器頁面 ----映射關(guān)系統(tǒng)稱】

緩存路由組件

使用的是vue的一個(gè)組件，參考vue的官方文檔

使用這個(gè)東西可以保證我們?cè)谇袚Q組件的時(shí)候，原來顯示的組件不被銷毀

-----【保障組件的數(shù)據(jù)不會(huì)被切換路由而銷毀數(shù)據(jù)】

Home是對(duì)應(yīng)的組件對(duì)象的名字，不是路由的名字

數(shù)組拍平也稱數(shù)組扁平化，就是將數(shù)組里面的數(shù)組打開，最后合并為一個(gè)數(shù)組

一紅六種方法吧……

了解的請(qǐng)看：

跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。

這樣就可以說同源策略----協(xié)議---端口---域名

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

代理可以解決

請(qǐng)求頭也可以攜帶瀏覽器提示的也可以解決

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

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

§ 如果你使用cli創(chuàng)建項(xiàng)目（即項(xiàng)目根目錄是），不管用什么ide，即便是用HBuilderX，切記cli項(xiàng)目的編譯器是在項(xiàng)目下的，HBuilderX不管怎么升級(jí)都不會(huì)影響編譯器版本。你需要手動(dòng)npm update來升級(jí)編譯器。以及如果你想要安裝less、scss等預(yù)編譯器，也需要自己npm安裝在項(xiàng)目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請(qǐng)注意HBuilderX升級(jí)后，真機(jī)運(yùn)行基座和云打包對(duì)應(yīng)引擎跟隨HBuilderX升級(jí)，而你的sdk需要手動(dòng)升級(jí)。sdk的版本升級(jí)一般滯后HBuilderX正式版升級(jí)一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會(huì)跟隨HBuilderX升級(jí)的，升級(jí)HBuilderX后你應(yīng)該重新制作新版自定義基座。

§ 如果你使用wgt升級(jí)，新版HBuilderX編譯的wgt，運(yùn)行到之前的runtime上，一定要先測(cè)試好，看有沒有兼容性問題。如果有問題，就不要wgt升級(jí)，整包升級(jí)。

§ 考慮到向下兼容，uni-app編譯器在升級(jí)為新的自定義組件模式后，同時(shí)保留了對(duì)老編譯模式的向下兼容。 在HBuilderX alpha版中，App端一定會(huì)使用新編譯器，不理會(huì)manifest配置。 在HBuilderX 正式版中，新創(chuàng)建的項(xiàng)目會(huì)使用新編譯器，老項(xiàng)目不會(huì)強(qiáng)制使用，而是開發(fā)者自己在manifest里配置開啟。

§ 如果你使用其他ide開發(fā)uni-app，會(huì)經(jīng)常因?yàn)槠村e(cuò)單詞而運(yùn)行失敗，因?yàn)榻?jīng)過webpack編譯一道，很多錯(cuò)誤反應(yīng)的不夠直觀，排錯(cuò)時(shí)間很長(zhǎng)，不如從開始就依賴有良好提示的HBuilderX，避免敲錯(cuò)單詞。

§ 云打包的引擎版本說明 HBuilderX Alpha，只有1套云打包機(jī)，不管你的HBuilderX alpha版本多少，對(duì)應(yīng)的打包機(jī)一定是最新的alpha版的客戶端引擎。 HBuilderX正式版，有2套打包機(jī)，一個(gè)是最新正式版，一個(gè)是次新正式版。 中間的緊急更新版本沒有獨(dú)立打包機(jī)。 舉個(gè)例子： HBuilderX 有、、、、這幾個(gè)正式版。 那么當(dāng)前可用的打包機(jī)有和這2臺(tái)。（即每個(gè)大版本的最后一個(gè)版本） 除了這2個(gè)HBuilderX版本外，其他版本的云打包都指向最新的版對(duì)應(yīng)的打包機(jī)。（即只保留2個(gè)大版本的云打包機(jī)）

【詳情請(qǐng)看】

HTML書寫規(guī)范

H5新增標(biāo)簽

HTML渲染過程

css盒子模型概念

css彈性布局概念

事件模型

DOM2級(jí)事件模型

閉包

原型鏈

常見的布局方案

移動(dòng)端前端常見的觸摸相關(guān)事件touch、tap、swipe等整理

移動(dòng)端前端手勢(shì)事件

移動(dòng)端頁面渲染優(yōu)化

GPU渲染

GPU核心渲染過程

常用的調(diào)試工具

Chrome控制臺(tái)調(diào)試js使用

移動(dòng)端測(cè)試

常見的HTTP狀態(tài)碼

不同請(qǐng)求類型的區(qū)別

WEB緩存方案

——————————

?？途W(wǎng)（）

- 專業(yè)IT筆試面試備考平臺(tái)

- 最全C++JAVA前端等互聯(lián)網(wǎng)技術(shù)求職題庫

- 全面提升IT編程能力

- 程序員交友圣地

分享了一些Web前端的面試題，限時(shí)一小時(shí)，你看看自己能夠答出多少道！

放心，這些面試題都是一些非?；A(chǔ)的知識(shí)，只要你在平時(shí)認(rèn)真聽課、學(xué)習(xí)了，那么這些面試題肯定不會(huì)難道你。

建議：雖然沒有人監(jiān)督你，但還是希望你不要去尋找答案，脫離百度，拿起紙筆，你試一下自己究竟能夠答出個(gè)什么水平！有沒有真本領(lǐng)？答案盡在這些面試題里！那么，你準(zhǔn)備好了嗎？OK！計(jì)時(shí)開始！

01、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？

02、HTML5為什么只需要寫？

03、行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？

04、頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

05、介紹一下你對(duì)瀏覽器內(nèi)核的理解？

06、常見的瀏覽器內(nèi)核有哪些？

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

08、如何區(qū)分HTML和HTML5？

09、簡(jiǎn)述一下你對(duì)HTML語義化的理解？

10、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

01、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

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

03、CSS優(yōu)先級(jí)算法如何計(jì)算？

04、CSS3新增偽類有那些？

05、如何居中p？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的p居中？

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

07、position的值relative和absolute定位原點(diǎn)是？

08、CSS3有哪些新特性？

09、請(qǐng)解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場(chǎng)景？

10、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

01、介紹Java的基本數(shù)據(jù)類型。

02、說說寫Java的基本規(guī)范？

03、Java原型，原型鏈？有什么特點(diǎn)？

04、Java有幾種類型的值？(堆：原始數(shù)據(jù)類型和棧：引用數(shù)據(jù)類型)，你能畫一下他們的內(nèi)存圖嗎？

05、Java如何實(shí)現(xiàn)繼承？

06、Java創(chuàng)建對(duì)象的幾種方式？

07、Java作用鏈域？

08、談?wù)凾his對(duì)象的理解。

09、eval是做什么的？

10、什么是window對(duì)象？什么是document對(duì)象？

OK，一小時(shí)到了，這個(gè)時(shí)間可不算短了，那么這些面試題你答出了幾道呢？你寫的答案正確了嗎？現(xiàn)在你可以去翻看答案了。

如果你答出了絕大多數(shù)的或者是全部的題，并且答案也正確了，那么恭喜你……

你這時(shí)心里是不是有點(diǎn)小竊喜，認(rèn)為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實(shí)上這只能表明你的基礎(chǔ)扎實(shí)，畢竟這只是一些非常基礎(chǔ)的面試題。騷年~繼續(xù)努力吧！

如果你只答出了小部分或者答出了大部分題但答案不正確，那么我只想說：“騷年，你的水平還差的遠(yuǎn)呢?！边B這么基礎(chǔ)的題你都打不出來，還想拿高薪？回去再練一段時(shí)間吧！

扎實(shí)的基礎(chǔ)是你拿高薪的重要武器，如果你連基礎(chǔ)都不扎實(shí)，那么想要攻克“高薪”這個(gè)厚實(shí)的堡壘，那只是癡人說夢(mèng)罷了。

1.前端框架類問題，問你會(huì)不會(huì)用vue react啊

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

3.項(xiàng)目經(jīng)驗(yàn)，讓你講講做過的項(xiàng)目，遇到的問題和解決之道

一次for循環(huán)完成1!+2!+...+10!.c main() { long s=0,n=1; int i; for(i=1;i<=10;i++) { n=n*i; s=s+n; } printf("s=%ld\n",s); } 楊輝三角.c main() { int a[10][10], x, y; for(x=0;x<10;x++) for(y=0;y<10;y++) a[x][y]=0; for(x=0;x<10;x++) a[x][0]=1; for(x=1;x<10;x++) for(y=1;y<10;y++) { a[x][y]=a[x-1][y-1]+a[x-1][y]; if(a[x][y]==1) break; } for(x=0;x<10;x++) { for(y=0;y<10;y++) { if(a[x][y]!=0) printf("%d",a[x][y]); } printf("\n"); } } 連接兩字符串.c #include "" main() { int i,j=0; char str1[50], str2[20]; scanf("%s%s",str1,str2); for(i=0;str1[i]!='\0';i++); for(;;i++,j++) { str1[i]=str2[j]; if(str1[i]=='\0') break; }找閏年.c main() { int a; scanf("%d",&a); if( ( (a%4==0) && (a%100!=0) ) || (a%400==0) ) printf("閏年\n"); } 找水仙花數(shù).c main() { int g, s, b, x; for(x=100;x<1000;x++) { g=x%10; s=x/10%10; b=x/100; if( g*g*g + s*s*s + b*b*b == x ) printf("%d\t",x); } } 百錢買百雞.c main() { int x, y, z; for(x=0;x<=20;x++) { for(y=0;y<=34;y++) { z = 100 - (x+y) ; if ( 5*x + 3*y + z/3 == 100 ) printf( "\t公雞%d只\t母雞%d只\t小雞%d只\n", x, y, z ); } } }