大家好，我是王我。

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

HTML篇

是什么？有哪些類(lèi)型？

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

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

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

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

CSS篇

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

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

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

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

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

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

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

js篇

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

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

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

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

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

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

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

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

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

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

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元素是通過(guò)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.有用過(guò)瀏覽器緩存嗎？簡(jiǎn)述一下基本的緩存機(jī)制

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

和https之間的區(qū)別

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MVVM：

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

圖片說(shuō)明一下：

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

MVC：

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

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

MVC兩種方式，圖片說(shuō)明：

總結(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)閉前。也就是說(shuō)，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的

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

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

緩存路由組件

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

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

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

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

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

一紅六種方法吧……

了解的請(qǐng)看：

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

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

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

代理可以解決

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

一般都是后端解決跨域問(wèn)題

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

§ 如果你使用cli創(chuàng)建項(xiàng)目（即項(xiàng)目根目錄是），不管用什么ide，即便是用HBuilderX，切記cli項(xiàng)目的編譯器是在項(xiàng)目下的，HBuilderX不管怎么升級(jí)都不會(huì)影響編譯器版本。你需要手動(dòng)npm update來(lái)升級(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è)試好，看有沒(méi)有兼容性問(wèn)題。如果有問(wèn)題，就不要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)制使用，而是開(kāi)發(fā)者自己在manifest里配置開(kāi)啟。

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

§ 云打包的引擎版本說(shuō)明 HBuilderX Alpha，只有1套云打包機(jī)，不管你的HBuilderX alpha版本多少，對(duì)應(yīng)的打包機(jī)一定是最新的alpha版的客戶(hù)端引擎。 HBuilderX正式版，有2套打包機(jī)，一個(gè)是最新正式版，一個(gè)是次新正式版。 中間的緊急更新版本沒(méi)有獨(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書(shū)寫(xiě)規(guī)范

H5新增標(biāo)簽

HTML渲染過(guò)程

css盒子模型概念

css彈性布局概念

事件模型

DOM2級(jí)事件模型

閉包

原型鏈

常見(jiàn)的布局方案

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

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

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

GPU渲染

GPU核心渲染過(guò)程

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

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

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

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

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

WEB緩存方案

——————————

?？途W(wǎng)（）

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

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

- 全面提升IT編程能力

- 程序員交友圣地

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

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

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

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

02、HTML5為什么只需要寫(xiě)？

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

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

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

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

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

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

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

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

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

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

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

04、CSS3新增偽類(lèi)有那些？

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

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

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

08、CSS3有哪些新特性？

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

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

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

02、說(shuō)說(shuō)寫(xiě)Java的基本規(guī)范？

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

04、Java有幾種類(lèi)型的值？(堆：原始數(shù)據(jù)類(lèi)型和棧：引用數(shù)據(jù)類(lèi)型)，你能畫(huà)一下他們的內(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ě)的答案正確了嗎？現(xiàn)在你可以去翻看答案了。

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

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

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

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

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

2.語(yǔ)言類(lèi)，問(wèn)你一些JavaScript語(yǔ)言的問(wèn)題

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