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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...