1.進程和線程的區(qū)別和關(guān)系
1.進程是操作系統(tǒng)分配資源的最小單位哩治,線程是程序執(zhí)行的最小單位。
2.一個進程由一個或多個線程組成赃蛛,線程是一個進程中代碼的不同執(zhí)行路線夭谤;
3.進程之間相互獨立,但同一進程下的各個線程之間共享程序的內(nèi)存空間
2.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別
1. 單頁面(SPA) 指一個頁面只有一個主頁面應(yīng)用隔盛,瀏覽器一開始要加載所有必需的 html犹菱,js,css吮炕,所有頁面內(nèi)用都在主頁面中腊脱。但寫的時候還是會分開寫。
然后在交互的時候由路由程序動態(tài)載入龙亲,
2.多頁面(MPA)就是指一個應(yīng)用中有多個頁面陕凹,頁面跳轉(zhuǎn)時是整頁刷新
單頁面優(yōu)點
-用戶體驗好,快鳄炉,內(nèi)容的改變不需要重新加載整個頁面
-前后端分離
-頁面效果會比較炫酷
單頁面缺點
-不利于seo
-導(dǎo)航不可用
-初次加載時耗時多
-頁面復(fù)雜度提高很多
3.瀏覽器中的回流和重繪是什么杜耙,分別在什么情況下觸發(fā)?
重繪
當(dāng)前元素的樣式(背景顏色拂盯,字體顏色)發(fā)生改變的時候佑女,我們只需要把改變的元素重新的渲染一下即可,重繪對于瀏覽器的性能較小。
發(fā)生重繪的情形:改變?nèi)萜鞯耐庥^風(fēng)格等团驱,比如background:black等簸呈。改變外觀,不改變布局店茶,不會影響到其他的DOM蜕便。
回流
瀏覽器為了重新渲染部分或者全部的文檔而重新計算文檔中元素的位置和幾何構(gòu)造的過程。
1.頁面首次渲染
2.瀏覽器窗口大小發(fā)生改變
3.元素尺寸或者位置發(fā)生改變
4.元素的內(nèi)容發(fā)生變化
5.元素字體大小變化
6.添加或者刪除可見的DOM元素
4.一次完整的HTTP請求過程
1贩幻、使用DNS域名解析轿腺;
2、發(fā)起TCP的3次握手
3丛楚、建立TCP連接后發(fā)起http請求族壳;
4、服務(wù)器響應(yīng)HTTP請求趣些,瀏覽器得到html代碼仿荆;
5、瀏覽器解析html代碼坏平,并請求html代碼中的資源(如js拢操、css圖片等);
6舶替、瀏覽器對頁面進行渲染
5.TCP三次握手和四次揮手
【第一次握手】
客戶端向服務(wù)器發(fā)出連接請求報文令境,表示客戶端想要和服務(wù)端建立連接。
【第二次握手】
TCP服務(wù)器收到請求報文后顾瞪,如果同意連接舔庶,則發(fā)出確認(rèn)報文。詢問客戶端是否準(zhǔn)備好陈醒。
【第三次握手】
CP客戶進程收到確認(rèn)后惕橙,還要向服務(wù)器給出確認(rèn),這里客戶端表示我已經(jīng)準(zhǔn)備好钉跷。
第一次揮手
客戶端進程發(fā)出連接釋放報文弥鹦,并且停止發(fā)送數(shù)據(jù)
第二次揮手
服務(wù)器收到連接釋放報文,發(fā)出確認(rèn)報文尘应,這時候處于半關(guān)閉狀態(tài)惶凝,即客戶端已經(jīng)沒有數(shù)據(jù)要發(fā)送了吼虎,但是服務(wù)器若發(fā)送數(shù)據(jù)犬钢,客戶端依然要接受。思灰。
第三次揮手
服務(wù)器將最后的數(shù)據(jù)發(fā)送完畢后玷犹,就向客戶端發(fā)送連接釋放報文,服務(wù)器就進入了(最后確認(rèn))狀態(tài)洒疚,等待客戶端的確認(rèn)歹颓。
第四次揮手
客戶端收到服務(wù)器的連接釋放報文后坯屿,必須發(fā)出確認(rèn),服務(wù)器只要收到了客戶端發(fā)出的確認(rèn)巍扛,立即進入關(guān)閉狀態(tài)领跛。結(jié)束了這次的TCP連接。
6.常見跨域及解決方案
原因:是瀏覽器同源策略限制撤奸,當(dāng)前域名的js只能讀取同域下的窗口屬性吠昭。
同源策略:是指”協(xié)議+域名+端口”三者相同,即便兩個不同的域名指向同一個ip地址胧瓜,也非同源矢棚。
1. 通過jsonp跨域
我們把js、css府喳,img等靜態(tài)資源分離到另一臺獨立域名的服務(wù)器上蒲肋,
在html頁面中再通過相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源,而被瀏覽器允許钝满,
基于此原理兜粘,我們可以通過動態(tài)創(chuàng)建script,再請求一個帶參網(wǎng)址實現(xiàn)跨域通信弯蚜。
2. 跨域資源共享(CORS)
普通跨域請求:只服務(wù)端設(shè)置Access-Control-Allow-Origin即可妹沙,前端無須設(shè)置,若要帶cookie請求:前后端都需要設(shè)置熟吏。
CORS是一個W3C標(biāo)準(zhǔn)距糖,全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務(wù)器牵寺,發(fā)出XMLHttpRequest請求悍引,從而克服了AJAX只能同源使用的限制。
3. nginx反向代理接口跨域
通過nginx配置一個代理服務(wù)器(域名與domain1相同帽氓,端口不同)做跳板機趣斤,反向代理訪問domain2接口,
并且可以順便修改cookie中domain信息黎休,方便當(dāng)前域cookie寫入浓领,實現(xiàn)跨域
-------------------------------------------CSS--------------------------
1.標(biāo)準(zhǔn)盒模型和IE盒子模型的區(qū)別
標(biāo)準(zhǔn)盒模型:占據(jù)空間=width+margin+padding+border
IE盒子: 占據(jù)空間=width+margin
box-sizing : content-box || border-box || inherit;
content-box時,標(biāo)準(zhǔn)模式
border-box時势腮, 怪異模式
inherit時联贩,從父元素來繼承box-sizing屬性的值
2.CSS3中彈性盒(Flex)布局
設(shè)置display為flex,容器被渲染為一個塊級元素。
設(shè)置display為inline-flex,容器被渲染為一個行內(nèi)元素
定義伸縮方向
flex-direction:
row:從左向右排列
row-reverse: 從右向左排列
column: 從上到下排列
column: 從下向上排列
定義對齊方式
1.主軸對齊--justify-content:
flex-start: 位置左靠齊
flex-end: 位置右靠齊
center:居中
space-between: 兩端對齊捎拯,中間居中
space-around: 兩端留白泪幌,中間居中
2.側(cè)軸對齊 --align-items:
flex-start: 側(cè)軸起始位置。
flex-end:側(cè)軸結(jié)束位置。
center:居中祸泪。
base-line:根據(jù)他們的基線對齊吗浩。
space-around: 拉伸填充整個伸縮容器
3.flex-wrap: 設(shè)置是否換行
4. align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線没隘,該屬性不起作用懂扼。
3. rem使用及原理
1.rem是相對長度單位
相對于根元素(即html)ont-size計算值的倍數(shù)的一個css單位,默認(rèn)1rem=16px右蒲;
2.rem的移動適配原理
設(shè)計稿寬度:600px
移動設(shè)備:600px
設(shè)置html的font-size= 移動設(shè)備(600) / 設(shè)計稿寬度(600) * 100 = 100px微王,那么width=1rem = 100px,此時這個盒子屏占比為:1/6
當(dāng)運行在屏幕為300px的設(shè)備上時品嚣,font-size= 移動設(shè)備(300) / 設(shè)計稿寬度(600) * 100 = 50px炕倘,那么width=1rem = 50px,此時這個盒子屏占比為:1/6
以此達(dá)到移動適配的效果翰撑,乘以100是為了px換算為rem時好計算
3.設(shè)置html的font-size大小
720為設(shè)計稿尺寸
document.getElementsByTagName("html")[0].style.fontSize =(document.documentElement.clientWidth/ 720) 100 + 'px'
4.transition罩旋、transform、animation(過渡眶诈,變換涨醋,動畫)
(1.)transition(過渡)就是一個屬性從一個值過渡到另一個值
包含四個值,transition-property(執(zhí)行變換的屬性)逝撬,transition-duration(執(zhí)行變換的持續(xù)時間),transition-timing-function(變換的速率變化模式),transition-delay(變換延遲時間)浴骂。
(2.)transform(變換)就是一個整體的位置(或整體大小)發(fā)生變換
包含值:rotate(圍繞中心點旋轉(zhuǎn)若干度)宪潮, translate(x,y)移動溯警, scale(縮放),skew扭曲(傾斜)狡相。
transform-origin:改變中心點梯轻。
(3.)animation(動畫),就是在一段時間內(nèi)各種屬性進行變化從而達(dá)到一個動畫的效果尽棕。
animation有兩個關(guān)鍵喳挑。
一個是 keyframes 用 @keyframs 開頭,后面接一個動畫名滔悉,然后用大括號括起來伊诵,在里面寫每一個關(guān)鍵幀的屬性
一個是 animation的屬性值
animation-name(動畫名,也就是keyfram中定義的動畫名)
animation-duration(動畫持續(xù)時間)
animation-timing-function(動畫變化的速率)
animation-delay(動畫延遲播放的時間)
animation-iteration-count(動畫循環(huán)的次數(shù)回官,infinite是無限次)
animation-direction(動畫的方向0到100%)
animation-play-state(動畫的播放狀態(tài) 播放暫停)
5.css元素垂直水平居中(六種)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="box" style="width: 200px; height: 200px; border: solid red;">
<div id="sub" style="width: 100px; height: 100px; border: solid blue;"></div>
</div>
</body>
<style type="text/css">
/* 第一中 */
/* #box{
position: relative;
}
#sub{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
} */
/* 第二中 */
/* #box{
position: relative;
}
#sub{
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
} */
/* 第三種 */
/* #box{
position: relative;
}
#sub{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
} */
/* 第四種 */
/* #box{
display: grid;
}
#sub{
margin: auto;
} */
/* 第五種 */
/* #box{
display: table-cell;
text-align: center;
vertical-align: middle;
}
#sub{
display:inline-block;
} */
/* 第六種 */
#box {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</html>
6.css 圣杯布局(三種)
position 布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- position 圣杯布局 -->
<!-- 布局順序不分先后-->
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div>
</body>
<style type="text/css">
div {
height: 200px;
}
.left {
background-color: red;
width: 200px;
position: absolute;
top: 0;
left: 0;
}
.right {
background-color: purple;
width: 200px;
position: absolute;
top: 0;
right: 0;
}
.middle {
background-color: pink;
position: absolute;
top: 0;
left: 200px;
right: 200px;
}
</style>
</html>
display 圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- display 圣杯布局 -->
<!-- 布局順序分先后 -->
<div id="box">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
<style type="text/css">
#box {
display: flex;
}
.left,.right{
height: 200px;
width: 200px;
background: red;
}
.middle{
background: darkgoldenrod;
flex: 1;
}
</style>
</html>
float 布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- float 圣杯布局 -->
<!-- div布局分先后 -->
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div> //重點
</body>
<style type="text/css">
div {
height: 200px;
}
.left {
background: red;
float: left;
width: 200px;
}
.right {
background: blue;
float: right;
width: 200px;
}
.middle {
background: deeppink;
}
</style>
</html>
7. 雙飛翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 雙飛翼布局 -->
<div id="box">
<div class="middle">
<div class="content">main </div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
}
#box {
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
height: 200px;
}
.left {
width: 200px;
margin-left: -100%;
background-color: blue;
}
.right {
width: 300px;
margin-left: -300px;
background-color: green;
}
.content {
margin: 0 300px 0 200px;
}
.middle {
width: 100%;
background-color: red;
}
</style>
</html>
-------------------------------------------JS-----------------------------
1.JavaScript 基本數(shù)據(jù)類型和引用類型的區(qū)別
原文地址鏈接
**基本數(shù)據(jù)類型:undefined,null,boolean,number,string,Symbol **
--無法改變一個基本類型的值
--不可以添加屬性和方法
--賦值是簡單賦值
-- 比較是值的比較
--存放在棧區(qū)的
js引用類型:Object(Array,Function,Date )
--值是可以改變的
--可以添加屬性和方法
--賦值是對象引用
--比較是引用的比較
--同時保存在棧區(qū)和堆區(qū)中的
2.什么是偽數(shù)組曹宴?如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組?
偽數(shù)組:
無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為孙乖,不具有數(shù)組的push,pop等方法浙炼,
但仍可以對真正數(shù)組遍歷方法來遍歷它們份氧。典型的是函數(shù)的argument參數(shù)唯袄,
還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組弯屈。
解決:
可以使用Array.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。
3.JS中的call恋拷、apply资厉、bind方法
原文地址
共同點:
1.都是用來改變函數(shù)的this對象的指向的;
2.第一個參數(shù)都是this要指向的對象蔬顾,也就是想指定的上下文宴偿;
3.都可以利用后續(xù)參數(shù)傳參;
不同點:
bind 是返回對應(yīng)函數(shù)诀豁,便于稍后調(diào)用窄刘;apply 、call 則是立即調(diào)用 舷胜。
call()和apply()唯一的區(qū)別就在于call()接收的是參數(shù)列表娩践,而apply()則接收參數(shù)數(shù)組
4.new 操作符具體干了什么?
new共經(jīng)歷了四個過程:
var fn = function () { };
var fnObj = new fn();
1烹骨、創(chuàng)建了一個空對象
var obj = new object();
2翻伺、設(shè)置原型鏈
obj._proto_ = fn.prototype;
3、讓fn的this指向obj沮焕,并執(zhí)行fn的函數(shù)體
var result = fn.call(obj);
4吨岭、判斷fn的返回值類型,如果是值類型峦树,返回obj辣辫。如果是引用類型,就返回這個引用類型的對象魁巩。
if (typeof(result) == "object"){
fnObj = result;
} else {
fnObj = obj;
}
------------------------------------------vue-----------------------------
5.data為什么是一個函數(shù)
因為組件會復(fù)用络它,只有每個組件實例維護一份獨立拷貝,才不會相互影響
6.computed和 watch 的區(qū)別
computed計算屬性是自動監(jiān)聽依賴值的變化歪赢,從而動態(tài)返回內(nèi)容化戳,監(jiān)聽是一個過程,在監(jiān)聽的值變化時埋凯,可以觸發(fā)一個回調(diào)点楼,并做一些事情。 所以區(qū)別來源于用法白对,只是需要動態(tài)值掠廓,那就用計算屬性;需要知道值的改變后執(zhí)行業(yè)務(wù)邏輯甩恼,才用 watch蟀瞧,用反或混用雖然可行沉颂,但都是不正確的用法。
7.computed和methods區(qū)別
computed 是基于它的依賴緩存悦污,只有相關(guān)依賴發(fā)生改變時才會重新取值铸屉。而使用 methods ,在重新渲染的時候切端,函數(shù)總會重新調(diào)用執(zhí)行
computed必須返回一個值頁面綁定的才能取得值彻坛,而methods中可以只執(zhí)行邏輯代碼,可以有返回值踏枣,也可以沒有‘
8.MVVM模式
1.在 MVVM 架構(gòu)下昌屉,View 和 Model 之間并沒有直接的聯(lián)系,而是通過 ViewModel 進行交互茵瀑,Model和 ViewModel之間的交互是雙向的间驮, 因此 View 數(shù)據(jù)的變化會同步到 Model 中,而 Model數(shù)據(jù)的變化也會立即反應(yīng)到 View上马昨。
2. ViewModel通過雙向數(shù)據(jù)綁定把 View 層和Model層連接了起來竞帽,而View 和 Model 之間的同步工作完全是自動的,無需人為干涉偏陪,復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理抢呆。
9.vue雙向數(shù)據(jù)綁定
原理:是采用** Object.defineProperty** 的 getter 和 setter,用數(shù)據(jù)劫持和訂閱發(fā)布實現(xiàn)雙向綁定笛谦。
實現(xiàn)過程: 通過實例化一個Vue對象的時候抱虐,對其數(shù)據(jù)屬性遍歷,通過Object.defineProperty()給數(shù)據(jù)對象添加setter() getter()饥脑,
并對模板做編譯生成指令對象恳邀,每個指令對象綁定一個watcher對象,然后對數(shù)據(jù)賦值的時候就會觸發(fā)setter灶轰,
這時候相應(yīng)的watcher對其再次求值谣沸,如果值確實發(fā)生變化了,就會通知相應(yīng)的指令笋颤,調(diào)用指令的update方法乳附,
由于指令是對DOM的封裝,這時候會調(diào)用DOM的原生方法對DOM做更新伴澄,這就實現(xiàn)了數(shù)據(jù)驅(qū)動DOM的變化赋除。
同時vue還會對DOM做事件監(jiān)聽,如果DOM發(fā)生變化非凌,vue監(jiān)聽到举农,就會修改相應(yīng)的data
11.Vue.$nextTick
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法敞嗡,獲取更新后的 DOM颁糟。
12.vue中組件通信
1.父傳子
在父組件上通過自定義標(biāo)簽屬性的形式來綁定數(shù)據(jù)航背。然后子組件props 接收
2.子傳父
子組件中通過 this.$emit ('自定義事件名稱', '要傳遞的數(shù)據(jù)')
父組件通過@自定義事件名稱="事件處理函數(shù)",來完成父組件接收的任務(wù)
3.中央事件總線bus
原文地址
var bus = new Vue();
bus.$emit('自定義事件名','發(fā)送過來的數(shù)據(jù)')棱貌;
bus.$on('自定義事件名'玖媚,function(){
//執(zhí)行。键畴。最盅。
})突雪;
13.簡述Vuex工作流程
組件數(shù)據(jù)修改的時候需要調(diào)用dispatch來觸發(fā)actions里面的方法起惕。
actions里面的每個方法中都會有一個commit方法,當(dāng)方法執(zhí)行的時候會通過commit來觸發(fā)mutations里面的方法進行數(shù)據(jù)的修改咏删。
mutations里面的每個函數(shù)都會有一個state參數(shù)惹想,這樣就可以在mutations里面進行state的數(shù)據(jù)修改,當(dāng)數(shù)據(jù)修改完畢后督函,會傳導(dǎo)給頁面嘀粱。頁面的數(shù)據(jù)也會發(fā)生改變。
14.vue-router傳參
query和params的區(qū)別 :地址欄的展現(xiàn)形式不同 接收方式不同 使用場景的不同
// 第一種:字符串拼接
this.$router.push(path:/index/${id} )
this.$route.params.id // 接收
// 第二種:name和 params
this.$router.push({
name:'Name',
params:{id:id}
})
this.$route.params.id // 接收
//第三種:path和query
this.$router.push({
path:'/index',
query:{id:id}
})
this.$route.query //接收
15.vue-router的兩種模式
兩種路由模式:hash模式和history模式辰狡。
hash模式url里面永遠(yuǎn)帶著#號锋叨,我們在開發(fā)當(dāng)中默認(rèn)使用這個模式。
如果用戶考慮url的規(guī)范那么就需要使用history模式宛篇,因為history模式?jīng)]有#號娃磺,適合推廣宣傳。
當(dāng)然其功能也有區(qū)別叫倍,比如我們在開發(fā)app的時候有分享頁面偷卧,
咱們把這個頁面分享到第三方的app里,有的app里面url是不允許帶有#號的吆倦,所以要將#號去除那么就要使用history模式听诸,
但是使用history模式還有一個問題就是,在訪問二級頁面的時候蚕泽,做刷新操作晌梨,會出現(xiàn)404錯誤,
那么就需要和后端人配合讓他配置一下nginx的url重定向须妻,重定向到你的首頁路由上
16.assets和static的區(qū)別
static 是第三方資源的(如JQ仔蝌,swiper)
assets 是放自己寫的樣式,js
相同點:
assets和static兩個都是存放靜態(tài)資源文件璧南。
不同點:
assets中存放的靜態(tài)資源文件在項目打包時靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務(wù)器掌逛。
static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程,而是直接進入打包好的目錄司倚,直接上傳至服務(wù)器豆混。
17.簡述Ajax
原理
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個中間層(Ajax引擎)篓像,
當(dāng)客戶端發(fā)送請求時,會由Ajax代替客戶端向服務(wù)器發(fā)送請求皿伺, 服務(wù)器返回數(shù)據(jù)到Ajax上员辩,Ajax再把數(shù)據(jù)渲染到頁面上
使用:創(chuàng)建XMLHTTpRequest對象 建立連接 發(fā)送請求 判斷狀態(tài)碼 獲取數(shù)據(jù)
18.Ajax和Axios的區(qū)別
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,本質(zhì)上也是對原生XHR的封裝鸵鸥,只不過它是Promise的實現(xiàn)版本奠滑,符合最新的ES規(guī)范。
特征:
1.從瀏覽器中創(chuàng)建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些并發(fā)請求的接口(重要妒穴,方便了很多的操作)
5.從 node.js 創(chuàng)建 http 請求
6.攔截請求和響應(yīng)
7.轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
8.取消請求
9.自動轉(zhuǎn)換JSON數(shù)據(jù)
19.Vue.js 混入(mixins)
created:mixins混入先執(zhí)行宋税,vue實例后執(zhí)行
methods: 有相同的函數(shù)名,則 Vue 實例會執(zhí)行讼油,mixins混入不會執(zhí)行