《電子技術應用》
您所在的位置:首頁 > 通信與網絡 > 業界動態 > Canvas渲染會取代DOM嗎?

Canvas渲染會取代DOM嗎?

2021-07-25
來源:CSDN
關鍵詞: Canvas DOM

  Google最近決定使用HTML的<canvas>來渲染Google Docs中的一切,引起了軒然大波。人們的擔憂不無道理。曾幾何時,Web的目標是分享架構化信息,包含合理的元數據,而且易于開展合作。然而,現在卻成了在瀏覽器的沙盒中運行的半透明模型。

  從HTML元素切換到Canvas上的像素渲染,Google的這個決定并非史無前例。很多先進的Web早就突破了傳統Web元素的束縛。Google地圖多年前就開始使用Canvas渲染了。VS Code使用canvas來繪制像素級的終端界面。Google新興的跨平臺UI框架Flutter在瀏覽器中也會默認使用Canvas。

  但這次感覺不一樣。canvas渲染加上WebAssembly等其他技術,點燃了導火索。似乎我們熟悉的那種模式(下載JavaScript代碼并在HTML文檔中執行)只不過是Web開發進化之路上的一個過客而已。

  換一種說法,我們曾理所當然地認為,我們可以看到運行中的代碼,檢查標簽,還可以查看CSS。但是,也許這一切只不過是軟件設計長河中的一段小插曲。

  那么接下來會發生什么?

  Canvas渲染方式越來越流行

  人們總是對Google亦步亦趨。

  大約15年前,Google是異步JavaScript調用(后來稱作Ajax)的先驅。他們主導的這種技術被用到了Gmail和Google地圖中,后來成了Web開發的基礎。現在,Google開始在canvas上畫UI,等于向新一代的Web開發者宣告了這種做法的合理性。

  目前,使用canvas渲染還有著不低的門檻。在Google Docs的構建過程中,Google重新發明了許多人們習以為常的東西,例如精確定位、文本選擇、拼寫檢查、重畫調優等。今天,只有少數幾家公司才會考慮采用canvas渲染來獲得可能的性能提升。

  最大的問題是可訪問性。為了遵守可訪問性的法規(作為像Google這樣的政府供應商來說,合規是必須的,對于希望盡社會責任的企業來說,可訪問性也非常重要),應用程序必須滿足特定的要求。基于canvas的Google Docs依然需要為屏幕閱讀器、屏幕放大鏡、高對比度設置、低敏捷度特性等提供支持。他們的做法之一就是在真正的canvas渲染的內容之外,再專門為輔助工具實現一個不可見的DOM。當然,這兩個模型之間要保持完美的同步。

  目前還沒有現成的標準供開發者在使用了canvas渲染的應用程序中添加可訪問性支持。但是隨著canvas渲染技術的流行,這種情況也會改變,而且很難說會以多快的速度改變。Google越來越多地采用該技術,會給該領域帶來大量的關注、發展和進步。很快就會出現許多庫,然后就會出現標準和API。我們可以給阿特伍德定律加一條:

  “所有能用JavaScript實現的最終都會用JavaScript實現,哪怕需要改進JavaScript?!?/p>

  語義Web已死

  從整體來看,Google的行動只不過是漫長旅途中的一小步而已。從Web誕生那一天開始,野心勃勃的開發者們就在想盡一切辦法沖破頁面模型和HTML抽象的束縛。當年有Flash之類的插件。從那時起,對于Web的兩種不同觀點就開始了明爭暗斗:Web究竟是結構化文檔容器,還是應用程序容器?

  這場沖突最激烈的部分莫過于XHTML的死亡。XHTML是一個異常嚴格的Web標準,旨在實施純粹的語義化,而這個目標Web從未實現。XHTML曾被譽為“Web的未來”,但突然就被HTML5打敗了。

  而HTML5對于Web的定義是“瀏覽器制造商們一致同意的任何標準”。它包含了一組實際的JavaScript API集合(地理位置、本地存儲、Web套接字、后臺worker等),這些API可以像搭積木一樣嵌入到頁面中。當然,它也包含幾個新的語義描述元素,但在嵌入信息方面,唯一的激進功能就是microdata,然而這個功能不久后就被除名了(很大程度上因為Google和蘋果沒興趣實現該功能)。

微信圖片_20210725160215.jpg

  Canvas渲染顯然站在富語義頁面的對立面。它是一個黑盒子,其內部的情況瀏覽器無從知曉。

  Canvas渲染將一切權力都交給了應用程序。通過控制像素秒回,你可以實現任何事情:可以阻止自動化工具,繞過廣告攔截器,限制瀏覽器功能(如搜索、文本復制等)。它只不過是用JavaScript實現的Flash或Silverlight,不需要安裝,也沒有兼容性問題而已。

  未來屬于WebAssembly和二進制塊

  可能你認為Canvas渲染很重要,但從Web開發的全局來看,它只不過是小巫見大巫。真正的巨獸毫無疑問是WebAssembly,這是一個所有現代瀏覽器都能理解的底層二進制指令格式。

  如今,當你訪問一個由WebAssembly制作的網頁時,你運行的實際上是預先編譯好的代碼,這些代碼只不過比匯編語言高級了一點點,比那些極限壓縮并混淆過的JavaScript還要難懂。WebAssembly被用來運行游戲、解碼基因序列,或者用來運行更高層的框架,如。NET的Blazor環境。WebAssembly能夠在不離開瀏覽器沙盒的前提下提供近乎原生應用的性能,與之相比,對于不透明Web應用程序的擔憂是那么蒼白無力。

  目前,WebAssembly需要一層復雜的JavaScript互操作層才能訪問DOM。但下一個階段是WebGPU,這是已遭廢棄的WebGL項目的繼任者。WebGPU和WebGL都采用了同樣的方法,即為canvas渲染的表面提供優化后的訪問。與瀏覽器實現的硬件加速結合起來,就可提供一個底層的繪圖表面,供開發者構建下一代Web應用程序,或者構建下一代庫和框架,為下一代Web應用程序提供動力。依照WebAssembly的炒作力度,很難想象未來的Web開發不會使用WebAssembly和WebGPU。

  為什么不呢?畢竟,如果開發者要從頭開始開發Google Docs,他們絕不會選擇Google Docs一直沿用至今的模型(構建在HTML布局引擎上的文檔布局引擎,與一個JavaScript抽象緊密耦合)。這個模型之所以存在,只不過是因為它能用而已。從設計的角度來看,它是一個扭曲的奇跡,而不是優美的軟件。

  即使是未來的Web應用程序,傳統Web的觀點也依然會存在于適合的地方,比如那些以內容為主的網站(科技文章網站、亞馬遜產品目錄等)。這些網站沒有理由重新發明輪子、自定義渲染過程,并重新解決可用性的難題。但在未來,這些網站的行為不再是Web內容的標準。

  相反,應用程序模型會完全打破今天的HTML/CSS抽象的桎梏。這種變化會讓開發者回到一個完全自由但支離破碎的世界,他們需要從大量的語言和UI模型中做出選擇。如果說過去的歷史有何意義,那就是世界比我們想象得更近。




電子技術圖片.png

本站內容除特別聲明的原創文章之外,轉載內容只為傳遞更多信息,并不代表本網站贊同其觀點。轉載的所有的文章、圖片、音/視頻文件等資料的版權歸版權所有權人所有。本站采用的非本站原創文章及圖片等內容無法一一聯系確認版權者。如涉及作品內容、版權和其它問題,請及時通過電子郵件或電話通知我們,以便迅速采取適當措施,避免給雙方造成不必要的經濟損失。聯系電話:010-82306118;郵箱:aet@chinaaet.com。
亚洲一区二区欧美_亚洲丝袜一区_99re亚洲国产精品_日韩亚洲一区二区
一区二区福利| 免费亚洲视频| 亚洲精品在线免费| 亚洲电影免费观看高清完整版在线 | 最新国产成人av网站网址麻豆| 国色天香一区二区| 韩国精品主播一区二区在线观看| 国产欧美日韩高清| 国产色产综合色产在线视频| 国产精品人成在线观看免费 | 亚洲在线一区| 亚洲欧美电影在线观看| 亚洲影视九九影院在线观看| 亚洲视频成人| 亚洲一区日韩| 欧美一区二区三区的| 久久国产欧美| 久久久久久久久综合| 久久字幕精品一区| 免费在线看成人av| 欧美激情一区二区三区全黄| 欧美另类综合| 国产精品videossex久久发布| 国产精品久久久爽爽爽麻豆色哟哟 | 精品av久久久久电影| 亚洲电影免费观看高清完整版在线| 亚洲国产成人av在线| 亚洲日本中文字幕区| aa日韩免费精品视频一| 亚洲欧美日韩成人高清在线一区| 欧美一区二区三区精品| 亚洲国产成人在线| 亚洲每日更新| 亚洲免费一区二区| 久久久久久噜噜噜久久久精品| 蜜臀a∨国产成人精品| 欧美精品久久99久久在免费线| 欧美午夜精品久久久久久孕妇 | 国产欧美综合一区二区三区| 国际精品欧美精品| 91久久国产综合久久| 一区二区三区黄色| 欧美亚洲免费在线| 亚洲精品少妇30p| 亚洲欧美日韩精品久久奇米色影视 | 国产精品毛片a∨一区二区三区| 国产精品最新自拍| 又紧又大又爽精品一区二区| 亚洲伦理一区| 羞羞色国产精品| 日韩亚洲欧美在线观看| 欧美一级久久久| 欧美国内亚洲| 国产农村妇女精品| 亚洲欧洲一区二区在线观看| 亚洲免费视频在线观看| 亚洲人体大胆视频| 亚洲欧美日韩天堂| 欧美a一区二区| 国产精品视频导航| 亚洲国产小视频| 午夜精品久久久久| 99精品免费| 久久亚洲精品一区二区| 国产精品久久久久久妇女6080| 激情亚洲网站| 亚洲色诱最新| 亚洲精品中文字| 久久国产日韩欧美| 欧美三级黄美女| 激情久久五月天| 亚洲一区二区毛片| 亚洲免费久久| 久久婷婷激情| 国产精品一级在线| 亚洲精品久久久久久久久久久| 校园春色国产精品| 亚洲一区欧美一区| 欧美精品久久一区| 韩国在线一区| 亚洲综合色自拍一区| 99视频一区二区| 美女主播视频一区| 国产一区二区三区四区老人| 亚洲午夜国产成人av电影男同| 亚洲精品精选| 玖玖国产精品视频| 国产小视频国产精品| 亚洲网在线观看| 一区二区激情小说| 蘑菇福利视频一区播放| 国产一区二区三区在线观看精品| 在线一区视频| 中国成人亚色综合网站| 欧美风情在线| 亚洲国产岛国毛片在线| 久久精品国产欧美亚洲人人爽| 欧美一级夜夜爽| 国产精品乱码久久久久久| 亚洲人成人77777线观看| 亚洲福利视频网| 久久久精品国产一区二区三区| 国产精品久久久久久模特| 日韩一级免费| 亚洲深夜福利| 欧美日韩免费观看一区三区| 亚洲国产精品一区在线观看不卡 | 亚洲女女女同性video| 欧美精品亚洲精品| 亚洲国产高清高潮精品美女| 亚洲国产精品t66y| 久久久亚洲综合| 国产一区二区电影在线观看| 午夜视频久久久久久| 午夜精品久久久| 国产精品视频导航| 午夜一区二区三区不卡视频| 午夜精彩国产免费不卡不顿大片| 欧美午夜剧场| 一区二区日韩免费看| 亚洲一区中文字幕在线观看| 欧美视频在线观看免费网址| 一区二区三区久久久| 亚洲自拍偷拍视频| 国产精品伦理| 午夜在线精品| 久久人人爽人人爽| 在线看欧美视频| 亚洲精品乱码久久久久久日本蜜臀 | 久久狠狠亚洲综合| 国产精品免费区二区三区观看| 免费中文字幕日韩欧美| 在线看国产一区| 亚洲乱码精品一二三四区日韩在线| 欧美激情成人在线| 亚洲美女视频在线观看| 亚洲一区不卡| 国产精品有限公司| 欧美专区日韩视频| 欧美高清hd18日本| 一区二区三区精品国产| 欧美在线视频播放| 在线成人小视频| 一区二区三区国产在线| 国产精品欧美日韩一区二区| 欧美一区二区三区男人的天堂 | 红杏aⅴ成人免费视频| 亚洲国产三级网| 欧美精品 国产精品| 一区二区欧美视频| 欧美综合国产| 亚洲国产精品电影在线观看| 亚洲婷婷国产精品电影人久久| 国产精品天天看| 亚洲成人自拍视频| 欧美日韩国产小视频在线观看| 一区二区欧美激情| 久久久久久网| 亚洲精品中文在线| 久久高清国产| 亚洲国产裸拍裸体视频在线观看乱了中文 | 亚洲精品麻豆| 欧美一区二区三区的| 亚洲大片一区二区三区| 亚洲愉拍自拍另类高清精品| 狠狠色狠狠色综合日日五| 99精品久久久| 国产欧美一区二区三区在线老狼| 亚洲日韩欧美一区二区在线| 国产精品久久久久一区二区三区| 亚洲电影免费在线| 欧美网站在线| 亚洲激情婷婷| 国产精品爽黄69| 亚洲欧洲精品一区二区三区波多野1战4 | 国产三级精品在线不卡| 亚洲精品免费网站| 国产伦精品一区| 99re热这里只有精品免费视频| 国产精品美女主播| 亚洲乱码久久| 国产自产在线视频一区| 亚洲一区二区三区四区五区午夜 | 亚洲天堂成人在线视频| 榴莲视频成人在线观看| 亚洲一级在线观看| 欧美精品www| 久久精品国语| 国产精品伦一区| 99精品国产一区二区青青牛奶| 国产一区二区久久| 亚洲一区二区三区精品在线| 伊人春色精品| 久久国产一区| 99在线精品观看| 嫩草国产精品入口| 午夜在线电影亚洲一区| 欧美午夜a级限制福利片| 亚洲精品偷拍| 伊伊综合在线|