概念

事件委托,事件代理

事件代理又稱之為事件委托。是JavaScript中常用綁定事件的常用技巧。顧名思義,“事件代理”即是把原本需要綁定在子元素的響應事件(click、keydown......)委托給父元素,讓父元素擔當事件監(jiān)聽的職務。事件代理的原理是DOM元素的事件冒泡。
事件傳播分為三個階段:
捕獲階段:從window對象傳導到目標節(jié)點(上層傳到底層)稱為“捕獲階段”(capture phase),捕獲階段不會響應任何事件;
目標階段:在目標節(jié)點上觸發(fā),稱為“目標階段”
冒泡階段:從目標節(jié)點傳導回window對象(從底層傳回上層),稱為“冒泡階段”(bubbling phase)。事件代理即是利用事件冒泡的機制把里層所需要響應的事件綁定到外層;
可以大大優(yōu)化內存占用,不用給每個子元素都添加事件。

回流和重繪

頁面渲染時,先生成dom樹,再結合css生成rander樹
回流的成本更大
重繪不一定引起回流,但回流一定會引起重繪
盡量減少對dom的直接操作,減少回流的次數(shù),可以大大提高性能

說說TCP傳輸?shù)娜挝帐郑拇螕]手策略

為了準確無誤地把數(shù)據(jù)送達目標處,TCP協(xié)議采用了三次握手策略。

用TCP協(xié)議把數(shù)據(jù)包送出去后,TCP不會對傳送后的情況置之不理,它一定會向對方確認是否成功送達。
發(fā)送端首先發(fā)送一個帶SYN標志的數(shù)據(jù)包給對方。接收端收到后,回傳一個帶有SYN/ACK標志的數(shù)據(jù)包以示傳達確認信息。
最后,發(fā)送端再回傳一個帶ACK標志的數(shù)據(jù)包,代表“握手”結束。
若在握手過程中某個階段莫名中斷,TCP協(xié)議會再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

斷開一個TCP連接則需要“四次揮手”:

  • 第一次揮手:主動關閉方發(fā)送一個FIN,用來關閉主動方到被動關閉方的數(shù)據(jù)傳送,也就是主動關閉方告訴被動關閉方:我已經不 會再給你發(fā)數(shù)據(jù)了(當然,在fin包之前發(fā)送出去的數(shù)據(jù),如果沒有收到對應的ack確認報文,主動關閉方依然會重發(fā)這些數(shù)據(jù)),但是,此時主動關閉方還可 以接受數(shù)據(jù)。
  • 第二次揮手:被動關閉方收到FIN包后,發(fā)送一個ACK給對方,確認序號為收到序號+1(與SYN相同,一個FIN占用一個序號)。
  • 第三次揮手:被動關閉方發(fā)送一個FIN,用來關閉被動關閉方到主動關閉方的數(shù)據(jù)傳送,也就是告訴主動關閉方,我的數(shù)據(jù)也發(fā)送完了,不會再給你發(fā)數(shù)據(jù)了。
  • 第四次揮手:主動關閉方收到FIN后,發(fā)送一個ACK給被動關閉方,確認序號為收到序號+1,至此,完成四次揮手。

TCP和UDP的區(qū)別

TCP(Transmission Control Protocol,傳輸控制協(xié)議)是基于連接的協(xié)議,也就是說,在正式收發(fā)數(shù)據(jù)前,必須和對方建立可靠的連接。一個TCP連接必須要經過三次“對話”才能建立起來
UDP(User Data Protocol,用戶數(shù)據(jù)報協(xié)議)是與TCP相對應的協(xié)議。它是面向非連接的協(xié)議,它不與對方建立連接,而是直接就把數(shù)據(jù)包發(fā)送過去!
UDP適用于一次只傳送少量數(shù)據(jù)、對可靠性要求不高的應用環(huán)境。

說說你對作用域鏈的理解

我們可以把作用域鏈比喻成一個內外多層城堡,建筑的最外層代表全局作用域。
查找變量首先都會在當前層進行查找,如果沒有找到,就會前往外層查找,直到抵達最外層(全局作用域),不管找到沒找到查找過程都將停止。
作用域鏈的作用是保證執(zhí)行環(huán)境里有權訪問的變量和函數(shù)是有序的,作用域鏈的變量只能向上訪問,直到window對象即被終止,作用域鏈向下訪問變量是不被允許的。
內層可以看外層,外層不能看內層。

說說HTTP和HTTPS和區(qū)別

HTTP協(xié)議是基于TCP協(xié)議的,HTTPS在HTTP和TCP之間添加一個安全協(xié)議層(SSLTSL)。
HTTP默認的端口號為80,HTTPS默認的端口號為443
HTTPS安全,是因為網絡請求中間有多個路由交換器設備的轉發(fā),中間的節(jié)點都可能篡改信息。HTTPS利用ssl/tls協(xié)議傳輸,它包含證書,密鑰在你和終點站才有,保障了傳輸過程的安全。

Javascript垃圾回收方法

標記清除(mark and sweep)
這是JavaScript最常見的垃圾回收方式,當變量進入執(zhí)行環(huán)境的時候,比如函數(shù)中聲明一個變量,垃圾回收器將其標記為“進入環(huán)境”,當變量離開環(huán)境的時候(函數(shù)執(zhí)行結束)將其標記為“離開環(huán)境”。

引用計數(shù)(reference counting)
引用計數(shù)的策略是跟蹤記錄每個值被使用的次數(shù),當聲明了一個變量并將一個引用類型賦值給該變量的時候這個值的引用次數(shù)就加1,如果該變量的值變成了另外一個,則這個值得引用次數(shù)減1,當這個值的引用次數(shù)變?yōu)?的時候,說明沒有變量在使用,這個值沒法被訪問了,因此可以將其占用的空間回收,這樣垃圾回收器會在運行的時候清理掉引用次數(shù)為0的值占用的空間。

談談性能優(yōu)化問題

代碼層面:避免使用css通配選擇器。
緩存利用:緩存Ajax,使用CDN,使用外部js和css文件以便緩存
請求數(shù)量:使用字體圖標,避免頻繁使用圖片。
請求帶寬:壓縮文件,開啟GZIP,
少用全局變量
減少DOM操作次數(shù),優(yōu)化javascript性能
多個變量聲明合并
適當使用touch事件代替click事件
避免使用css3漸變陰影效果
Float在渲染時計算量比較大,盡量減少使用
Web字體需要下載,解析,重繪當前頁面,盡量減少使用。
可以用transform: translateZ(0)來開啟硬件加速
CSS中的屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)會觸發(fā)GPU渲染,請合理使用,過渡使用會引發(fā)手機過耗電增加

盒模型寬度計算方式

box-sizing盒模型默認的值是content-box, 新增border-box怪異盒模型
content-box布局所占寬度Width
= width + padding-left + padding-right + border-left + border-right
border-box局所占寬度Width
= width(包含padding-left + padding-right + border-left + border-right)

解釋下浮動和它的工作原理

浮動元素脫離文檔流,不占據(jù)空間。
清除浮動的方法:

1.使用空標簽清除浮動。
<div style="clear:both;"></div>
弊端就是增加了無意義標簽
2.使用overflow。
給包含浮動元素的父標簽添加css屬性overflow:auto; 
3.使用after偽類清除浮動。
  #parent:after{
        content:".";
        height:0;
        visibility:hidden;
        display:block;
        clear:both;
        }

為何在VUE項目中data需要使用return返回數(shù)據(jù)呢

答:不使用return包裹的數(shù)據(jù)會在項目的全局可見,會造成變量污染。使用return包裹后數(shù)據(jù)中變量只在當前組件中生效,不會影響其他組件

談談Vue/React中的虛擬DOM

虛擬DOM的本質是一個和真實DOM結構類似的JS對象。
操作JS對象,操作真實的DOM消耗的性能較多,操作虛擬DOM可以大大提高瀏覽器的渲染速度。
虛擬DOM的實現(xiàn)步驟?
1、在頁面首次渲染時,將要渲染的數(shù)據(jù)全部加載到虛擬DOM中,而后在一次性渲染到真實DOM上
2、在數(shù)據(jù)變化時,額外的生成一顆虛擬DOM樹
3、通過Diff算法對比修改的部分,而后將修改部分渲染到真實的DOM中
4、釋放內存
Key值的用處,虛擬DOM在使用Diff算法進行對比時,可以更高效。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 面向對象的三大特征,并作簡單的介紹。 面向對象的三個基本特征是:封裝、繼承、多態(tài)。 1.封裝是面向對象的特征之一,...
    xiny123閱讀 1,651評論 0 6
  • HTTP的整體概念 1.1整體概念介紹 HTTP是Hyper Text Transfer Protocol(超文本...
    帝王鯊kingcp閱讀 809評論 0 1
  • 計算機網絡 基礎概念 實現(xiàn)多個計算機系統(tǒng)的資源共享和信息傳遞 通信子網:介質,設備,協(xié)議,對應物理層,數(shù)據(jù)鏈路層,...
    Haozhong閱讀 800評論 0 4
  • 1、TCP狀態(tài)linux查看tcp的狀態(tài)命令:1)、netstat -nat 查看TCP各個狀態(tài)的數(shù)量2)、lso...
    北辰青閱讀 9,739評論 0 11
  • 一直用Http用多了 復習一下基礎Unity通訊一般分為2類Http : 應用層 Unity內置的UnityWeb...
    羅卡恩閱讀 2,530評論 0 4

友情鏈接更多精彩內容