常見前端面試題
第一天 ?
1. HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？
新特性：
1）語義標簽--<header></header>? <footer></footer>? <nav></nav>? <section></section>
2）增強型表單--擁有多個新的表單input輸入類型。如：color date? datetime? email? month? search? ? 增加的表單元素<datalist>? <keygen>? <output>
3）視頻和音頻--HTML5提供了播放音頻文件的標準，即使用<audio>元素，通過video元素來包含視頻的標準方法
4）Canvas-圖形
5）拖放API
6）SVG繪圖--SVG是指可伸縮的矢量圖形
7）地理定位
8）Web Worker
9）Web Storage
10）WebSocket
增加的新特性總結：
· 用于繪畫的 canvas 元素
· 用于媒介回放的 video 和 audio 元素
· 對本地離線存儲的更好的支持
· 新的特殊內容元素，比如 article、footer、header、nav、section
· 新的表單控件，比如 calendar、date、time、email、url、search
兼容問題：
（1）document.createElement（tagName）
（2）js解決方案:使用html5shim
2. css3中的transform有哪些屬性？分別用來實現什么效果？
transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。
transform:rotate()：
含義：旋轉；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
transform:skew()：
含義：傾斜；
transform:scale()：
含義：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則為負“-”。
transform:translate()：
含義：變動，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改個值就行，向左向下位移則為負“-”。
transform-origin 屬性
??用來改變元素原點的位置，取值：
· center 默認值 等價于（ center center / 50% 50%）
· top/right/bottom/left
· transform-origin : x y z
3. localStorage、sessionStorage、cookie有什么區(qū)別？
共同點：都是作為存儲的，都是同源的
不同點：
localStorage：永久存儲，除非你手動清除數據否則永久保存
sessionStorage：會話存儲，瀏覽器關閉后存儲失效
Cookie：暫時性存儲，數據會在設置的cookie過期時間之前保存著，它的數據可以在瀏覽器和服務器之間來回傳遞，而localStorage和sessionStorage而不會主動把數據發(fā)送給服務器
---------------------------------------------------------------------------------------------------------------------------------------------------------------
第二天 ?
1. 什么是同源策略？你都知道哪些解決跨域的方法？
同源指的是：同協議，同域名和同端口。
解決跨域的方法：
1.document.domain
只要將同一域下不同子域的document.domain設置為共同的父域，則可以訪問對應window的各種屬性和方法。
缺點：只能在一級域名相同時才能運用；此方法只適用于 Cookie 和 iframe 窗口。
2. header頭解決跨域
在header標簽里加入“Access-Control-Allow-Origin：* ”
3.jsonp
3. 列舉JavaScript的基本數據類型和引用數據類型
· 基本數據類型
number
string
boolean
null
undefined
Symbol
· 引用數據類型
Object
4. Vue2.0的生命周期有哪些？分別解釋其意思
創(chuàng)建Create
? ? ? ? 創(chuàng)建前? ? beforeCreate()?
? ? ? ? 創(chuàng)建后? ? created()? ? 從可以修改data數據
? ? 掛載 Mount
? ? ? ? 掛載前? ? ? beforeMount()? 正在加載數據
? ? ? ? 掛載后? ? ? mounted()? ? ? ajax 請求
? ? 修改Update
? ? ? ? 修改前? ? ? beforeUpdate()
? ? ? ? 修改后? ? ? updated()
? ? 銷毀Destroy
? ? ? ? 銷毀前? ? ? beforeDestory()? 彈窗組件 關閉前
? ? ? ? 銷毀后? ? ? destoryed()? ? ? 彈窗組件 關閉后
5. 詳述組件通信
父傳遞子如何傳遞
父：自定義屬性名+傳遞數據? =》 ：value=“數據”
子：props[“自定義屬性名”] 接收數據
子傳遞父如何傳遞
子：this.$emit("自定義事件名",數據)? 子組件標簽中綁定@自定義屬性名=回調函數
父：methods:{ 回調函數(){} }
兄弟
· 可以借助于父組件作為中轉完成通信 子 > 父 > 子
中央通信
目前中央通信是解決組件通信的最佳方法。
無需關注組件嵌套層級，也無需關注組件關系
$emit - 完成發(fā)射
$on - 監(jiān)聽
6. 詳述導航守衛(wèi)
1. router.beforeEach 全局前置守衛(wèi) 進入路由之前
2. router.beforeResolve? 在beforeRouteEnter調用之后調用
3. router.afterEach 全局后置鉤子 進入路由之后
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調用參數。
7. v-show和v-if有什么區(qū)別？及使用場景
· v-if是根據條件動態(tài)生成html標簽的
· v-show是通過css中的display來控制顯示或隱藏的
· v-if會形成一個新的作用域
· v-show不會
· 使用場景
o 如果涉及到頻繁的切換那么咱們要使用v-show
o 如果不是頻繁切換那么建議使用v-if
8. v-for和v-if的優(yōu)先級
· 當它們處于同一節(jié)點，v-for 的優(yōu)先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中。當你想為僅有的一些項渲染節(jié)點時，這種優(yōu)先級的機制會十分有用
---------------------------------------------------------------------------------------------------------------------------------------------------------------
第三天 ?
Vue常用的指令
V-for 循環(huán)
v-if 判斷
v-on 綁定事件/監(jiān)聽事件
v-bind 綁定html屬性
v-html 可以解析html標簽
v-show 是通過css中的display來控制顯示隱藏的
v-model 雙向數據綁定
Vue常用修飾符
按鍵修飾符
.enter：回車鍵
.tab：制表鍵
.delete：含delete和backspace鍵
.esc：返回鍵
.space: 空格鍵
.up：向上鍵
.down：向下鍵
.left：向左鍵
.right：向右鍵
事件修飾符
.stop
阻止點擊事件冒泡。
.self
只會觸發(fā)自己范圍內的事件，不包含子元素
v-on可以監(jiān)聽多個方法嗎？
可以
vue中key值的作用
key的作用主要是為了高效的更新虛擬DOM
詳細查看：https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
Vue組件中的data為什么必須是函數
因為每一個 vue 組件都是一個 vue 實例，通過 new Vue() 實例化，引用同一個對象，如果 data 直接是一個對象的話，那么一旦修改其中一個組件的數據，其他組件相同數據就會被改變，而 data 是函數的話，每個 vue 組件的 data 都因為函數有了自己的作用域，互不干擾。
---------------------------------------------------------------------------------------------------------------------------------------------------------------
第四天 ?
詳述組件通信
父傳遞子如何傳遞
父：自定義屬性名+傳遞數據? =》 ：value=“數據”
子：props[“自定義屬性名”] 接收數據
子傳遞父如何傳遞
子：this.$emit("自定義事件名",數據)? 子組件標簽中綁定@自定義屬性名=回調函數
父：methods:{ 回調函數(){} }
兄弟
· 可以借助于父組件作為中轉完成通信 子 > 父 > 子
中央通信
目前中央通信是解決組件通信的最佳方法。
無需關注組件嵌套層級，也無需關注組件關系
$emit - 完成發(fā)射
$on - 監(jiān)聽
keep-alive組件的作用
<keep-alive>包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們
<keep-alive>是一個抽象組件:它自身不會渲染一個DOM元素,也不會出現在父組件鏈中
當組件在<keep-alive>內被切換,它的activated和deactivated這兩個生命周期鉤子函數將會被對應執(zhí)行
單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新
單頁面的優(yōu)點：
1，用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務器壓力較小
2，前后端分離
3，頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）
單頁面缺點：
1，不利于seo
2，導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）
3，初次加載時耗時多
4，頁面復雜度提高很多
多頁面的優(yōu)點：
1，開發(fā)難度低一些，框架容易選擇
2，可以直接發(fā)做
什么是計算屬性？什么情況使用？
computed? 計算屬性
當我們要求一個值的時候，要用一個方法的結果時用computed，因為每次訪問computed是之前計算的結果
computed、methods的區(qū)別
computed是響應式的，methods并非響應式。
調用方式不一樣，computed定義的成員像屬性一樣訪問，methods定義的成員必須以函數形式調用。
computed是帶緩存的，只有其引用的響應式屬性發(fā)生改變時才會重新計算，而methods里的函數在每次調用時都要執(zhí)行。
computed中的成員可以只定義一個函數作為只讀屬性，也可以定義get/set變成可讀寫屬性，這點是methods中的成員做不到的
---------------------------------------------------------------------------------------------------------------------------------------------------------------
第五天 ?
什么是自定義指令，有哪些鉤子函數及自定義指令的使用場景
有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。
父組件獲取異步動態(tài)數據傳遞給子組件，報錯如何解決？
在父組件中使用axios獲取異步數據傳給子組件，但是發(fā)現子組件在渲染的時候并沒有數據，在created里面打印也是空的，結果發(fā)現一開始子組件綁定的數據是空的，在請求數據沒有返回數據時，子組件就已經加載了，并且他綁定的值也是空的，問題找到了，怎么解決呢？
開始的時候讓子組件隱藏,然后等數據返回的時候，讓子組件顯示通過v-if，也就是判斷數據是否為空，為空就不渲染，也能解決了
為不能讀取的屬性添加一個默認值，就可以很好的解決了
vue-router有哪幾種導航鉤子
全局鉤子函數：
beforeEach：在路由切換開始時調用
afterEach：在每次路由切換成功進入激活階段時被調用
組件鉤子函數：
beforeRouteEnter
beforeRouteUpdate
beforeLeave
vue-router參數傳遞方法詳述及區(qū)別
編程式的導航 router.push : 這種方式很簡單但是不能傳遞參數
命名路由:命名路由傳遞參數需要使用params來傳遞，這里一定要注意使用params不是query。目標頁面接收傳遞參數時使用params
特別注意：命名路由這種方式傳遞的參數，如果在目標頁面刷新是會出錯的
方案1 //params主要用在詳情頁面
傳：
methods:{
chuan(x) {
? ? ? this.$router.push({
? ? ? ? name:"Detail",? //組件名? ==>要去的組件
? ? ? ? params:{
? ? ? ? ? xqsj:x.id? ? //要穿的參數
? ? ? ? }
? ? ? })
? ? }
}
收：
this.$route.params.id
方案2
傳：
methods:{
getDescribe(id) {
// 直接調用$router.push 實現攜帶參數的跳轉
this.$router.push({
path: `/describe/${id}`,
})
}
需要對應路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
收：
this.$route.params.id
方案3---?query傳參
傳：
methods:{
? ? addstate(){
? ? ? ? this.$router.push({
? ? ? ? path: '/describe',
? ? ? ? query: {
? ? ? ? id: id
? ? ? ? ? ? ? ? }
? ? ? ? ? })
? ? ? }
}
對應路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
對應組件接收參數：
this.$route.query.id
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第六天 ?
什么是Vuex？詳述Vuex的工作流程
是專門一個為vue.js應用程序開發(fā)的狀態(tài)管理模式
a) 在vue組件里面，通過dispatch來觸發(fā)actions提交修改數據的操作。
b) 然后再通過actions的commit來觸發(fā)mutations來修改數據。
c) mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心里面的數據狀態(tài)）里面的數據。
d) 最后由store觸發(fā)每一個調用它的組件的更新
詳述Vuex的核心屬性及使用
State?狀態(tài)?getter?計算?mutation?改變狀態(tài)?active?異步操作?module模板
vue和jquery的區(qū)別
jquery是通過dom操作元素
vue都是通過變量來操作元素
vue中的slot是什么？
slot===插槽
插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。
SPA首屏加載慢，該如何解決？
1.路由懶加載
2.開啟gzip壓縮
3.使用webpack的externals屬性把不需要打包的庫文件分離出去，減少打包后文件的大小
4.使用vue的服務端渲染(ssr)
詳細代碼介紹：https://blog.csdn.net/wang729506596/article/details/82874330
第七天 ?
對MVC 、MVVM、MVP的理解
MVVM：
Model 模型 view 視圖 viewmodel 作為橋梁負責溝通view和model
MVC：
Model 模型 view 視圖 controller 控制器
MVP：
Model 模型 view 視圖 presenter 接收view的命令對model進行操作
詳述Vuex工作流程
a) 在vue組件里面，通過dispatch來觸發(fā)actions提交修改數據的操作。
b) 然后再通過actions的commit來觸發(fā)mutations來修改數據。
c) mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心里面的數據狀態(tài)）里面的數據。
d) 最后由store觸發(fā)每一個調用它的組件的更新
談談你對$nextTick的理解及使用場景
對nextTick的理解：
Vue的視圖更新是通過數據驅動的，當數據發(fā)生改變的時候，將當前的數據更改保存在隊列中，然后異步的更新視圖
由于Vue的視圖更新是異步的，所以我們在修改完成數據之后，不一定當前的View已經發(fā)生改變，于是就有了nextTick
nextTick是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
nextTick的使用場景：
如果要在created()鉤子函數中進行的DOM操作，由于created()鉤子函數中還未對DOM進行任何渲染，所以無法直接操作，需要通 過$nextTick()來完成。在created()鉤子函數中進行的DOM操作，不使用$nextTick()會報錯
更新數據后，想要使用js對新的視圖進行操作時
在使用某些第三方插件時 ，這些插件需要dom動態(tài)變化后重新應用該插件，這3時候就需要使用$nextTick()來重新應用插件的方法
漸進式框架的理解
漸進式框架的大概意思就是你可以只用我的一部分，而不是用了我這一點就必須用我的所有部分。
對于漸進式框架來說，主要就代表著它的主張性最小，沒有多做職責之外的事。
組件樣式屬性 scoped 問題及解決方法
在Vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，可以在style標簽上添加scoped屬性以表示它的只屬于當下的模塊，局部有效。
第八天 ?
Vue中雙向數據綁定是如何實現的
v-model
Vue的雙向數據綁定是通過數據劫持結合發(fā)布者訂閱者模式來實現的
詳述虛擬DOM中的diff算法
vue提供了幾種腳手架模板
webpack- 一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
webpack-simple- 一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。
browserify- 一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
browserify-simple- 一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。
simple- 一個最簡單的單頁應用模板。
pwa- 一個集成pwa環(huán)境的webapp的模板
常見的幾種MVVM的實現方式
1、數據劫持(vue)：通過Object.defineProperty()去劫持數據每個屬性對應的getter和setter
2、臟值檢測(angular)：通過特定事件比如input，change，xhr請求等進行臟值檢測。
3、發(fā)布-訂閱模式(backbone)：通過發(fā)布消息，訂閱消息進行數據和視圖的綁定監(jiān)聽。
第九天?
Vue路由的實現原理 ?
利用URL中的hash("#");
利用History interface在HTML5中新增的方法;
● hash: 使用 URL hash 值來作路由。默認模式。
● history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
SPA 路由history模式上線后刷新404 ?
$route和$router的區(qū)別 ?
route是路由信息對象，包括path，params，hash，query，fullPath，matched，name等路由信息參數，而router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等
router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。
自定義過濾器詳解
全局過濾器
所有的vm實例都能共享
私有過濾器
定義私有過濾器。過濾器有兩個條件（過濾器名稱）和（處理函數）
詳情：
https://mp.weixin.qq.com/s?src=11×tamp=1562688673&ver=1718&signature=6DY*H6psqawnZ6GFWoC4wCptjZT1NIWd6n0LRvya79myGnSW*R1jLLLynlFZcLq8s*1hljvU9Lpjzy7PR9Q7EZ2pdtszij2mcqbNKDOAxlPGwogrU7FJTw5ez-U7pbH5&new=1
自定義指令詳解
有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。
assets和static的區(qū)別 ?
assests放置的是組件的資源，static放置的是非組件的資源。
第十天?
簡述同步和異步的區(qū)別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；
異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)。當有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率。
數組去重（手寫代碼）
? ? ? var arr=[1,2,3,4,2,3,3,3,6,5,1,2,5,4,2]
var? kong = [];
for(var i=0;i<arr.length;i++){
if(kong.indexOf(arr[i]) == -1){
kong.push(arr[i]);
}
}
document.write(kong);
在JavaScript中什么是偽數組？如何將偽數組轉化為標準數組
偽數組：
1，具有l(wèi)ength屬性
2，按索引方式存儲數據
3，不具有數組的push,pop等方法
可以使用 Array.prototype.slice.call(arguments); 來達到轉換的目的
因此，如果需要把 NodeList 轉換為真正的數組，則需要做下兼容處理。
function?makeArray(c) {?try?{?return?Array.prototype.slice.call(c);?}?catch?(e) {?var?ret = [], i = 0, len = c.length;?for?(; i < len; i++) {?ret[i] = (c[i]);?}?return?ret;?}?}
SPA路由history模式，打包上線都遇到了哪些問題？你是如何解決的？
答案：http://www.itdecent.cn/p/9705040243f2
JavaScript中callee和caller的作用
caller是javascript函數類型的一個屬性，它引用調用當前函數的函數
callee則不是函數對象的屬性，它是函數上下文中arguments對象的屬性
詳細看：http://www.itdecent.cn/p/8cef8d96fd03
第十一天
ES5/ES6 的繼承除了寫法以外還有什么區(qū)別？
ES5的繼承是通過prototype或構造函數機制來實現。
ES5的繼承實質上是先創(chuàng)建子類的實例對象，然后再將父類的方法添加到this上(Parent.apply(this))。
ES6的繼承機制實質上是先創(chuàng)建父類的實例對象this(所以必須先調用父類的super()方法)，然后再用子類的構造函數修改this。
http://www.itdecent.cn/p/bf75655482c2
http狀態(tài)碼有哪些？分別是什么意思？
http://note.youdao.com/noteshare?id=f93668863dafc3e6b300518c7e293eb2
瀏覽器是如何渲染頁面的？
處理HTML標記并構建DOM樹
處理CSS標記并構建CSSOM樹
將DOM與CSSOM合并成一個渲染樹
根據渲染樹來布局，計算每個節(jié)點的布局信息
將各個節(jié)點繪制到屏幕上
http://www.itdecent.cn/p/b7b7a5904223
typeof和instanceof相同點與不同點
相同點：
JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空， 或者是什么類型的。
不同點:
typeof:
1.返回值是一個字符串， 用來說明變量的數據類型。
2.typeof 一般只能返回如下幾個結果： number, boolean, string, function, object, undefined。
instanceof:
1.返回值為布爾值;
2. instanceof 用于判斷一個變量是否屬于某個對象的實例。
https://blog.csdn.net/qq_38601916/article/details/81275091
如何解決回調地獄？請手寫代碼
https://www.cnblogs.com/qwangxiao/p/10500521.html
第十二天
請詳解移動端點透，為什么會發(fā)生點透？描述發(fā)生的場景及解決方案（越多越好）
網絡：https://blog.csdn.net/qq_36410795/article/details/88605754
移動端為什么會有一像素問題？如何解決？
因為css中的1px并不等于移動設備的1px，這些由于不同的手機有不同的像素密度。在window對象中有一個devicePixelRatio屬性，他可以反應css中的像素與設備的像素比。
devicePixelRatio的官方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。
解決方案：https://blog.csdn.net/weixin_34161064/article/details/91033884
你還知不知道其他移動端的常見問題？
第十三天
new操作符干了什么？
https://zhuanlan.zhihu.com/p/23768748
null和undefined的區(qū)別？
1、Null類型，代表空值，代表一個空對象指針，使用typeof運算得到object，所以你可以認為它是一個特殊的對象值；
2、Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined；
3、undefined是訪問一個未初始化的變量時返回的值，而null是訪問一個尚未存在的對象時所返回的值。因此，可以把undefined看作是空的變量，而null看作是空的對象。
eval是做什么的？
https://blog.csdn.net/lxcao/article/details/52782771
什么是瀏覽器的同源策略？
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉f Web 是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
它的核心就在于它認為自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。
所謂同源是指：域名、協議、端口相同。
詳細：https://www.cnblogs.com/laixiangran/p/9064769.html
iframe的優(yōu)缺點
iframe的缺點
1、頁面樣式調試麻煩，出現多個滾動條；
2、瀏覽器的后退按鈕失效；
3、過多會增加服務器的HTTP請求；
4、小型的移動設備無法完全顯示框架；
5、產生多個頁面，不易管理；
6、不容易打??；
7、代碼復雜，無法被一些搜索引擎解讀。
iframe的優(yōu)點：
1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引用iframe，那么你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統(tǒng)一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。
4.如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。
5.重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，增加了網頁下載速度)
詳細：https://blog.csdn.net/katara1109/article/details/49073663
第十四天
什么是事件委托？為什么要用事件委托？
你如何優(yōu)化自己的代碼？
什么是盒模型？
行內、塊元素、空元素分別舉例
src和href的區(qū)別
第十五天
link和import的區(qū)別
HTML5為什么只需要寫<!
doctype作用，標準模式和兼容模式有什么區(qū)別
請寫出html5新增的API
CSS優(yōu)先級算法如何計算？
第十六天
列舉三種強制類型轉換和兩種隱式類型轉換
JavaScript typeof返回哪些數據類型
window.onload 和document.ready的區(qū)別
== 和 ===的區(qū)別
style標簽寫在body前和body后有什么區(qū)別
