《電子技術應用》
您所在的位置:首頁 > 通信與網絡 > 業界動態 > 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。”

  語義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亚洲国产精品_日韩亚洲一区二区
欧美在线观看视频一区二区三区| 久久国产精品第一页| 9色国产精品| 亚洲国产精品一区二区第一页| 国产一区二区福利| 国产老肥熟一区二区三区| 欧美视频亚洲视频| 欧美日韩在线观看一区二区三区 | 一区二区亚洲| 国内精品视频在线观看| 国内精品久久久久久影视8| 国产在线成人| 国产一区日韩二区欧美三区| 国产日韩在线视频| 国模精品一区二区三区色天香| 国产日韩在线看片| 国产揄拍国内精品对白| 狠狠色狠色综合曰曰| 激情av一区| 在线成人欧美| 亚洲国产日韩一区| 日韩一区二区精品视频| 亚洲图片自拍偷拍| 亚洲欧美美女| 欧美一区二区三区精品 | 国产精品观看| 国产精品久久看| 国产精品美女主播| 国产日本欧洲亚洲| 狠狠爱成人网| 亚洲第一福利社区| 亚洲精选在线| 亚洲无限乱码一二三四麻| 一区二区三区日韩在线观看 | 亚洲先锋成人| 欧美一区二区三区四区视频| 久久精品久久99精品久久| 美国成人毛片| 欧美日韩精品一区二区| 国产精品久久波多野结衣| 国产精品自拍小视频| 国产一区二区三区观看| 亚洲国产精品嫩草影院| 一本一本a久久| 午夜精品区一区二区三| 亚洲国产一区二区三区a毛片| 日韩一级黄色片| 亚洲男女自偷自拍图片另类| 久久精品卡一| 欧美激情一区二区三区不卡| 国产精品国产自产拍高清av王其| 国产亚洲人成a一在线v站 | 亚洲人成久久| 亚洲一区二区在线免费观看| 久久精品亚洲一区二区| 欧美韩日一区二区| 国产精品国色综合久久| 狠狠操狠狠色综合网| av成人免费在线| 欧美中文字幕不卡| 艳妇臀荡乳欲伦亚洲一区| 欧美一区二区精品| 欧美二区视频| 国产女主播一区二区| 亚洲欧洲日产国产综合网| 亚洲欧美日韩综合aⅴ视频| 亚洲欧洲一区二区天堂久久 | 亚洲欧美日韩人成在线播放| 亚洲欧美日韩精品久久久| 亚洲风情亚aⅴ在线发布| 国产精品久久久久77777| 欧美日韩少妇| 国产一区二区三区在线观看精品 | 亚洲精品一二| 欧美一级片在线播放| 欧美国产视频在线| 国产日韩亚洲欧美精品| 日韩一级二级三级| 亚洲国产合集| 午夜精品久久久99热福利| 欧美高清视频一二三区| 国产一区99| 亚洲网友自拍| 亚洲最新视频在线播放| 久久久人成影片一区二区三区观看| 欧美日韩成人| 在线精品一区二区| 欧美亚洲综合网| 亚洲综合国产| 欧美伦理一区二区| 娇妻被交换粗又大又硬视频欧美| 亚洲视频精选在线| aⅴ色国产欧美| 欧美成年人视频网站欧美| 国产亚洲永久域名| 中文亚洲免费| 一区二区三区|亚洲午夜| 嫩模写真一区二区三区三州| 国产日韩精品在线| 亚洲一区二区视频在线| 一区二区三区回区在观看免费视频| 久久综合久久久| 国产午夜精品久久| 亚洲专区免费| 亚洲欧美日韩精品久久奇米色影视| 欧美欧美天天天天操| 亚洲第一福利社区| 亚洲国产欧美日韩另类综合| 久久精品视频在线| 国产精品一区二区三区久久| 亚洲深夜福利网站| 亚洲欧美国产77777| 欧美午夜精品久久久久久浪潮| 亚洲欧洲在线一区| 亚洲美女在线看| 欧美国产精品一区| 亚洲黄色av| 日韩一区二区免费高清| 欧美黄色aa电影| 亚洲激情在线激情| 日韩写真视频在线观看| 欧美激情第三页| 亚洲欧洲综合另类| 国产精品夜夜夜| 亚洲大胆人体视频| 亚洲国产精品视频一区| 久久久伊人欧美| 激情六月婷婷综合| 亚洲激情国产精品| 欧美精品免费在线观看| 亚洲精品国产精品国自产在线 | 亚洲国产精品久久人人爱蜜臀| 久久在线视频在线| 在线精品视频在线观看高清| 亚洲欧洲一区二区三区久久| 欧美黄色成人网| 日韩网站免费观看| 亚洲小视频在线观看| 欧美亚州一区二区三区| 亚洲一区二区欧美日韩| 欧美一区二区三区四区视频| 国产热re99久久6国产精品| 欧美一区1区三区3区公司| 久久久久在线观看| 亚洲大胆人体视频| 一区二区精品| 国产精品爽爽爽| 久久成人免费电影| 欧美精品少妇一区二区三区| 一区二区欧美日韩视频| 欧美一区二区三区精品电影| 狠狠干成人综合网| 日韩视频免费看| 国产精品国产三级国产aⅴ无密码| 亚洲欧美国产高清va在线播| 久久久久国色av免费看影院| 亚洲高清视频中文字幕| 亚洲视频精选| 国产亚洲毛片| 日韩视频一区| 国产免费成人av| 亚洲片国产一区一级在线观看| 欧美久久久久| 亚洲欧美999| 欧美韩日精品| 亚洲欧美视频一区| 你懂的一区二区| 亚洲视频高清| 久热精品视频在线观看| 99国产精品久久久久久久久久| 欧美中文在线免费| 亚洲区第一页| 久久久精品tv| 99精品国产热久久91蜜凸| 久久精品青青大伊人av| 亚洲精品乱码视频| 久久爱另类一区二区小说| 91久久精品久久国产性色也91| 欧美一级二区| 亚洲日韩成人| 久久国产66| 99精品视频免费全部在线| 久久久夜色精品亚洲| 一本色道久久综合亚洲二区三区| 久久久久.com| 99综合精品| 午夜精品电影| 中文亚洲免费| 伊大人香蕉综合8在线视| 亚洲一区综合| 在线观看一区视频| 欧美怡红院视频| 亚洲狼人精品一区二区三区| 久久精品成人一区二区三区蜜臀| 亚洲精品在线观| 久久久久综合一区二区三区| 夜久久久久久| 欧美精品国产精品日韩精品| 欧美一区二区视频在线| 欧美午夜不卡影院在线观看完整版免费 |