js預編譯筆試題

㈠ 47道基礎的VueJS面試題(附答案)

1、什麼是MVVM框架？它適用於哪些場景？

MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。

2、active- class是哪個組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動態路由？

在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。

4、如何獲取傳過來的動態參數？

在組件中，使用$router對象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導航鉤子？

有3種。

第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。

第二種是組件內的鉤子。

第三種是單獨路由獨享組件。

6、mint-ui是什麼？如何使用？

它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和javaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。

7、V-model是什麼？有什麼作用？

v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。

8、Vue.js中標簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過v-on指令， 。

第二種，通過@語法糖， input@ click= doLog()/>。

9、vuex是什麼？如何使用？在哪種功能場景中使用它？

vuex是針對 Vue. js框架實現的狀態管理系統。

為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。

使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。

10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？

自定義指令包括以下兩種。

它有如下鉤子函數。

鉤子函數的參數如下。

11、至少說出vue.js中的4種指令和它們的用法。

相關指令及其用法如下。

12、Vue-router是什麼？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導航鉤子有哪些？它們有哪些參數？

導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個路由獨享鉤子有 beforeEnter。

組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數。

14、Vue.js的雙向數據綁定原理是什麼？

具體步驟如下。

（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。

（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。

15、請詳細說明你對Vue.js生命周期的理解。

總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當使用組件的kep- alive功能時，增加以下兩個周期。

Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。

16、請描述封裝Vue組件的作用過程。

組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。

使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。

17、你是怎樣認識vuex的？

vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。

18、Vue- loader是什麼？它的用途有哪些？

它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。

用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。

19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。

assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。

20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。

（2）導入需要用到的頁面（組件）。

（3）將導入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談談你對vue.js的 template編譯的理解。

簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。

詳細步驟如下。

（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。

（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。

22、說一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區別是什麼？

v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。

24、如何讓CSS只在當前組件中起作用？

在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。

25、如何創建vue.js組件？

在vue.js中，組件要先注冊，然後才能使用。具體代碼如下

26、如何實現路由嵌套？如何進行頁面跳轉？

路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。

首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。

27、ref屬性有什麼作用？

有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什麼？

Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開發

（3）指令系統

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點。

Vue. js有以下特點。

31、在vue.js中如何綁定事件？

通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。

32、請說明 組件的作用。

當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。

當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。

33、axios是什麼？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。

用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。

34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？

當調用post方法表示在發送post非同步請求。

35、sass是什麼？如何在ue中安裝和使用？

sass是一種CSS預編譯語言安裝和使用步驟如下。

（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。

（2）在 webpack. config. js中配置sass載入程序。

（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環插入圖片？

對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。

代碼如下：

㈡ 下面js代碼 結果是什麼，怎麼解釋

這個題類似的我遇到過，剛運行了一下，氏譽基是100,10,100，關鍵是js預編譯，類似的題還有

var tt = 'aa';
function test(){
alert(tt); --undefined
alert(this.tt);--aa
var tt = 'dd';
alert(tt); --dd
alert(this.tt);--aa
一個函數被定義的時候 它的「可訪問屬性鏈」會被生成，以上函數的可訪問屬性鏈 self->window。

當它被執行的時候，首先創建函數自定義的變數（如 var a; 無論a在函數殲謹哪個地方定義，函數執行時會首先被創建，值為undifined）
函數引用到一個變數的時候，會循著「可虛耐訪問屬性鏈」查找，如果自身有定義，則不訪問window。
ps 不敢瞎解釋，僅代表個人觀點，希望有幫助

㈢ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

HTML、CSS部分

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

HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增加。

* 繪畫 canvas 元素

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

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控制項，calendar、date、time、email、url、search

CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

* 是IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽後，還需要添加標簽碰兆雹默認的樣式：

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

9.你怎麼來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部；。。。。。

*
實現效果圖是最基本的工作，精確到2px；

與設計師，產品經理的溝通和項目的參與

做好的頁面結構，頁面重構和用戶體驗

處理hack，兼容、寫出優美的代碼格式

針對伺服器的優化、擁抱 HTML5。

10.常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？
* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解這些框架的功能、性能、設計原理）

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

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

JavaScript原型，原型鏈 ? 有什麼特點？

* 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。
* 原型鏈是由一些用來繼承和共享屬笑帆性的對象組成的（有限的）對象鏈。

* JavaScript的數據對象有那些屬性值？

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

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

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

value：屬性值。

* 當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，就會查找他的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);

12.列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
1. block 象塊類型元素一樣顯示。
none 預設值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。

2.
*absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

*fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。

*relative
生成相對定位的元素，相對於其正常位置進行定位。

* static 默認值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。

* inherit 規定從父元素繼承 position 屬性的值。

13.頁面重構怎麼操作？
編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。

14.語義化的理解？
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

15.HTML5的離線儲存？
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。

16.為什麼要初始化CSS樣式。

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對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, \5b8b\4f53; }
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; }

17.(寫)描述一段語義的html代碼吧。
（HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）
就是基於語義化設計原則）

< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>

語義 HTML 具有以下特性：

文字包裹在元素中，用以反映內容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如：
<h1>包含標題，但並非用於放大文本。
<blockquote>包含大段引述，但並非用於文本縮進。
空白段落元素 ( <p></p> ) 並非用於跳行。
文本並不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。

18.absolute的containing block計算方式跟正常流有什麼不同？
19.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
20.對BFC規范的理解？（W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。）
21.iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

22.css定義的權重
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

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

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

23.eval是做什麼的？
它的功能是把對應的字元串解析成JS代碼並運行；
避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

23.寫一個通用的事件偵聽器函數
`// event(事件)工具集，來源：https://github.com/markyun
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方式 來綁定事件
// 參數： 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執行的函數、是否捕捉
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;
}
},
// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
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;
}
};

24.99%的網站都需要被重構是那本書上寫的？
* 網站重構：應用web標准進行設計（第2版）

25.什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。

26.Node.js的適用場景
高並發、聊天、實時消息推送

27.WEB應用從伺服器主動推送Data到客戶端有那些方式？ html5 websoket
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
不可見的Iframe
<script>標簽的長時間連接(可跨域)

㈣ javascript筆試題，如下，我想知道function f(){}為什麼成立，為什麼typeof f之後就是string類型

function f(){}是碰陵慶建立一個函數對象，汪乎雖然函數內部的函數體是空的，但這個對象本身是真實存在的，所以用if進行條件測試笑握時，它是等價於true的，所以是成立的。
typeof f 的返回值是個字元串（即"function"），把它與變數y的值（即數字1）進行字元串拼接後，結果也是字元串（即"1function"），所以就是string類型咯。

㈤ 誰能給我出一兩道 web前端筆試題 上機題啥的，呵呵，比較常考的

[面試題] 某企業前端開發面試題

【HTML & CSS】

1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

2. 行內元素有哪些？塊級元素有哪些？CSS的盒模型？

3. CSS引入的方式有哪些? link和@import的區鄭爛慧別是?

4. CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先順序高？

5. 前端頁面有哪三層構成，分別是什麼？作用是什麼？

6. css的基本語句構成是？

7. 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？

8. 如何居中一個浮動元素?

9. 有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況！

10. 你怎麼來實現下面這個設計圖,主要講述思路 （效果圖省略）

11. 如果讓你來製作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片？

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

【Javascript】

1. js是什麼，js和html 的開發如何結合？

2. 怎樣添加、移除、移動、復制、創建和查找節點

3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別

4. 面向對象編程:b怎麼繼承a

5. 看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函喊答數體改成下面，結果又會是什麼？
a = 10;
alert(arguments[2] );

6. 請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0

7. ajax是什麼? ajax的交互模型? 同步和非同步的區別? 如何解決跨域問題?

8. 什麼是閉歷液包？下面這個ul，如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>

9. 最近看的一篇Javascript的文章是？

10. 常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？

11.說說YSlow(可以詳細一點)

答案在參考資料裡面可以找到，答案在參考資料裡面可以找到，答案在參考資料裡面可以找到

㈥ web前端筆試題(HTML/CSS篇)

web前端筆試題集錦(HTML/CSS篇)

導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。

一、HTML/CSS

1，讓一個input的背景顏色變成紅色

2，div的高寬等於瀏覽器可見區域的高寬，瀏覽派鋒器滾動，div始終覆蓋瀏覽器的整個可見區域

思路：

(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;

(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條

(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條

(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px

這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。

3，IE、FF下面CSS的清羨卜解釋區別

(1) 讓頁面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的設置+text-align:center

(2) ff：不支持濾鏡

ie：支持濾鏡

(3) ff：支持!important

ie支持*，ie6支持_

(4) min-width,min-height

FF支持，IE不支持，IE可以用css expression來替代

(5) Css Expression

FF不支持，IE支持

(6) cursor：hand

IE下可以顯示手指狀，FF下不行

(7) UL的默認padding和margin

IE下ul默認有margin，FF下ul默認有padding

(8) FORM的默認margin

IE下FORM有默認margin，FF下margin默認為0

4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的.HTML標簽及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)

5，CSS中margin和padding的區別

margin是元素的外邊框，是元素邊框和相答穗鄰元素的距離

Padding是元素的內邊框，是元素邊框和子元素的距離

6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉菜單選擇。

思路：

(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇

(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指

7，

中alt和tittle的區別

alt：圖片顯示不出來了就提示alt

title：滑鼠劃過圖片顯示的提示

8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。

在這里我使用了兩種方式：

(1)使用position

HTML:

left

right

(2) 使用float

HTML:

固定寬度

自適應

二者的CSS公用，如下：

html,body{width:100%;height:100%;margin:0px;padding:0px;}

.container {width:100%;height:400px;position:relative;}

.fl1 {float:left;}

.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

.clear {clear:both;overflow:hidden;height:0px;}

.container2 {width:100%;height:400px;margin-top:100px;}

.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

.right2 {height:400px;background:#f9afff;}

9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

em是相對長度單位，相當於當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對於瀏覽器的默認字體尺寸。

該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍

10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什麼版本，其中的DTD叫文檔類型定義，裡麵包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識並展現出來

DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。

嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5隻支持混雜模式。

可那個過DOCTYPE聲明來判斷哪種模式被觸發

(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析

(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析

(3) 對於瀏覽器不能識別的DOCTYPE聲明，瀏覽器採用嚴格模式解析

(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如

，採用混雜模式解析，在IE7，IE8中這條規則不生效。

(5) 在ie下，如果DOCTYPE之前有任何字元，都會導致它進入混雜模式，如：

區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。

常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

CSS盒模型用於描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最裡面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。

11，CSS引入的方式有哪些? link和@import的區別?

引入css的方式有下面四種

(1) 使用style屬性

(2) 使用style標簽

(3) 使用link標簽

(4) 使用@import引入

Link和@import區別：

(1) link屬於XHTML標簽，@import是CSS提供的一種方式。Link除了載入CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能載入CSS

(2)載入順序不同，當頁面被載入的時候，link載入的CSS隨之載入，而@import引用的CSS會等到頁面完全下載完之後才會載入

(3)兼容性差別，由於@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題

使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。

12，如何居中一個浮動元素?

一個浮動元素裡麵包含的元素可以水平居中，原理如下：

讓浮動元素left相對於父元素container右移50%，浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中

垂直居中類似，不過操作的不是left而是top

13，HTML5和CSS3的了解情況

有所了解

HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基於他們的應用。

HTML5相對於原來的HTML規范有一些變化：

(1)DOCTYPE更簡潔

(2)新增了一些語義化標簽，如article,header,footer,dialog等

(3)新增了一些高級標簽，如,,

CSS3相對於CSS2也新增了不少功能

(1) 選擇器更加豐富

(2) 支持為元素設置陰影

(3) 無需圖片能提供圓角

14，你怎麼來實現下面這個設計圖

(1) 切圖

(2) 布局，採用兩欄布局，分別左浮動

(3) 編寫css代碼

15，css 中id和class如何定義,哪個定義的優先順序別高?

id：#***，***為HTML中定義的id屬性

class:.***，***為HTML中定義的class屬性

id比class的優先順序高

16，用html實現如下表格(不如嵌套實用表格)

三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)

運行結果如下：

17，web標准網站有那些優點

(1) Web標准網站結構和布局分離，使網站的訪問和維護更加容易

(2) Web標准網站結構，布局以及頁面訪問都標准化，使網站能在更多的web標准設備中訪問，兼容性更好

(3) Web標准網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。

;

㈦ 那些陌生又熟悉的前端面試題

過完年需要跳槽的小夥伴還是挺多的，又要開始刷前端面試題了！會不會有一種錯覺，看著這道面試題很熟，但是不知道該如何做？或者有答案又不知道是否正確？或者使用編輯器可以運行出來正確的答案，但是不知道怎麼得來的，這些你都中招了嗎？

JavaScript 語言是一門弱類型語言，存在許多類型錯誤，因此 ES6 引入了嚴格模式概念。

如果不加 『use strict』 常規模式下就是屬於非嚴格模式。

嚴格模式

在 js 文件頂部添加 『use strict』 就屬於嚴格模式，嚴格模式也可以指定在函數內部。

嚴格模式，是為 js 定義來了一種不同的解析與執行模型，在嚴格模式下，ECMAScipt 3 中一些不解和不確定的行為將得到處理，而且會對不安全的操作會拋出異常。『use strict』 會告訴瀏覽羨培器引擎可以切換到嚴格模式執行。

嚴格模式與非嚴格模式區別

常見筆試題：

試試這道筆試題你會做嗎？

要說 js 的深淺拷貝，就不得不提 js 的兩大數據類型：基本數據類型和引用類型。

基本數據類型的變數名和值都存儲在棧中，對於引用類型的變數名存儲在棧中，而值存儲在堆中。由於存儲方式不同，所以導致了他們復制的時候方式不同。

賦值

基本數據類型賦值的時候，創建的基本數據類型會在內存中開辟一個新空間把值復制過來，而引用類型採用的是地址存儲，如果直接把一個引用數據直接賦值給另外一個數據，就相當於直接把自己存儲值的地址給了另外一個變數，所以改變一個的值，也會改變另外一個的值。

深淺拷貝是如何定義的？

假設有 p 和 P 兩個變數，如果P 是拷貝了 p 的，我們通過修改 P 來觀察 p 是否發生改變，如果跟著改變，就是淺拷貝，如果是不改變，就說明是深拷貝。

基本類型復制的時候會開辟新的內存空間，所以兩個值是相互獨立的，引用類型復制的時候就要看是復制的內存地址還是復制一個新的堆。所以深拷貝主要針對的是引用類型的數據。

淺拷貝的常見的方式：

1、直接賦值

2、Object.assign

深拷貝的常見方式：

引用數據類型最常用的就是 Object 和 Array ，引用數據內部的數據也可以是多樣化的，進行深拷貝時，也要適當地根據數據結構進行合適的復制方式，具體的深拷貝方法分別有：

1、數組中只包基輪含基本數據類型

2、對象中只包含基本數據類型

3、對象或數組里含有一層或多層引用數據類型時

深淺拷貝的常見應用主要是數據的增刪改操作。

大廠筆試題：

這是一道關於 this 指向的面試題，接下來我們就說說 this 是如何指向的？

this 對象是運行時基於函數的執行環境綁定的：

看完上述 this 指向解釋，你就可以做上邊的那道面試題了。

如何改變 this 的指向？

call 、bind 和 apply 這三個函數都是用來改變 this 指向的，就是改變函數執行時的上下文。

修改上述面試題：

call 、bind 和 apply 改變 this 指向，最大作用就是實現代碼復用。

至於 call、bind 和 apply 的區別，可以自行去了解下。

有了上邊那個表，事情就變得簡單了！

關系運算符進行運算時，不同類型的值會自動轉化為相同類型值，然後進行

1、兩邊有一個是字元串一個是是數字時，字元串調用 Number 方法，將字元串轉為數字，所以：

2、如果兩邊都是字元串時，按照字元串的 unicode 編碼來轉搏派信換的，所以：

3、字元串進項比較時，先比較第一位，如果不相等直接得出結果，如果第一項相等，會繼續使用第二項進行比較。

4、轉為布爾值都為 false 的類型分別有：undefined 、null 、0、NaN、false、『』

5、NaN表示的是非數字，但是這個非數字也是不同的，因此 NaN 不等於 NaN，兩個NaN永遠不可能相等。

6、關系運算有一個數值，將另外一個值也轉為 number 類型。

7、有邏輯運算的，將其他數據類型轉為 boolean 值。

8、直接使用兩個空數組比較，數組地址不同，所以不相等。

評論區可以留下最近你想學習的知識點，或面試題類型！

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

大家好，我是王我。

隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人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.項目經驗，讓你講講做過的項目，遇到的問題和解決之道