載入,渲染,繪製

2021-07-11 06:49:14 字數 1231 閱讀 9515

瀏覽器載入過程

(9)、獲取到img後,重新渲染

dns: (1)客戶機向本地網域名稱伺服器dns.company.com發出解析網域名稱www.linejet.com的請求報文。 (2)本地網域名稱伺服器查詢本地快取, 假設沒有該紀錄, 則向根網域名稱伺服器ns.inter.net發出請求。  (3)根網域名稱伺服器查詢本地記錄得到如下結果:linejet.com ns dns.linejet.com (表示linejet.com域中的網域名稱伺服器為dns.linejet.com)

渲染1、html**轉化成dom

2、css**轉化成cssom(css object model)

3、cascade級聯dom和cssom,生成一棵渲染樹(包含每個節點的視覺資訊)

4、生成布局(layout),即將所有渲染樹的所有節點進行平面合成

5、將布局繪製(paint)在螢幕上

頁面發生變化時,要重新渲染reflow(重新生成布局並繪製)。有元素位置發生變化或滾動時,需要重排並重繪。元素位置都沒發生變化時,只需重繪repain。

瀏覽器會將幾個連續的改變累積起來,再一次重新渲染,以減少重新渲染的次數。

指令碼讀取位置,尺寸等資訊時,瀏覽器不得不把之前累積的變化,重新渲染一次,再返回最新的位置和尺寸。

優化    

1、讀取位置和尺寸的指令碼最好放在一起,不要與改變頁面的指令碼穿插

2、快取位置和尺寸資訊, 不要重複讀取        

3、對離線dom 操作完後,再加入dom樹。不用加入後再操作。

4、對dom的複雜改變,可以先隱藏,再操作,再顯示

5、position屬性為absolute或fixed的元素重排開銷較小,動畫最好設定在它們身上       

6、window.requestanimationframe(function()) ,把這次寫操作放到下一次渲染     

7、盡量避免寫在html標籤中寫style屬性,會阻塞渲染

載入完成

當 html 文件解析繪製完成就會觸發 domcontentloaded,而所有資源(和非阻塞指令碼)載入完成之後,load 事件才會被觸發。

另外需要提一下的是,我們在 jquery 中經常使用的 $(document).ready(function() ); 其實監聽的就是 domcontentloaded 事件,而 $(document).load(function() ); 監聽的是 load 事件。

在chrome network 左下方能看到,開啟overview能看到兩條對應的線

基於PCL繪製模型並渲染

部落格 自 拋開演算法層面不談,要利用pcl庫中pclvisualizer視覺化類,顯示出不同模型並對模型做出不同渲染,製作出豐富的視覺化效果以增強自己應用的功能。下面將對如何新增立方體模型和圓球模型到視窗並渲染進行乙個大概描述。立方體模型 向視窗新增乙個立方體模型並渲染,只顯示線框。若不要顯示線框...

vue layui 資料載入 渲染問題

vue layui 修改 獲取到值載入不出來 渲染問題 當vue與layui繫結傳值的時候就會出現這個問題 尤其是通過ajax非同步動態獲取值 原因 vue的載入資料與layui不同步 當ajax資料量大的時候layui會提前渲染完畢 解決方案 等待最後的資料載入完畢後再進行渲染 原理 統計全域性的...

Qt QImage載入記憶體資料後繪製

如果我在記憶體中生成了乙個包含rgba各分量的顏色二維陣列colorarray,要怎樣通過qimage把這些資料顯示出來呢?qimage需要載入這些資料 1 通過qimage的建構函式 qimage const uchar data,int width,int height,format forma...