2022最新web前端面試題

時間：2023-09-07 11:00:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-07 11:00:02 來源：網(wǎng)站運(yùn)營

2022最新web前端面試題：對Web標(biāo)準(zhǔn)的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端開發(fā) 技術(shù)等

Doctype作用? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?

（1）、 聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個文檔。

（2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。













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

（1）CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，比如div默認(rèn)display屬性值為“block”，成為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

（2）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

CSS的盒子模型？

（1）兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

link 和@import 的區(qū)別是?

（1）、link屬于XHTML標(biāo)簽，而@import是CSS提供的;

（2）、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）、import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題;

（4）、link方式的樣式的權(quán)重 高于@import的權(quán)重.

CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？

鮮為人知的是：

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標(biāo)簽選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul < li）

6.后代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = “external”]）

9.偽類選擇器（a: hover, li: nth – child）

可繼承： font-size font-family color, UL LI DL DD DT;

不可繼承 ：border padding margin width height ;

優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);




載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級為:

!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。

如何居中div,如何居中一個浮動元素?

給div設(shè)置一個寬度，然后添加margin:0 auto屬性

div{width:200px;margin:0 auto;}

居中一個浮動元素

確定容器的寬高 寬500 高 300 的層

設(shè)置層的外邊距

.div {Width:500px ; height:300px;//高度可以不設(shè)Margin: -150px 0 0 -250px;position:relative;相對定位background-color:pink;//方便看效果left:50%;top:50%;}

瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；

png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)

漸進(jìn)識別的方

式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。

接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。

css

.bb{background-color:#f1ee18;/*所有識別*/.background-color:#00deff9; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)?。?br>
IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性;Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性；

Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

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

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，地理定位等功能的增加。

繪畫 canvas 元素

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

CSS3實(shí)現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba

新的技術(shù)webworker, websockt, Geolocation

移除的元素

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

是IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!–[if lt IE 9]><script> src=”http://html5shim.googlecode.com/svn/trunk/html5.js”</script><![endif]–>

你怎么來實(shí)現(xiàn)頁面設(shè)計圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個滿屏 品 字布局 如何設(shè)計?

首先劃分成頭部、body、腳部；。。。。。

實(shí)現(xiàn)效果圖是最基本的工作，精確到2px；

與設(shè)計師，產(chǎn)品經(jīng)理的溝通和項目的參與

做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)

處理hack，兼容、寫出優(yōu)美的代碼格式

針對服務(wù)器的優(yōu)化、擁抱 HTML5。

常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？

-* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。

（理解這些框架的功能、性能、設(shè)計原理）

Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，加載器，js引擎更好）

JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

原型對象也是普通的對象，是對象一個自帶隱式的 proto 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。

原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈。

JavaScript的數(shù)據(jù)對象有那些屬性值？

writable：這個屬性的值是否可以改。

configurable：這個屬性的配置是否可以刪除，修改。

enumerable：這個屬性是否能在for…in循環(huán)中遍歷出來或在Object.keys中列舉出來。

value：屬性值。

當(dāng)我們需要一個屬性的時，Javascript引擎會先看當(dāng)前對象中是否有這個屬性， 如果沒有的話，就會查找他的Prototype對象是否有這個屬性。

function clone(proto) {function Dummy() { }Dummy.prototype = proto;Dummy.prototype.constructor = Dummy;return new Dummy(); //等價于Object.create(Person);}function object(old) {function F() {};F.prototype = old;return new F();}var newObj = object(oldObject);

列出display的值，說明他們的作用。position的值， relative和absolute定位原點(diǎn)是？

1 block 象塊類型元素一樣顯示。

none 缺省值。向行內(nèi)元素類型一樣顯示。

inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

2

absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。

fixed （老IE不支持）

生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。

relative

生成相對定位的元素，相對于其正常位置進(jìn)行定位。

static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中

-（忽略 top, bottom, left, right z-index 聲明）。

inherit 規(guī)定從父元素繼承 position 屬性的值。

頁面重構(gòu)怎么操作？

編寫 CSS、讓頁面結(jié)構(gòu)更合理化，提升用戶體驗(yàn)，實(shí)現(xiàn)良好的頁面效果和提升性能。

語義化的理解？

html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；

在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。

搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。

使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

HTML5的離線儲存？

localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

為什么要初始化CSS樣式。

因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal;}code, kbd, pre, samp { font-family:couriernew,courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

(寫)描述一段語義的html代碼吧。

（HTML5中新增加的很多標(biāo)簽（如：

、、和等）

就是基于語義化設(shè)計原則）

< div id=”header”>< h1>標(biāo)題< /h1>< h2>專注Web前端技術(shù)< /h2>< /div>

語義 HTML 具有以下特性：

文字包裹在元素中，用以反映內(nèi)容。例如：

段落包含在

元素中。

順序表包含在

元素中。

從其他來源引用的大型文字塊包含在

元素中。

HTML 元素不能用作語義用途以外的其他目的。例如：

包含標(biāo)題，但并非用于放大文本。

包含大段引述，但并非用于文本縮進(jìn)?？瞻锥温湓?(
) 并非用于跳行。文本并不直接包含任何樣式信息。例如：
不使用 或
等格式標(biāo)記。類或 ID 中不引用顏色或位置。

absolute的containing block計算方式跟正常流有什么不同？

19 .position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？

對BFC規(guī)范的理解？（W3C CSS 2.1 規(guī)范中的一個概念,它決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān) 系和相互作用。）

iframe有那些缺點(diǎn)？

iframe會阻塞主頁面的Onload事件；

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript

動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

css定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：

/*權(quán)重為1*/div{}/*權(quán)重為10*/.class1{}/*權(quán)重為100*/#id1{}/*權(quán)重為100+1=101*/#id1 div{}/*權(quán)重為10+1=11*/.class1 div{}/*權(quán)重為10+10+1=21*/.class1 .class2 div{}

如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)

eval是做什么的？

它的功能是把對應(yīng)的字符串解析成JS代碼并運(yùn)行；

避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。

寫一個通用的事件偵聽器函數(shù)

markyun.Event = {// 頁面加載完成后readyEvent : function(fn) {if (fn==null) {fn=document;}var oldonload = window.onload;if (typeof window.onload != ‘function’) {window.onload = fn;} else {window.onload = function() {oldonload();fn();};}},// 視能力分別使用dom0||dom2||IE方式 來綁定事件// 參數(shù)： 操作的元素,事件名稱 ,事件處理程序addEvent : function(element, type, handler) {if (element.addEventListener) {//事件類型、需要執(zhí)行的函數(shù)、是否捕捉element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent(‘on’ + type, function() {handler.call(element);});} else {element[‘on’ + type] = handler;}},// 移除事件removeEvent : function(element, type, handler) {if (element.removeEnentListener) {element.removeEnentListener(type, handler, false);} else if (element.datachEvent) {element.detachEvent(‘on’ + type, handler);} else {element[‘on’ + type] = null;}},// 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲)stopPropagation : function(ev) {if (ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}},// 取消事件的默認(rèn)行為preventDefault : function(event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}},// 獲取事件目標(biāo)getTarget : function(event) {return event.target || event.srcElement;},// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；getEvent : function(e) {var ev = e || window.event;if (!ev) {var c = this.getEvent.caller;while (c) {ev = c.arguments[0];if (ev && Event == ev.constructor) {break;}c = c.caller;}}return ev;}};

99%的網(wǎng)站都需要被重構(gòu)是那本書上寫的？

網(wǎng)站重構(gòu)：應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計（第2版）

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

優(yōu)雅降級：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

Node.js的適用場景

高并發(fā)、聊天、實(shí)時消息推送

WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式？

html5 websoket

WebSocket通過Flash

XHR長時間連接

XHR Multipart Streaming

不可見的Iframe

[“1″, “2”, “3”].map(parseInt)[typeof null, null instanceof Object][ [3,2,1].reduce(Math.pow), [].reduce(Math.pow)] ]var val = ‘smtg';console.log(‘Value is ‘ + (val === ‘smtg’) ? ‘Something’ : ‘Nothing’);

1.創(chuàng)建一個對象

function Person(name, age) {this.name = name;this.age = age;this.sing = function() {alert(this.name) }}

2.談?wù)凾his對象的理解。

this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。

但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。

this一般情況下：是全局對象Global。 作為方法調(diào)用，那么this就是指這個對象

3.事件、IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？

1. 我們在網(wǎng)頁中的某個操作（有的操作對應(yīng)多個事件）。例如：當(dāng)我們點(diǎn)擊一個按鈕就會產(chǎn)生一個事件。是可以被 JavaScript 偵測到的行為。

2. 事件處理機(jī)制：IE是事件冒泡、火狐是 事件捕獲；

3. ev.stopPropagation();

4.什么是閉包（closure），為什么要用？

待完善

執(zhí)行say667()后,say667()閉包內(nèi)部變量會存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會存在.使得Javascript的垃圾回收機(jī)制GC不會收回say667()所占用的資源，因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴say667()中的變量。這是對閉包作用的非常直白的描述.

function say667() {// Local variable that ends up within closurevar num = 666;var sayAlert = function() { alert(num); }num++;return sayAlert;}var sayAlert = say667();sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667

5.如何判斷一個對象是否屬于某個類？

使用instanceof （待完善）

if(a instanceof Person){alert(‘yes’);}

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

1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。

2、屬性和方法被加入到 this 引用的對象中。

3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。

var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);

7.JSON 的了解

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小{‘a(chǎn)ge’:’12’, ‘name’:’back’}

8.js延遲加載的方式有哪些

defer和async、動態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

9.ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問題?

待完善

1. 通過異步模式，提升了用戶體驗(yàn)

2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

3. Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。

2. Ajax的最大的特點(diǎn)是什么。

Ajax可以實(shí)現(xiàn)動態(tài)不刷新（局部刷新）

readyState屬性 狀態(tài) 有5個可取值： 0=未初始化 ，1=正在加載 2=以加載，3=交互中，4=完成

ajax的缺點(diǎn)

1、ajax不支持瀏覽器back按鈕。

2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

3、對搜索引擎的支持比較弱。

4、破壞了程序的異常機(jī)制。

5、不容易調(diào)試。

跨域： jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面

10.模塊化怎么做？

立即執(zhí)行函數(shù),不暴露私有成員

var module1 = (function(){var _count = 0;var m1 = function(){//…};var m2 = function(){//…};return {m1 : m1,m2 : m2};})();

11.對Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法：

（優(yōu)點(diǎn)）因?yàn)镹ode是基于事件驅(qū)動和無阻塞的，所以非常適合處理并發(fā)請求，

因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。

此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，

因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情

。

（缺點(diǎn)）Node是一個相對新的開源項目，所以不太穩(wěn)定，它總是一直在變，

而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當(dāng)年的樣子。

12.異步加載的方式

(1) defer，只支持IE

(2) async：

(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack

documen.write和 innerHTML的區(qū)別

document.write只能重繪整個頁面

innerHTML可以重繪頁面的一部分

13.告訴我答案是多少？

(function(x){delete x;alert(x);})(1+5);

函數(shù)參數(shù)無法delete刪除，delete只能刪除通過for in訪問的屬性。當(dāng)然，刪除失敗也不會報錯，所以代碼運(yùn)行會彈出“1”。

14.JS中的call()和apply()方法的區(qū)別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運(yùn)行結(jié)果為：alert(4);

注意：js 中的函數(shù)其實(shí)是對象，函數(shù)名是對 Function 對象的引用。

function add(a,b){alert(a+b);}function sub(a,b){alert(a-b);}add.call(sub,3,1);

15.Jquery與jQuery UI 有啥區(qū)別？

jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計的插件。

提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等

16.jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴(kuò)展：

$.fn.stringifyArray = function(array) {return JSON.stringify(array)}$.fn.parseArray = function(array) {return JSON.parse(array)}

然后調(diào)用：

$(“”).stringifyArray(array)

17.JavaScript中的作用域與變量聲明提升？

其他部分

（HTTP、正則、優(yōu)化、重構(gòu)、響應(yīng)式、移動端、團(tuán)隊協(xié)作、SEO、UED、職業(yè)生涯）

基于Class的選擇性的性能相對于Id選擇器開銷很大，因?yàn)樾璞闅v所有DOM元素。

頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈?zhǔn)秸{(diào)用更好。

比如：var str=$(“a”).attr(“href”);

for (var i = size; i < arr.length; i++) {}

for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開始循環(huán)的時候設(shè)置一個變量來存儲這個數(shù)字，可以讓循環(huán)跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

前端開發(fā)的優(yōu)化問題（看雅虎14條性能優(yōu)化原則）。

（1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。

（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。

（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

（8） 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢。

http狀態(tài)碼有那些？分別代表是什么意思？

100-199 用于指定客戶端應(yīng)相應(yīng)的某些動作。

200-299 用于表示請求成功。

300-399 用于已經(jīng)移動的文件并且常被包含在定位頭信息中指定新的地址信息。

400-499 用于指出客戶端的錯誤。400 1、語義有誤，當(dāng)前請求無法被服務(wù)器理解。401 當(dāng)前請求需要用戶驗(yàn)證 403 服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。

500-599 用于支持服務(wù)器錯誤。 503 – 服務(wù)不可用

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？（流程說的越詳細(xì)越好）

你所知道的頁面性能優(yōu)化方法有那些？

除了前端以外還了解什么其它技術(shù)么？你最最厲害的技能是什么？

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？

18.談?wù)勀阏J(rèn)為怎樣做能是項目做的更好？

19.你對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？

20.加班的看法

加班就像借錢，原則應(yīng)當(dāng)是——救急不救窮

21.平時如何管理你的項目，如何設(shè)計突發(fā)大規(guī)模并發(fā)架構(gòu)？

先期團(tuán)隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等

編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標(biāo)注樣式編寫人，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）；

CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）

JS 分文件夾存放 命民以該JS 功能為準(zhǔn)英文翻譯；

圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

那些操作會造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。

閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）

23.你說你熱愛前端，那么應(yīng)該WEB行業(yè)的發(fā)展很關(guān)注吧？ 說說最近最流行的一些東西吧？

Node.js、Mongodb、npmM、MVVM、MEAN

24.你有了解我們公司嗎？說說你的認(rèn)識？




根據(jù)實(shí)際情況回答即可

25.移動端（比如：Android IOS）怎么做好用戶體驗(yàn)?

作為一名前端工程師，無論工作年頭長短都應(yīng)該必須掌握的知識點(diǎn)有：

1、DOM結(jié)構(gòu) —— 兩個節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動。

2、DOM操作 ——如何添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。

3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤。

5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。

6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

7、塊級元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

8、浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。

9、HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。

10、JSON —— 作用、用途、設(shè)計結(jié)構(gòu)。