[TOC]
# 1、什么是mvvm mvc是什么區別 原理
## 一、MVC(Model-View-Controller)
MVC是比較直觀的架構模式,用戶操作->View(負責接收用戶的輸入操作)->Controller(業務邏輯處理)->Model(數據持久化)->View(將結果反饋給View)。
MVC使用非常廣泛,比如JavaEE中的SSH框架
## 三、MVVM(Model-View-ViewModel)
如果說MVP是對MVC的進一步改進,那么MVVM則是思想的完全變革。它是將“數據模型數據雙向綁定”的思想作為核心,因此在View和Model之間沒有聯系,通過ViewModel進行交互,而且Model和ViewModel之間的交互是雙向的,因此視圖的數據的變化會同時修改數據源,而數據源數據的變化也會立即反應view。
# 2、px和em的區別
> px表示像素 (計算機屏幕上的一個點:1px = 1/96in),是絕對單位,不會因為其他元素的尺寸變化而變化;em表示相對于父元素的字體大小。em是相對單位 ,沒有一個固定的度量值,而是由其他元素尺寸來決定的相對值。
>
# 3、eval()的作用
把字符串參數解析成JS代碼并運行,并返回執行的結果;
```
eval("2+3");//執行加運算,并返回運算值。
eval("varage=10");//聲明一個age變量
eval的作用域
functiona(){
eval("var x=1"); //等效于 var x=1;
console.log(x); //輸出1
}
a();
console.log(x);//錯誤 x沒有定
```
# 4、關于JS事件冒泡與JS事件代理(事件委托)
事件作為DOM操作重要的一環,需要大家好好理解和運用,今天特意看了一下事件冒泡和事件代理的相關資料,感觸頗深,也深感自己的無知不知道多浪費了多少內存,廢話不多說進入正題:
## 4.1.事件冒泡:
通俗易懂的來講,就是當一個子元素的事件被觸發的時候(如onclick事件),該事件會從事件源(被點擊的子元素)開始逐級向上傳播,觸發父級元素的點擊事件。
## 4.2.事件委托
事件委托,首先按字面的意思就能看你出來,是將事件交由別人來執行,再聯想到上面講的事件冒泡,是不是想到了?對,就是將子元素的事件通過冒泡的形式交由父元素來執行。下面經過詳細的例子來說明事件委托:
* 有可能在開發的時候會遇到這種情況:如導航每一個欄目都要加一個事件,你可能會通過遍歷來給每個欄目添加事件:
```
var ul = document.getElementById('parentUl');
ul.onclick=function (event) {
var e = event||window.event,
source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素,在IE中是srcElement
if(source.nodeName.toLowerCase() == "li"){ //判斷只有li觸發的才會輸出內容
alert(source.innerHTML);
}
stopPropagation(e); //阻止繼續冒泡
};
function addElement() {
var li = document.createElement('li');
li.innerHTML="我是新孩子";
ul.appendChild(li);
}
```
# 5、介紹一下box-sizing屬性
## 兼容問題
首先,box-sizing屬性在FireFox中存在兼容問題,所以需要使用-moz-box-sizing做一下兼容。
### 屬性值
* box-sizing:content-box
* box-sizing:border-box
* box-sizing:inherit
### content-box
```
這是box-sizing的默認屬性值
是CSS2.1中規定的寬度高度的顯示行為
在CSS中定義的寬度和高度就對應到元素的內容框
在CSS中定義的寬度和高度之外繪制元素的內邊距和邊框
```
### border-box
```
在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
即為元素在設置內邊距和邊框是在已經設定好的寬度和高度之內進行繪制
CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所占的實際寬度和高度
```
# 6、請解釋JSONP的工作原理,以及它為什么不是真正的AJAX。
JSONP (JSON with Padding)是一個簡單高效的跨域方式,HTML中的script標簽可以加載并執行其他域的javascript,于是我們可以通過script標記來動態加載其他域的資源。例如我要從域A的頁面pageA加載域B的數據,那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數據,然后在 pageA中用script標簽把pageB加載進來,那么pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數,pageB加載完之后會執行pageA中定義的函數,所需要的數據會以參數的形式傳遞給該函數。JSONP易于實現,但是也會存在一些安全隱患,如果第三方的腳本隨意地執行,那么它就可以篡改頁面內容,截獲敏感數據。但是在受信任的雙方傳遞數據,JSONP是非常合適的選擇。AJAX是不跨域的,而JSONP是一個是跨域的,還有就是二者接收參數形式不一樣!
# 7、請解釋一下JavaScript的同源策略。
在客戶端編程語言中,如javascript和 ActionScript,同源策略是一個很重要的安全理念,它在保證數據的安全性方面有著重要的意義。同源策略規定跨域之間的腳本是隔離的,一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那么什么叫相同域,什么叫不同的域呢?當兩個域具有相同的協議, 相同的端口,相同的host,那么我們就可以認為它們是相同的域。同源策略還應該對一些特殊情況做處理,比如限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是通過file協議打開的,如果腳本能通過file協議訪問到硬盤上其它任意文件,就會出現安全隱患,目前IE8還有這樣的隱患。
# 8、瀏覽器的內核分別是什么?
```
IE: trident內核
Firefox:gecko內核
Safari:webkit內核
Opera:以前是presto內核,Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基于webkit,Google與Opera Software共同開發)
```
# 9、瀏覽器是如何渲染頁面的?
## 渲染的流程如下:
1. 解析HTML文件,創建DOM樹。
自上而下,遇到任何樣式(link、style)與腳本(script)都會阻塞(外部樣式不阻塞后續外部腳本的加載)。
2. 解析CSS。優先級:瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式;
3. 將CSS與DOM合并,構建渲染樹(Render Tree)
4. 布局和繪制,重繪(repaint)和重排(reflow)
# 10、從輸入url到顯示頁面,都經歷了什么
##
第一種解釋:
* 第一步:客戶機提出域名解析請求,并將該請求發送給本地的域名服務器。
* 第二步:當本地的域名服務器收到請求后,就先查詢本地的緩存,如果有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。
* 第三步:如果本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,然后根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)的主域名服務器的地址。
* 第四步:本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。
* 第五步:重復第四步,直到找到正確的紀錄。
## 第2種解釋:
一般會經歷以下幾個過程:
1. 首先,在瀏覽器地址欄中輸入url
2. 瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存,如果緩存中有,會直接在屏幕中顯示頁面內容。若沒有,則跳到第三步操作。
3. 在發送http請求前,需要域名解析(DNS解析)(DNS(域名系統,Domain Name System)是互聯網的一項核心服務,它作為可以將域名和IP地址相互映射的一個分布式數據庫,能夠使人更方便的訪問互聯網,而不用去記住IP地址。),解析獲取相應的IP地址。
4. 瀏覽器向服務器發起tcp連接,與瀏覽器建立tcp三次握手。(TCP即傳輸控制協議。TCP連接是互聯網連接協議集的一種。)
5. 握手成功后,瀏覽器向服務器發送http請求,請求數據包。
6. 服務器處理收到的請求,將數據返回至瀏覽器
7. 瀏覽器收到HTTP響應
8. 讀取頁面內容,瀏覽器渲染,解析html源碼
9. 生成Dom樹、解析css樣式、js交互
10. 客戶端和服務器交互
11. ajax查詢
- 雜(一般誤入)
- Vue
- CSS
- Web前端性能優化有哪些方法
- 后端
- 嘻嘻哈哈
- 一
- 二
- 三
- 大雜燴
- 什么是HTML,什么是CSS,什么JavaScript?
- JS動畫與CSS動畫的差異
- HTML,CSS
- 1.px、em、rem、vw、rpx之間的區別
- 2.為什么要初始化CSS樣式
- 3.CSS優先級算法如何計算?
- 4. ::before 和 :after中雙冒號和單冒號有什么區別?
- 5.display:inline-block 什么時候會顯示間隙?
- 6.行內元素有哪些?塊級元素有哪些?如何將行內元素表現為塊級元素?
- 7.css新增了哪些功能?
- 8.對html5語義化的理解
- 9.http頭的expires是表示什么
- 10.bootstrap柵格系統實現原理
- 11.清除浮動的方法
- 12.使用image間隙留白問題
- 13.html分為哪些層?都代表什么?
- 14.對于web中W3C標準的理解?
- 15.用css寫一個三角形?
- 16.CSS中使用表格怎么合并行,合并列
- 17.處理margin-top的bug問題
- 18.動畫進度條
- 19.box-sizing的屬性值
- 20.box-shadow的參數
- 21.a標簽的四個狀態及它們的順序、設置title屬性的效果
- 22.如何實現垂直水平居中
- 23.什么是雪碧圖
- 24.h1和title、b和strong、i和em的區別
- 25.table和div+css的區別
- 26.錨點的作用是什么?如何創建錨點
- 27.margin距離問題
- 28.響應式的導航欄
- 29.進度條
- 30.img標簽的title屬性和alt屬性有什么區別
- 31.媒體查詢
- 32.CSS選擇器有哪些?哪些屬性可以繼承?
- Javascript
- 1.面向對象的基本特征
- 2.在JavaScript中實現繼承的方法
- 2.用js去除字符串空格
- 3.你怎么理解作用域?
- 4.get和post的請求?
- 5.如何理解閉包?
- 6.數組的克隆(深拷貝)的方法
- 7.es6新增了哪些特性
- 8.json對象與字符串轉換
- 9.回調函數
- 10.HTML和XHML的共同點
- 11.js中把7.25轉換成一個整數
- 12.循環遍歷的方法
- 13.深拷貝與淺拷貝的區別
- 14.JavaScript有哪些方法定義對象
- 15.AJAX請求總共有多少種CALLBACK
- 16.js中的定時器
- 17.let、var、const的區別
- 18.==和===的區別
- 19.dom文檔(自上往下)加載的順序
- 20.string變成int型
- 21.如何判斷是否為一個質數
- 22.typeof返回類型,以及比較typeof與instanceof
- 23.判斷一個對象是否為數組以及數組的方法
- 24.解釋一下原型和原型鏈、hasOwnProperty
- 25.js有哪些內置對象
- 26.new一個對象發生了什么
- 27.sass的理解
- 28.document.onLoad與window.ready的區別
- 29.什么是跨域?跨域請求資源的方法有哪些?
- 30.Ajax的優缺點及工作原理
- 31.什么是正則
- 32.貪婪模式與非貪婪(懶惰)模式
- 33.數組去重
- 34.js字符串操作函數
- 35.substring和substr傳參的區別
- 36.如何實現一個原生的ajax,分成幾步
- 37.如何實現一個事件綁定
- 38.事件冒泡與事件捕獲的區別
- 39.事件監聽
- 40.字符串下標與字符串某一個字符之間的轉換
- 41.new操作符的作用
- 42.函數的定義方式
- 43.括號在JavaScipt中的作用
- 44.回調地獄
- 45.document.write和innerHTML的區別
- 46.解釋一下JS同源策略
- 47.說幾種DOM節點
- 48.DOM事件流
- 49.同步與異步
- 50.json和jsonp的區別
- 51.字符串去重
- 52.JS中的數據類型
- 53.this關鍵字指向問題
- 54.break和contiune之間的區別
- 55.如何消除事件冒泡與事件默認行為
- 56.請列舉jquery中的選擇器
- 瀏覽器及服務端
- 1.請說出三種減低頁面加載時間的方法
- 2.瀏覽器的緩存機制
- 3.瀏覽器的內核
- 4.瀏覽器的兼容問題
- 5.src和href的區別
- 6.高質量代碼具備哪些條件
- 7.HTTP請求與響應
- 8.談談對前端模塊化的理解
- 9.嚴格模式與混雜模式如何區分?
- 10.重繪和重排的區別
- 11.MVC和MVVM的區別
- 12.前端頁面如何解決適配的問題
- 13.寫一個400錯誤
- 14.狀態碼
- 15.開發及性能優化
- 16.靜態網頁與動態網頁的區別
- 17.如何調試網頁代碼?如何查看網頁源代碼
- 18.語義化的主要目的是什么?
- 19.如何讓所有的瀏覽器支持ES6語法
- 20.cookie,LocalStorage,sessionStorage的區別
- 計算題
- 1.margin距離問題
- 2.math
- 3.使用js實現階乘(1~10)
- 4.求一個數組的最大數
- 5.判斷一個字符串中出現次數最多的字符,統計這個次數
- 6.質數
- 7.如何把一個字符串倒過來輸出
- 取數據,渲染數據
- 1.ajax版本
- 2.vue版本
- 3.React版本
- 4.用class封裝一個ajax
- 5.用回調函數封裝一個ajax
- Vue,React
- 1.什么是路由?
- 2.vuex的工作流程
- 3.redux的工作流程
- 微信小程序
- 1.程序的生命周期
- 2.組件的生命周期
- 3.微信小程序頁面的生命周期
- 不會的問題
- 2019/01/02
- 2019/01/03
- 2019/01/07
- 2019/01/21
- 1