呼叫谷歌瀏覽器的列印所遇到的困難,回流重繪

2022-04-10 08:45:10 字數 1147 閱讀 1025

首先我要說一下列印的思路:(往往開發中列印介面和目標介面並不一樣,我們可以在列印的時候做一些操作)

1.將頁面dom儲存起來存在文件碎片裡面

let fragment = this.nodetofragment(document.body)

2.將生成的放在body裡面(我在開發的過程中遇到了,呼叫列印方法的時候發現不能將背景色進行列印,當然這需要在列印裡面去設定 更多設定裡面勾選列印背景色)   

document.body.style.background = 'rgba(0, 0, 0, 0.5)'document.body.innerhtml = ``window.print()

document.body.style.background = ''document.body.innerhtml = null

目的:為了避免重繪回流,造成重複的渲染,這裡完善一下nodetofragment方法

function

nodetofragment(node)

return

fragment

}let frag = nodetofragment(document.body)

回流就是渲染節點的大小,邊距發生改變而重新構建的過程

重繪就是元素只改變了一些顏色外觀(背景色,邊框顏色,文子顏色)而重新繪製的過程

哪些屬性會造成回流?

offset client scroll width height getcomputedstyle getboundingclientrect

頁面初始化,刪除節點,修改邊距,resize,文字的大小

怎樣避免減少回流?

dom:1.建立文件碎片,改完之後替換2.display:none,修改完在還原3.複製原來的dom,改完之後,替換

多次讀取width height

避免使用table布局

文字的大小

將複雜的介面脫離文件流,單獨成層,讓gpu參與進來沒有了回流重繪的過程

獨立生成層:

根元素,position,transform,半透明,css濾鏡,canvas,video,overflow

gpu會參與進來的:

css3d,video,webgl,transform,css濾鏡,will-change

Android Studio呼叫谷歌瀏覽器開啟網頁

uri uri uri.parse trycatch exception e 因為要使用指定瀏覽器開啟網頁,需要知道包名和類名,還需要我們手機上有這個瀏覽器是吧,如果都不對肯定會報錯的呀,說一下我是怎麼獲取谷歌瀏覽器的包名和類名的。首先usb手機和電腦連線開啟除錯模式,然後手機下個谷歌瀏覽器,然後開...

谷歌推出自己的瀏覽器谷歌瀏覽器chrome

chrom 化學名詞 鉻 個人覺得其有使用性的特點如下 1.一框多用,位址列可以當作搜尋欄,和其業務緊密結合。2.隱身模式,關掉隱身模式的頁面後,個人資訊會全面刪除,你的密碼,cookies等在關閉這個頁面後,就全部被瀏覽器刪除。不影響其他頁面 3.乙個瀏覽視窗崩潰,不會影響其他頁面。ie這點最讓人...

谷歌瀏覽器的坑

問題 更改的css樣式在其他瀏覽器正常,但是谷歌顯示不正常 原因 谷歌瀏覽器會快取css樣式 問題 google瀏覽器出現status invalid image hash,並且所有頁面崩潰 原因 google在79版本 2019年12月20號左右 的更新中又重新啟用了renderer code i...