前端知識點
HTML5與 CSS3.0 新特性?
html5的新特性:
添加了video，radio標(biāo)簽
添加了canvas畫布和svg,渲染矢量圖片
添加了一些列語義化標(biāo)簽header,footer,main,section,aside,nav等
input的type值新添加了很多屬性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
添加了地理位置定位功能
CSS3新特性:
媒體查詢（可以查詢設(shè)備的物理像素然后進行自適應(yīng)操作）
transform，transition，translate,scale,skelw，rotate等相關(guān)動畫效果
box-shadow,text-shadow等特效
CSS3 @font-face規(guī)則,設(shè)計師可以引入任意的字體了
CSS3 @keyframes規(guī)則，可以自己創(chuàng)建一些動畫等
2D、3D轉(zhuǎn)換
添加了border-radius，border-image(圖片邊框)等屬性(添加了圓角邊框,將圖片規(guī)定為包圍div元素的邊框)
Flex布局:
Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。
Rem布局:
rem是 css 的長度單位，它是相對于 <html>元素的 font-size 的相對值。假設(shè) html { font-size: 20px; }，那么 1rem 就等于 20px。
ES6新特性:
const與 let :
使用let聲明的變量可以重新賦值,但是不能在同一作用域內(nèi)重新聲明
使用const聲明的變量必須賦值初始化,但是不能在同一作用域類重新聲明也無法重新賦值
箭頭函數(shù): =>
模板字面量: ( )
模板字面量用倒引號 ( `` )（而不是單引號( '' )或雙引號( "" )）表示，可以包含用 ${expression} 表示的占位符
解構(gòu)賦值:解構(gòu)數(shù)組用[ ],解構(gòu)對象用{ };解構(gòu)賦值語法是一種Javascript表達式。通過解構(gòu)賦值, 可以將屬性/值從對象/數(shù)組中取出,賦值給其他變量。
Vue: vue是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。
Vue CLI: Vue CLI是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng) (腳手架)
Vuex: Vuex是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
Vue-router: Vue Router是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌
Axios: Axios是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
從瀏覽器中創(chuàng)建 XMLHttpRequests
從node.js創(chuàng)建 http請求
支持Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF
ElementUI常用組件: 開關(guān)滑塊彈框通知消息提示框分頁走馬燈面包屑
模塊化、組件化開發(fā):
模塊化：是從代碼的角度來進行分析，把一些可復(fù)用的代碼，抽離為單個的模塊；便于項目的維護和開發(fā)
組件化：是從UI角度來進行分析的，把一些可復(fù)用的 UI 元素，抽離為單獨的組件；便于項目的維護和開發(fā)
組件化的好處：隨著項目規(guī)模的增大，手里的組件越來越多；很方便就可以把現(xiàn)在的組件，拼接為一個完整的頁面
1、注冊
2、信息完善
3、開發(fā)小程序
4、提交審核和發(fā)布
mpvue框架: mpvue 繼承自Vue.js，其技術(shù)規(guī)范和語法特點與 Vue.js 保持一致。
WeUI : WeUI是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。
Vue
Vue的核心思想：組件化開發(fā)和數(shù)據(jù)驅(qū)動。
Vue生命周期的理解？8個階段:創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后Vue實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
Vue數(shù)據(jù)雙向綁定主要是指：
數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù);
組件之間的傳值通信
1.父組件給子組件傳值
使用props，父組件可以使用props向子組件傳遞數(shù)據(jù)。
2.子組件向父組件通信
父組件向子組件傳遞事件方法，子組件通過$emit觸發(fā)事件，回調(diào)給父組件。
Vue組件之間的通信
父子組件通信,props、emit、ref調(diào)用函數(shù)
兄弟組件通信，vuex、eventBus
你使用過Vuex嗎？
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。
vuex有哪幾種屬性？
vuex具有五種屬性: state、getter、mutation、action、module
vuex的state特性是？
vuex就是一個倉庫，倉庫里面放很多對象。state就是數(shù)據(jù)存放地，對應(yīng)于一般vue對象里面的data；state里面存放的數(shù)據(jù)是響應(yīng)式的
vuex的getter特性是？
getters可以對state進行計算操作，可以在多組件之間復(fù)用
vuex的mutation特性是？
action類似于mutation，action提價的是mutation，而是不是直接變更狀態(tài)；
action可以包含任何異步操作
不用vuex會帶來什么問題？
可維護性會下降，你要想修改數(shù)據(jù)，你得維護三個地方
可讀性下降，因為一個組件里的數(shù)據(jù)，你根本看不出來是從哪來的
增加耦合，大量的上傳派發(fā)，會讓耦合性大大的增加，本來Vue用Component就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背。
Vue 3.0正走在發(fā)布的路上，Vue 3.0 的目標(biāo)是讓 Vue 核心變得更小、更快、更強大
說說你對SPA單頁面的理解，它的優(yōu)缺點分別是什么？
SPA（ single-page application ）僅在 Web 頁面初始化時加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機制實現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。
優(yōu)點：
用戶體驗好、快，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；
基于上面一點，SPA相對對服務(wù)器壓力?。?/p>
前后端職責(zé)分離，架構(gòu)清晰，前端進行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理；
缺點：
初次加載耗時多：為實現(xiàn)單頁Web應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)?JavaScript、CSS 統(tǒng)一加載，部分頁面按需加載；
前進后退路由管理：由于單頁應(yīng)用在一個頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理；
SEO難度較大：由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢。
v-if和 v-show 區(qū)分使用場景
v-if是真正的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。
v-show就簡單得多， 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 的 display 屬性進行切換。
所以，v-if適用于在運行時很少改變條件，不需要頻繁切換條件的場景；v-show 則適用于需要非常頻繁切換條件的場景。
computed和 watch 區(qū)分使用場景
computed：是計算屬性，依賴其它屬性值，并且computed的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；
watch：更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作；
v-for遍歷必須為 item 添加 key，且避免同時使用 v-if
（1）v-for 遍歷必須為 item 添加 key
在列表數(shù)據(jù)進行遍歷渲染時，需要為每一項item設(shè)置唯一 key 值，方便 Vue.js 內(nèi)部機制精準(zhǔn)找到該條列表數(shù)據(jù)。當(dāng) state 更新時，新的狀態(tài)值和舊的狀態(tài)值對比，較快地定位到 diff 。
（2）v-for 遍歷避免同時使用 v-if
v-for比 v-if 優(yōu)先級高，如果每一次都需要遍歷整個數(shù)組，將會影響速度，尤其是當(dāng)之需要渲染很小一部分的時候，必要情況下應(yīng)該替換成 computed 屬性。
vue-router路由模式有幾種？
vue-router有3種路由模式：hash、history、abstract
hash:使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
history :依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式；
abstract :支持所有 JavaScript 運行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進入這個模式。
路由守衛(wèi)
路由跳轉(zhuǎn)前做一些驗證，比如登錄驗證，是網(wǎng)站中的普遍需求。對此，vue-route提供的 可以方便地實現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。導(dǎo)航守衛(wèi)（navigation-guards）
全局前置守衛(wèi)
守衛(wèi)方法接收三個參數(shù)：
to：即將要進入的目標(biāo)路由對象
from：當(dāng)前導(dǎo)航正要離開的路由
next：執(zhí)行下一步
路由獨享的守衛(wèi)
使用方法與全局守衛(wèi)相同
不同的是：全局守衛(wèi)可以作用于全局，路由獨享守衛(wèi)只作用于被設(shè)置守衛(wèi)的路由
MVC MVP MVVM的區(qū)別？
MVC: MVC之間的數(shù)據(jù)通信都是單向的。View(視圖層)發(fā)送指令到controller(控制層)，完成業(yè)務(wù)邏輯后，要求Model(模型層)改變狀態(tài)，匠心的數(shù)據(jù)發(fā)送到(view)視圖層，用戶得到反饋。
MVP:在MVP中，view和model之間沒有任何通信關(guān)系，所有的通信和業(yè)務(wù)邏輯都放在presenter層中。View層發(fā)送指令到presenter層，presenter層處理業(yè)務(wù)邏輯，要求model層改變狀態(tài)，完成狀態(tài)修改之后，發(fā)送指令到presenter層，之后再通知view層做出改變。
MVVM: Model專門用來處理數(shù)據(jù)模型。View專門用來處理用戶視圖，ViewModel用來使view和model雙向綁定，view的任何變化都會通知ViewModel,而model的任何變化也會通知ViewModel，無論哪一項發(fā)生改變，都會使對應(yīng)的視圖/數(shù)據(jù)模型同時發(fā)生改變。
MVVM框架是什么？它和其它框架（Jquery）的區(qū)別是什么？哪些場景適合？
MVVM分為Model、View、ViewModel三者
Model代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義
View代表UI視圖，負(fù)責(zé)數(shù)據(jù)展示
ViewModel負(fù)責(zé)監(jiān)聽Model中數(shù)據(jù)的改變并且控制視圖更新，處理用戶交互操作：
Model和View并無直接關(guān)聯(lián)，而是通過ViewModel來進行聯(lián)系的，Model和ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系。因此當(dāng)Model中的數(shù)據(jù)改變時會觸發(fā)View層的刷新，View中由于用戶交互操作而改變的數(shù)據(jù)也會在Model中同步
區(qū)別：這種模式實現(xiàn)了Model和 View的數(shù)據(jù)自動同步，因此開發(fā)時這需要要專注對數(shù)據(jù)的維護操作即可，而不需要自己操作dom 場景：數(shù)據(jù)操作比較多的場景，更加便捷
組件中data為什么是一個函數(shù)？
因為組件是用來復(fù)用的，且JS里對象是引用關(guān)系，如果組件中 data 是一個對象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，如果組件中 data 選項是一個函數(shù)，那么每個實例可以維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被復(fù)用的，因此不存在引用對象的問題。
封裝vue組件的過程？
首先，組件可以提升整個項目的開發(fā)效率。能夠把頁面抽象成多個相對獨立的?？?，解決了我們傳統(tǒng)項目開發(fā)：效率低、難維護、復(fù)用性等問題。
然后，使用Vue.extend方法創(chuàng)建一個組件，然后使用Vue.component方法注冊組件。子組件需要數(shù)據(jù)，可以在props中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)遞給父組件。可以采用emit方法。
html css js jQ Es6 ajax
簡述javascript的優(yōu)缺點。
優(yōu)點：簡單易用，與Java有類似的語法，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序，并且事先不用編譯，逐行執(zhí)行，無需進行嚴(yán)格的變量聲明，而且內(nèi)置大量現(xiàn)成對象，編寫少量程序可以完成目標(biāo)；缺點：不適合開發(fā)大型應(yīng)用程序；
JavaScript原型，原型鏈 ? 有什么特點？
①原型對象也是普通的對象，是對象一個自帶隱式的 proto屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。②原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈。
事件綁定和普通事件有什么區(qū)別
①事件綁定就是針對dom元素的事件，綁定在dom元素上②普通事件即為非針對dom元素的事件
事件委托是什么
利用事件冒泡的原理，讓自己的所觸發(fā)的事件，由他的父元素代替執(zhí)行！
new操作符具體干了什么呢?
①創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。②屬性和方法被加入到 this 引用的對象中。③新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
你使用過jQuery嗎？如果有，你為什么要使用jQuery呢？
1.用過。2.如果使用原生javascript開發(fā)的話，會面臨很多問題，如瀏覽器兼容、Ajax數(shù)據(jù)解析、Dom、事件注冊操作等都非常煩鎖，而jQuery正好解決了這些問題。3.當(dāng)然jQuery還有非常有用的其它特性，如為dom對象綁定數(shù)據(jù)、動畫、等。并且jQuery還非常容易擴展，在它的基礎(chǔ)上開發(fā)非常靈活，也有眾多的插件可用，如jQueryUI
Javascript與jQuery有什么區(qū)別？
jquery就對javascript的一個擴展，封裝，就是讓javascript更好用，更簡單。
在jQuery中如何注冊事件？
使用bind()方法注冊事件，但通常我們使用與事件同名的方法注冊更方便，如：click()、hover()等。
說一下this
JavaScript函數(shù)中的 this 指向并不是在函數(shù)定義的時候確定的，而是在調(diào)用的時候確定的。換句話說，函數(shù)的調(diào)用方式?jīng)Q定了 this 指向。
==和 === 的區(qū)別？
==會進行隱式轉(zhuǎn)換，比較前將兩個被比較的值轉(zhuǎn)換為相同類型。然后比較兩個值是否相等
===不進行隱式轉(zhuǎn)換，會比較類型和值
null和undefined的區(qū)別？
undefined：類型只有一個，即undefined，當(dāng)聲明變量還未被初始化時就是undefined
null：類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象
正則的i標(biāo)記與g標(biāo)記各有何用途？
i：不區(qū)分大小寫；g：全局匹配。
如何阻止表單提交？
在onsubmit事件中返回false
輸入框的驗證用什么事件?
change(fn)
如何判斷一個變量的值是否為數(shù)字？以及有哪些手段判斷變量值的數(shù)據(jù)類型？
全局函數(shù)isNaN可以判斷一個變量的值是否為數(shù)字。
src與href的區(qū)別？
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
如何獲取一個元素的實際位置？
使用position()或offset()都可以。
bind()、unbind()、hover()有何用途？
bind()：注冊特定事件。unbind()：刪除特定事件。hover()：同時注冊鼠標(biāo)移入、移出事件。
什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，主要用來頁面異步刷新，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)。
談你對JSON的理解。
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。 易于人閱讀和編寫。同時也易于機器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。 JSON采用完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 這些特性使JSON成為理想的數(shù)據(jù)交換語言。所以它往往在AJAX中替代XML，交換數(shù)據(jù)。
你的項目中有使用到跨域嗎？你在項目中是如何處理JS跨域問題的？
①有。②主要是使用其它網(wǎng)站提供的javascript api如QQ。使用script的src可以直接讀取跨域資源。③當(dāng)然跨域還有其它處理方式：如代理服務(wù)器、改變domain、JSONP等。
解釋jsonp的原理，以及為什么不是真正的ajax
①Ajax與JSONP這兩種技術(shù)看起來很像，目的也一樣，都是請求一個url，然后把服務(wù)器返回的數(shù)據(jù)進行處理，因此jQuery等框架都把JSONP作為Ajax的一種形式。②實際上Ajax與JSONP有著本質(zhì)上的不同。Ajax的核心是通過XMLHttpRequest獲取數(shù)據(jù)，而JSONP的核心則是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js文件。③Ajax與JSONP的區(qū)別也不在于是否跨域，Ajax通過服務(wù)端代理也可以跨域，JSONP也可獲取同源數(shù)據(jù)。
ajax有那些優(yōu)缺點?如何解決跨域問題?
優(yōu)點：①通過異步模式，提升了用戶體驗.②優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.③Ajax在客戶端運行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。④Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）缺點：①安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。②對搜索引擎的支持比較弱。③不容易調(diào)試?？缬騿栴}：jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面。
如何向頁面插入節(jié)點？
調(diào)用append方法，將新節(jié)點作為參數(shù)。
ajax、get、post、ajaxSetup、getJSON各有何用途？
①ajax：jQuery對ajax執(zhí)行的核心方法。其它ajax方法都是使用該方法實現(xiàn)。②get：專門用于發(fā)送get請求的便捷方法。③post：專門用于發(fā)送post請求的便捷方法。④ajaxSetup：設(shè)置調(diào)用ajax方法時的默認(rèn)值。⑤getJSON：專門用于向服務(wù)器請求json格式數(shù)據(jù)的便捷方法。
get和post的區(qū)別？
GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符POST：一般用于修改服務(wù)器上的資源，對所發(fā)送的信息沒有限制。GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。然而，在以下情況中，請使用POST請求：①無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）。②發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠。
清除浮動的幾種方式，各自的優(yōu)缺點
父級div定義height。（2）結(jié)尾處加空div標(biāo)簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級div定義overflow:hidden。（5）父級div定義overflow:auto。（6）父級div也浮動，需要定義寬度。（7）父級div定義display:table。（8）結(jié)尾處加br標(biāo)簽clear:both。
xhtml和html有什么區(qū)別
①HTML是一種基本的WEB網(wǎng)頁設(shè)計語言,XHTML是一個基于XML的置標(biāo)語言②最主要的不同：XHTML元素必須被正確地嵌套。XHTML元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。XHTML文檔必須擁有根元素。
CSS引入的方式有哪些? link和@import的區(qū)別是?
CSS引入的方式包括內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入link和@import的區(qū)別是 ：①link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS；②頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；③import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題；④后者優(yōu)先級更高
CSS選擇器優(yōu)先級
每個選擇器都有權(quán)值，權(quán)值越大越優(yōu)先
繼承的樣式優(yōu)先級低于自身制定樣式
!important優(yōu)先級最高，js也無法修改
權(quán)值相同的時候，靠近元素的樣式優(yōu)先級搞，順序為內(nèi)聯(lián)樣式>內(nèi)部樣式表 > 外部樣式表
什么是BFC
BFC就是"塊級格式化上下文"的意思，創(chuàng)建了BFC的元素就是一個獨立的盒子
什么是跨域
協(xié)議、端口和域名不一致導(dǎo)致的跨域跨域是因為瀏覽器需要遵守同源策略，發(fā)出的請求即使相應(yīng)成功，也被瀏覽器攔截下來。
同源策略
同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互、這是一個用于隔離潛在惡意文件的重要安全機制。
關(guān)于閉包閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。主要有兩種形式1、函數(shù)作為返回值
函數(shù)作為參數(shù)被傳遞要到創(chuàng)建這個函數(shù)的那個作用域中取值——是“創(chuàng)建”，而不是“調(diào)用”
同步，異步？
同步：由于js單線程，同步任務(wù)都在主線程上排隊執(zhí)行，前面任務(wù)沒有執(zhí)行完成，后面的任務(wù)會一直等待。
異步：不進入主線程，進入任務(wù)隊列，等待主線程任務(wù)執(zhí)行完成，開始執(zhí)行。最基本的異步操作SetTimemot和SetInterval,等待主線程任務(wù)執(zhí)行完，在開始執(zhí)行里面的函數(shù)。
var，let，const的區(qū)別？
var：var的作用域是函數(shù)作用域，在一個函數(shù)內(nèi)利用var聲明一個變量，則這個函數(shù)只在這個函數(shù)內(nèi)有效，存在變量提升。
let：作用域是塊級作用域 不存在變量提升，不允許重復(fù)定義。
const：一般用來聲明常量，且聲明的常量是不允許被改變的，聲明的時候就賦值，不存在變量提升，不允許重復(fù)定義。
箭頭函數(shù)的特點?
官方解釋：箭頭函數(shù)表達式的語法比函數(shù)表達式更簡潔，并且沒有自己的this
引用箭頭函數(shù)有兩個方面的作用：更簡短函數(shù)和并且不綁定this
箭頭函數(shù)不會創(chuàng)建this，它只會從自己的作用域鏈上一層繼承this。
簡而言之，箭頭函數(shù)，永遠(yuǎn)指向當(dāng)前調(diào)用的對象
箭頭函數(shù)和普通函數(shù)的區(qū)別？
箭頭函數(shù)：
- this指向：箭頭函數(shù)指向 定義時所在的作用域中的this指向
2.箭頭函數(shù)作為匿名函數(shù)，是不能作為構(gòu)造函數(shù)的，不能使用new
3.箭頭函數(shù)不能換行
普通函數(shù)：
this指向：誰調(diào)用就指向誰
有沒有使用過css預(yù)處理語言？有哪些？介紹一下基本特性和優(yōu)點？
答：css預(yù)處理有sass，less，sylus 三種預(yù)處理語言的都有一些共同特性，支持聲明css變量，css常量，css函數(shù)，混淆、嵌套、引入（@import）等功能。特性和優(yōu)點：既然支持常量變量和函數(shù)，那在原來需要使用js來改變css的場景就不需要大量使用js，樣式列表里已經(jīng)支持加減乘除等其它運算?？梢远x全局css塊變量，全局字體樣式變量。比如主題顏色的切換。大部分內(nèi)容的標(biāo)題、內(nèi)容樣式的統(tǒng)一修改。css的嵌套讓css代碼更簡潔更具有層級性更方便維護。
移動端
移動端開發(fā)自適應(yīng)頁面如何做？
1、通過meta標(biāo)簽設(shè)置viewport，移動端的理想適口。
2、設(shè)置rem單位來進行適配、加上Flex布局、百分比布局
rem原理
rem是是指相對于根元素的字體大小的單位
比如設(shè)置html font-size=100px;那么1rem=100px;之后的所有元素都可以用這個基準(zhǔn)值來設(shè)置大??；
rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小——MDN
流式布局和響應(yīng)式布局?
流式布局：使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
響應(yīng)式布局：利用CSS3中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。
性能優(yōu)化
圖片資源懶加載
對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載，等到滾動到可視區(qū)域后再去加載。這樣對于頁面加載性能上會有很大的提升，也提高了用戶體驗。我們在項目中使用Vue的 vue-lazyload 插件
路由懶加載
Vue是單頁面應(yīng)用，可能會有很多的路由引入 ，這樣使用 webpcak 打包后的文件很大，當(dāng)進入首頁時，加載的資源過多，頁面會出現(xiàn)白屏的情況，不利于用戶體驗。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。
在vue項目中除了可以在 webpack.base.conf.js中url-loader中設(shè)置 limit 大小來對圖片處理，對小于 limit 的圖片轉(zhuǎn)化為 base64 格式，其余的不做操作。所以對有些較大的圖片資源，在請求資源的時候，加載會很慢，我們可以用 image-webpack-loader來壓縮圖片
網(wǎng)站性能優(yōu)化
1、內(nèi)容方面
減少HTTP請求：合并文件、CSS精靈、inline image
使用AJAX緩存
非必須組件延遲加載
未來所需組件預(yù)加載
減少DOM元素數(shù)量
不要404
2、服務(wù)器方面
使用CDN
使用Gzip壓縮
Ajax使用GET進行請求
避免空src的img標(biāo)簽
3、CSS方面
將樣式表放到頂部
不要使用CSS表達式
4、JavaScript
將腳本放到頁面的底部
將JavaScript和CSS從外部引入
壓縮JavaScript和CSS
刪除不需要的腳本
減少DOM的查詢
合理設(shè)計事件監(jiān)聽器
5、圖片方面
優(yōu)化圖片：根據(jù)實際顏色需要選擇色深、壓縮
優(yōu)化CSS精靈
不要在HTML中拉伸圖片
保證favicon、ico小并且可緩存
6、移動方面
保證組件小于25K
前端性能優(yōu)化手段？
1.盡可能使用雪碧圖
2.使用字體圖標(biāo)代替圖片
3.對HTML，css，js 文件進行壓縮
4.模塊按需加載
5.資源懶加載與資源預(yù)加載
6.避免使用層級較深的選擇器及減少DOM深度
HTTP狀態(tài)碼
http常見狀態(tài)碼？
405：客戶端請求的額方法被禁止
408：服務(wù)器等待客戶端發(fā)送的請求時間過長，超時
200：服務(wù)器成功處理了請求
400：客戶端發(fā)送了一個錯誤的請求
404：未找到資源
500：服務(wù)器內(nèi)部出現(xiàn)錯誤
501：服務(wù)器遇到錯誤，使其無法對請求提供服務(wù)
響應(yīng)信息
1xx：臨時回應(yīng)，表示客戶端請繼續(xù)
成功
200 - OK：成功傳輸
重定向
3xx:當(dāng)服務(wù)器通知客戶端請求的目標(biāo)有變化，希望客戶端進一步處理，將使用這些。
客戶端錯誤
4xx:定義客戶端錯誤，這是服務(wù)器認(rèn)為Web瀏覽器出錯的地方。
服務(wù)端錯誤
5xx:定義服務(wù)器端錯誤。盡管客戶端提供了有效請求，但這些都是服務(wù)器部分發(fā)生的錯誤。
從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP為例)
大概流程:
URL輸入
DNS解析
TCP連接
發(fā)送HTTP請求
服務(wù)器處理請求
服務(wù)器響應(yīng)請求
瀏覽器解析渲染頁面
連接結(jié)束
補充
單頁面應(yīng)用和多頁面應(yīng)用的區(qū)別及優(yōu)缺點？
單頁面的概念：單頁面應(yīng)用(SPA)，其實就是指只有一個主頁面的應(yīng)用，類似前端現(xiàn)在的三大框架，React.Vue,Angular 瀏覽器一開始要加載所有必須的html,js css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。
單頁面的原理：利用js感知到URL的變化，通過這一點，可以用js動態(tài)的將當(dāng)前的頁面內(nèi)容清除掉，然后將下一個頁面的內(nèi)容掛載到當(dāng)前的頁面上。頁面每次切換跳轉(zhuǎn)時，并不需要做html文件的請求，這樣就節(jié)約了很多http發(fā)送延遲，我們在切換頁面的時候速度很快。
單頁面的優(yōu)點：
1.加載速度快，用戶體驗好，內(nèi)容的改變不需要重新加載整個頁面，基于這一點SPA對服務(wù)器壓力較小。
2.前后端分離
3.頁面視覺效果良好
單頁面的缺點：
1.不利于SEO（搜索引擎優(yōu)化）
2.頁面初次加載時比較慢
3.頁面復(fù)雜度提高很多
多頁面的概念：多頁面（MPA），就是指一個應(yīng)用中有多個頁面，頁面跳轉(zhuǎn)時是整個頁面都刷新，每次都請求一個新的頁面。
多頁面的優(yōu)點：首屏加載時間快，SEO效果好
多頁面的缺點：頁面切換慢，每次切換頁面都需要選擇性的重新加載公共資源
HTML與XHTML有什么區(qū)別？
1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記
2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3.所有的 XML 標(biāo)記都必須合理嵌套
4.所有的屬性必須用引號 "" 括起來
5.把所有 < 和 & 特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內(nèi)容中使用 "--"
8.圖片必須有說明文字
http和https的區(qū)別？
https：是以安全為目標(biāo)的HTTP通道，簡單講是HTTP的安全版本，通過SSL加密。
http：超文本傳輸協(xié)議。是一個客服端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)（tcp）,使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。
對web標(biāo)準(zhǔn)及w3c的理解與認(rèn)識。
標(biāo)簽閉合，標(biāo)簽小寫，不亂嵌套，提高搜索機器人搜索幾率，使用外鏈css和js腳本，結(jié)構(gòu)行為表現(xiàn)的分離，頁面下載與加載速度更快，內(nèi)容能被更多的用戶和更廣泛的設(shè)備訪問，更少的代碼和組件，容易維護，改版方便，不需要改變頁面內(nèi)容，提供打印版不需要復(fù)制頁面內(nèi)容，提高網(wǎng)站的易用性。
為什么要初始化樣式？
由于瀏覽器兼容的問題，不同的瀏覽器對標(biāo)簽的默認(rèn)樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異。初始化CSS會對搜索引擎優(yōu)化造成小影響。
CSS中l(wèi)ink和@import的區(qū)別是？
Link屬于html標(biāo)簽，而@import是CSS中提供的。
在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成后才會加載引用的CSS。
@import只有在ie5以上才可以被識別，而link是html標(biāo)簽，不存在瀏覽器兼容性問題。
Link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁面中）
SASS、LESS是什么？大家為什么要使用它們？
它們是CSS預(yù)處理器。它是CSS上的一種抽象層。它們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態(tài)樣式語言.將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù)。LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可以在服務(wù)端運行 (借助 Node.js)。
為什么要使用它們？
1.結(jié)構(gòu)清晰，便于擴展。
2.可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復(fù)處理，減少無意義的機械勞動。
3.可以輕松實現(xiàn)多重繼承。
4.完全兼容 CSS 代碼，可以方便地應(yīng)用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
ajax的理解？
ajax的原理：原理：相當(dāng)于在用戶和服務(wù)器之間加一個中間層（ajax引擎),使用戶操作與服務(wù)器響應(yīng)異步化。
ajax的優(yōu)點：在不刷新整個頁面的前提下與服務(wù)器通信維護數(shù)據(jù)。不會導(dǎo)致頁面的重載可以把前端服務(wù)器的任務(wù)轉(zhuǎn)接到客服端來處理，減輕服務(wù)器負(fù)擔(dān)，節(jié)省寬帶。
ajax的劣勢：不支持back。對搜索引擎的支持比較弱；不容易調(diào)試 怎么解決呢？通過location.hash值來解決Ajax過程中導(dǎo)致的瀏覽器前進后退按鍵失效，解決以前被人常遇到的重復(fù)加載的問題。主要比較前后的hash值，看其是否相等，在判斷是否觸發(fā)ajax。
一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。
1.圖片懶加載，在頁面上的未可視區(qū)域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
2.如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
3.如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
4.如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
5.如果圖片展示區(qū)域小于圖片的真實大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。
rem em px的區(qū)別？
px：像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，
em：是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem：是CSS3新增的一個相對單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。
移動端點透問題，如何解決？
問題：點透問題出現(xiàn)的原因就是移動端click事件300ms延遲問題，當(dāng)點擊上層元素時，先觸發(fā)touchstart事件，然后在300ms后會觸發(fā)click事件，而此時上層元素已經(jīng)消失，所以下邊的元素會觸發(fā)click事件，這就是點透問題。
解決方法：
1.使用一個透明遮罩，屏蔽所有事件，然后400ms（對于IOS來說是個理想值）后自動屏蔽。
2. touchstart換成touchend，因為觸發(fā)touchend需要200ms所以可以把觸發(fā)時間這個原理問題解決掉。
3. zepto最新版已經(jīng)修復(fù)了這個問題，或者使用fastclick等通用庫。
4.直接使用click，不考慮延遲。
5.下層避開click事件，如a鏈接改為span等標(biāo)簽，使用js跳轉(zhuǎn)頁面。
你知道jQuery插件嗎？你了解jQuery執(zhí)行原理和插件機制嗎？你都用過哪些jQuery插件？
①知道jQuery插件。②其原理是擴展jQuery本身及其核心函數(shù)的原型實現(xiàn)?？梢哉{(diào)用其extend實現(xiàn)對它的擴展。③jQuery插件有很多，常見的有：jQueryUI、jQuery-Cookie、jQuery-Timer等。
什么叫優(yōu)雅降級和漸進增強？
優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。
JavaScript的同源策略
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。為什么要有同源限制？我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
哪些常見操作會造成內(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)）
線程與進程的區(qū)別
①一個程序至少有一個進程,一個進程至少有一個線程。②線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高。③另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率。④線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制。⑤從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別。
編寫一個數(shù)組去重的方法
思路：1.創(chuàng)建一個新的數(shù)組存放結(jié)果2.創(chuàng)建一個空對象3.for循環(huán)時，每次取出一個元素與對象進行對比，如果這個元素不重復(fù)，則把它存放到結(jié)果數(shù)組中，同時把這個元素的內(nèi)容作為對象的一個屬性，并賦值為1，存入到第2步建立的對象中。說明：至于如何對比，就是每次從原數(shù)組中取出一個元素，然后到對象中去訪問這個屬性，如果能訪問到值，則說明重復(fù)。代碼如下：
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
為驗證手機號寫一個正則。
function checkSubmitMobil()
{
if ($("#phoneNum").val() == "") {
alert("手機號碼不能為空！");
//$("#moileMsg").html("手機號碼不能為空！</font>");
$("#mobile").focus();
return false;
}if (!/))
{
alert("手機號碼格式不正確！");
//$("#moileMsg").html("手機號碼格式不正確！請重新輸入！</font>");
$("#phoneNum").focus();
return false;
}
return true;}
談?wù)勀銓jax的理解。你在項目中如何使用Ajax？手寫一個簡單的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，主要用來頁面異步刷新，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)。因為它涉及瀏覽器兼容、跨域等問題，在項目中一般會使用一些基礎(chǔ)類庫輔助實現(xiàn)，如jQuery等。一個簡單的Ajax操作如下。
var xhr = new XMLHttpRequest();//在環(huán)境中需要做瀏覽器兼容，這里省略了
xhr.onreadystatechange = function() {//這里注冊當(dāng)xhr狀態(tài)發(fā)生改變后調(diào)用事件if( xhr.readyState == 4 ) {//通常在讀取狀態(tài)為4的時候才能獲取到部分?jǐn)?shù)據(jù)
所以一般狀態(tài)在4的時候才進行處理if(status==200) {
//當(dāng)正常請求到資源時的處理,
可以調(diào)用xhr.responseText或xhr.responseXml獲取數(shù)據(jù)
}
else {
//當(dāng)請求資源失敗時的處理
}
}
}
xhr.open( "GET", url);//設(shè)置xhr的請求方式和url,這里使用的是GET方式，
//如果有參數(shù)，則連接在url后面
/*
如果是POST請求，還當(dāng)設(shè)置請求的Content-Type
數(shù)據(jù)使用send作為參數(shù)發(fā)送
*/
xhr.send();
