javascript 運行機制 事件迴圈 瀏覽器緩存 (慕課網 前段跳槽面試必備 4-1,4-2,4-3)

来源:https://www.cnblogs.com/Adobe_fans/archive/2018/08/16/9489615.html
-Advertisement-
Play Games

4-1 渲染機制:-1-,什麼是DOCTYPE及其作用?DTD(document type definition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML的文件類型,瀏覽器會使用DTD來判斷文檔類型,決定使用何種協議來解析,以及切換瀏覽器模式。DOCTYPE就是用來聲明文檔類 ...


4-1 渲染機制:
-1-,什麼是DOCTYPE及其作用?
DTD(document type definition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML的文件類型,瀏覽器會使用DTD來判斷文檔類型,決定使用何種協議來解析,以及切換瀏覽器模式。
DOCTYPE就是用來聲明文檔類型和DTD規範的,一個主要的用途是文件的合法性驗證。如果文件代碼不合法,那麼瀏覽器解析時便會出一些差錯。html5的DOCTYPE:<!DOCTYPE html>。HTML 4.01 Strict:該DTD包含所有HTML元素和屬性,但不包含展示性的和棄用的元素,HTML 4.01 Transitional:該DTD包含所有HTML元素和屬性,包括展示性的和棄用的元素。

-2-,瀏覽器的渲染過程?

-3-,什麼是瀏覽器的重拍Reflow?
重拍Reflow的定義:DOM結構中的各個元素都有自己的盒子(模型),這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置,這個過程稱之為Reflow;每個dom節點並不是固定的,當瀏覽器拿到dom時,比如:一個有內容的div,CSS是可以修改dom的,那重新修改後,瀏覽器應該怎麼做呢?這是就需要重拍Reflow,那麼什麼時候會觸發Reflow呢?每個dom都有Reflow方法,什麼情況下回觸發呢:1,當你增加,刪除,修改dom結點時,會導致Reflow或Repaint,比如給一個div增加了一個子元素,這個子元素要顯示在屏幕上,就要改變原來的dom tree和rule tree,那就需要Reflow和Repaint;2,當你移動dom的位置,或是做個動畫的時候;3,當你修改CSS樣式的時候;4,當你Resize視窗的時候(移動端沒有這個問題),或是滾動的時候;5,當你修改網頁的預設字體時。

-4-,什麼是瀏覽器重繪Repaint?
重繪Repaint的定義:當各種盒子的位置,大小以及其他屬性,例如顏色,字體大小等都確定下來後,瀏覽器於是便把這些元素都按照各自的特性繪製了一遍,於是頁面的內容出現了,這個過程稱之為Repaint重繪。對dom的改動和對css的改動都將觸發Repaint重繪,只要頁面上的顯示發生了改變都將重繪。

-5-,什麼是瀏覽器的佈局Layout?

4-2 JS的運行機制
javascript是單線程的,即javascript在同一時間只能做一件事。任務隊列:我們大家都知道有事件,有非同步編程的概念,既然是單線程,也就是同步的,為什麼還會有非同步呢?比如說事件,我點擊一個東西,然後就能通過回調函數,也可以調事件響應,去拿這個東西。這就是一個非同步的過程。ajax通信也就是用事件綁定,我把它扔出去,我就不用管了,我可以去乾別的了,當服務端響應以後,瀏覽器會自動調取我們最後綁定的那個事件(處理函數),這看上去和單線程本身是衝突的,那它是怎麼做的的呢?就是通過任務隊列做到的。在任務隊列中,還有個概念叫同步任務和非同步任務,setTimeout函數就是一個非同步任務,在javascript同步運行過程中的語句,叫同步任務,遇到setTimeout,setInterval叫非同步任務。javascript是從上到下執行的,先執行第一句:Console.log(1);第二句:setTimeout(function(){console.log(2);}, 0);這是一個非同步任務,非同步任務要掛起,setTimeout不先執行;javascript往後繼續執行,第三句:Console.log(3);執行同步任務第三句;第三句執行完後,同步任務執行完畢,這時才會去處理非同步任務。單線程和任務隊列是有順序的,在任務里會有同步任務和非同步任務,在javascript運行機制的執行過程中,是優先於同步任務,同步任務處理完之後,才會去響應非同步任務,即使setTimeout設置了0延遲。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、我們要明白當js操作dom時發生了什麼? 每次對dom的操作都會觸發"重排"(重新渲染界面,發生重繪或迴流),這嚴重影響到能耗,一般通常採取的做法是儘可能的減少 dom操作來減少"重排" 2、什麼是文檔碎片? document.createDocumentFragment() 一個容器,用於暫時 ...
  • 前言 在前後端分離的開發中,通過 Restful API 進行數據交互時,如果沒有對 API 進行保護,那麼別人就可以很容易地獲取並調用這些 API 進行操作。那麼伺服器端要如何進行鑒權呢? Json Web Token 簡稱為 JWT,它定義了一種用於簡潔、自包含的用於通信雙方之間以 JSON 對 ...
  • JavaScript 中常見設計模式 單例模式 策略模式 代理模式 迭代器模式 發佈訂閱模式 命令模式 組合模式 模板方法模式 享元模式 職責鏈模式 中介者模式 裝飾者模式 狀態模式 適配器模式 各設計模式關鍵詞 看完了上述設計模式後,把它們的關鍵詞特點羅列出來,以後提到某種設計模式,進而聯想相應的 ...
  • 什麼是狀態模式? 定義:將事物內部的每個狀態分別封裝成類,內部狀態改變會產生不同行為。 主要解決:對象的行為依賴於它的狀態(屬性),並且可以根據它的狀態改變而改變它的相關行為。 何時使用:代碼中包含大量與對象狀態有關的條件語句。 如何解決:將各種具體的狀態類抽象出來。 應用實例: 1、打籃球的時候運 ...
  • 一.數組的定義(來源於Array.prototype) 1.構造函數方法: (1)var arr = new Array();//沒有參數等價於 var arr = []; (2)var arr = new Array(length);//創建指定長度的數組;預分配一個數組空間;但數組中沒有存儲值, ...
  • jQuery的優勢: 使用jQuery: jQuery對象和DOM對象的區別 一://取得jsDOM對象: 二://獲得jquery對象 三:DOM對象與jQuery對象互相轉換 可以把jQuery對象看做DOM對象的數組,因此 可以通過索引下標在jQuery中獲取DOM對象 方法一:jquery對 ...
  • MDN定義:位運算符將它的操作數視為32位元的二進位串(0和1組成)而非十進位八進位或十六進位數。 例如:十進位數字9用二進位表示為1001,位運算符就是在這個二進位表示上執行運算,但是返回結果是標準的JavaScript數值。 位運算符有7個,這裡只講一個:按位異或^ 用法: a^b, 運算規則: ...
  • 11、強制轉換 強制轉換主要指使用Number、String和Boolean三個構造函數,手動將各種類型的值,轉換成數字、字元串或者布爾值。 1>Number強制轉換 參數為原始類型值的轉換規則: 原始類型的值主要是字元串、布爾值、undefined和null,它們都能被Number轉成數值或NaN ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...