CSS Typed Object Model, Async Clipb
除非額外註明,以下描述的更新皆適用於 Android, Chrome OS,Linux,macOS 和 Windows 平臺 Chrome Beta 渠道的最新發布。Chrome 66 的全部功能列表在 上可以檢視到。
ImageBitMap Rendering Context
以前把一張圖片渲染到 canvas 上要包含兩個部分,首先建立一個 標籤,然後把其內容渲染到 canvas 上。這就導致記憶體中存在圖片的多份複製。 透過避免記憶體複製簡化了
ImageBitMap
物件的顯示步驟,提高了渲染效率。本例展示瞭如何使用 ImageBitmapRenderingContext
. 本質上它只是轉移圖片畫素的所有權。該例子把圖片畫素從一個 blob 轉移到一個 ,其實畫素也能在
元素之間轉移。值得注意的是這個 blob 是被壓縮過的所以它在記憶體中並不是一份全量的複製。
const image = await createImageBitmap(imageBlob);const canvas = document.createElement('canvas');const context = canvas.getContext('bitmaprenderer'); context.transferFromImageBitmap(image); canvas.toBlob((outputJPEGBlob) =>{ // Do something with outputJPEGBlob. }, 'image/jpeg');
如果這裡不使用 createImageBitmap()
,imageBlob
將會延遲解碼,這將導致卡頓。另一方面,createImageBitmap()
是非同步的,使用之前已經完全解碼了,避免了卡頓。例如一個 WebGL 遊戲可以使用這個功能在遊戲進行中一邊在後臺載入新的貼圖。
CSS Typed Object Model
以前開發者想要操作 CSS 屬性不得不操作瀏覽器返回的字串,然後瀏覽器再把字串轉化回型別化表示。讓事情更糟的是,當開發者嘗試用 JavaScript 讀取 CSS 屬性值時,這個型別化的值被轉成了一個字串。在 66 版中, 了 , 的一部分,。Typed OM 透過把 CSS 值暴露為型別化 JavaScript 物件而非字串,減少了開發者和瀏覽器的負擔。Typed OM 在允許高效能操作 CSS 屬性值的同時,也使得開發者能寫出維護性更高的更易於理解的程式碼。這個簡短的例子闡釋了這一點。之前如果我想設定一個元素的不透明度我會這樣做:
el.style.opacity = 0.3; el.style.opacity === "0.3"
有了 CSSOM:
el.attributeStyleMap.set("opacity", CSS.number("0.3")); el.attributeStyleMap.get("opacity").value === 0.3
上面返回的值型別是 CSSUnitValue
, 它比字串更容易操作。
Asynchronous Clipboard API
新的 提供了一種基於 promise 的方式來讀寫剪貼簿。它比 更加容易,同時還整合了 。在未來的 Chrome 釋出中,富型別資料,包括圖片,也將得到支援。讓我們做一些簡單的文字讀寫操作來品一品這個 API。
try { await navigator.clipboard.writeText("Hello, clipboard."); } catch { console.error("Unable to write to clipboard."); }
相似地,讀取文字:
const data = await navigator.clipboard.readText();console.log("From the clipboard:", data);
要獲取更多資訊,包括如何使用 API 的安全性和授權,閱讀 ,檢視我們的.
AudioWorklet
老的 ScriptProcessorNode
是非同步的,並且需要執行緒切換,這會導致音訊輸出不穩定。AudioWorklet
物件提供了一種新的同步 Javascript 執行上下文,允許開發者以程式設計方式無延遲地控制音訊,使音訊輸出有更高的穩定性。在 你可以看到程式碼示例。除 AudioWorklet 之外,還提供了其他的 worklet API。 Chrome 65/Opera 52 釋出了 PaintWorklet
,AnimationWorklet
也在計劃中。在 AudioWorklet
釋出後的某個時候,ScriptProcessorNode
將被廢除。
Other Features in this Release
Blink > Animation
add
和 accumulate
組合操作旨在構建模組化動畫。add
和 accumulate
關鍵字即將在 Chrome 中得到支援。那時它們不再會丟擲錯誤。這是為了與 Firefox 和其他實現保持相容性。
Blink > CSS
CSS 有兩個新特性。
根據 標準,數學表示式
calc(),
min()
, 和max()
現在在媒體查詢中得到了支援。這個更新使函式表示式與其他型別的規則一致,在允許數字的地方,也允許使用這些函式。rgb()
和rgba()
函式現在支援浮點數值。
Blink > Feature Policy
預設地,deviceorientation
, deviceorientationabsolute
, 和 devicemotion
事件現在限制在頂級文件或者同源的子 frame 中觸發,效果和在 中把這些特性設定為 'self'
一樣。要修改這個行為表現,需要顯式地。
Blink > File API
如果嘗試從無效的或者不存在的 blob URL 讀取內容, 現在會得到網路錯誤而非404 錯誤。
Blink > Forms
HTML forms 有兩個特性。
根據規範要求
元素和
元素現在支援
autocomplete
屬性。), 可更改的 checkbox 現在會觸發3次事件,一次
click
事件, 接著一次input
事件,然後觸發一次change
事件。之前只會觸發click
和change
事件。
Blink > Fullscreen
如果全屏模式下的頁面開啟了一個彈窗並呼叫 window.focus()
獲得焦點,。如果彈窗透過其他方式獲得焦點則頁面不會退出全屏。
Blink > GetUserMedia
MediaStreamTrack
介面上新增了名為 getCapabilities()
的方法,它會返回 MediaTrackCapabilities
物件,指明瞭每個可約束屬性的值或者值的範圍。結果因裝置而異。
Blink > JavaScript
Javascript 有數個改變。
Function.prototype.toString()
函式現在能精確地返回原始碼中的內容。它包含空格和其他可能未被使用的文字。例如,如果 function 關鍵字和函式名字之間有註釋,註釋同時也會被返回。,字串中允許出現行分隔符 (U+2028)和段落分隔符 (U+2029)。
try
語句的catch
從句現在支援了。除已經實現的
String.prototype.trim()
外,現在String.prototype.trimStart()
andString.prototype.trimLeft()
可以使用了,是修剪字串前後空白的標準方法。為保持後向相容,非標準的trimLeft()
和trimRight()
作為別名保留了下來。Array.prototype.values()
返回一個新的包含陣列中的索引值的迭代物件。
Blink > Layout
Layout 有兩個新特性。
CSS gutter 屬性移除了 grid 字首:
grid-gap
變成gap
grid-row-gap
變成row-gap
grid-column-gap
變成column-gap
這三個屬性的預設值都是
normal
,帶字首的屬性變成新屬性的別名。值得注意的是,column-gap
是一個已經存在的屬性,在css-multicol
中就已經使用了。
display 屬性是
table-row
,table-row-group
,table-header-group
,table-footer-group
,table-cell
, 和table-caption
並且擁有 transform 屬性的元素現在是固定定位元素的包含塊了。Blink 目前還沒有使, ,
, and
成為固定定位元素的包含塊。
Blink > Media
Media 有兩個新特性。
正如的,
autoplay
影片不會播放聲音,在使用者點選或者觸控之後,或者(對於桌面系統)當使用者之前在此站點表露了播放媒體的興趣的情況下有效。這將減少首次開啟一個網頁時意料之外地播放帶聲音的影片的情況。允許網站獲取更多的關於客戶端解碼能力的資訊。這使得網站可以給使用者提供更有資訊感知能力的媒體流,避免一些糟糕場景的發生,例如網站只根據頻寬和螢幕尺寸而錯誤地選擇了客戶端無法流暢地高效能解碼的解析度。
Blink > Network
Fetch API 有兩個新特性。
Request 物件目前支援
keepalive
屬性,允許在 tab 關閉後繼續 fetch 請求。透過傳遞布林值給構造器初始化物件,可以啟用這個特性。其值可以透過 request 物件本身讀取。該屬性還可以和sendBeacon()
一起使用。新的
AbortSignal
和AbortController
介面允許取消 fetch 請求。要實現這個功能,你需要建立一個AbortController
物件,把它的 signal 屬性以 option 形式傳遞給 fetch ,透過呼叫abortController.abort()
即可取消 fetch。在我們的這篇文章可以得到更多的資訊。下方是一個小程式碼示例:
const controller = new AbortController();const signal = controller.signal;const requestPromise = fetch(url, { signal });// Abort the fetch: controller.abort();
Blink > ServiceWorker
Service workers 有兩個變化.
如果 request 是
same-origin
模式,response 是CORS
型別,Service worker 不再允許對這種請求進行響應。這是最近 Fetch 規範新增的安全措施。當
FetchEvent.clientId
未設值,現在將返回空字串而非 null. 例如瀏覽器導航請求,就會發生這種情況。
Blink > WebRTC
依照規範,Chrome 現在支援
RTCRtpSender.dtmf
屬性,用來替代 還未廢除的CreateDTMFSender()
。廢棄和互用性提升
Blink > CSS
object-position
和perspective-origin
屬性不再接受類似top right 20%
的這種三引數值。這種改變同樣適用於基礎形狀和漸變。有效的位置值必須是1個、2個或者4個引數的值。Blink > HTML
應規範改變,
ImageCapture
被移除。Blink > Input
應規範改變,
document.createTouch()
和document.createTouchList()
被移除。Blink > Web Audio
應規範改變,
AudioParam.prototype.value
更改的自動解壓縮從 Chrome 中被移除。如果你想對AudioParam
的更改平滑處理,使用AudioParam.prorotype.setTargetAtTime()
。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4692/viewspace-2809062/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 效能優化篇 - css typed OM(css typed object model)優化CSSObject
- [譯] 開始使用新的 CSS Typed Object ModelCSSObject
- XML DOM(Document Object Model)XMLObject
- DHTML Object Model&DHTML&DOMHTMLObject
- 更高效、更安全地操作 CSSOM :CSS Typed OMCSS
- DOM (文件物件模型(Document Object Model))物件模型Object
- Inside the C++ Object ModelIDEC++Object
- css18 CSS Box ModelCSS
- CSS3 object-fit 和 object-positionCSSS3Object
- akka-typed(2) - typed-actor交流方式和交流協議協議
- 深入CSS基礎之box modelCSS
- akka-typed(4) - EventSourcedBehavior in action
- akka-typed(3) - PersistentActor has EventSourcedBehavior
- javascript快速入門13--BOM——瀏覽器物件模型(Browser Object Model)JavaScript瀏覽器物件模型Object
- akka-typed(1) - actor生命週期管理
- 新提案,初識CSS的object-view-box屬性CSSObjectView
- akka-typed(7) - cluster:sharding, 叢集分片
- akka-typed(8) - CQRS讀寫分離模式模式
- Asp.Net Core中Typed HttpClient高階用法ASP.NETHTTPclient
- AutoPeftModel、AutoModel、PeftModel
- akka-typed(10) - event-sourcing, CQRS實戰
- C# 3.0 feature 1--Implicitly typed local variablesC#
- promise with asyncPromise
- akka-typed(9) - 業務分片、整合,談談lagom, 需要嗎?Go
- Uncaught TypeError: Object [object Object] has no method 'xxx'ErrorObject
- Uncaught TypeError: external_echarts_.helper.createTextStyle is not a functionat Object.seriesModel.layoutInstance.ondraw問題的解決ErrorEchartsFunctionObject
- [譯]JavaScript Symbols, Iterators, Generators, Async/Await, and Async IteratorsJavaScriptSymbolAI
- Kafka 之 async producer (2) kafka.producer.async.DefaultEventHandlerKafka
- machine learning model(algorithm model) .vs. statistical modelMacGo
- Async/awaitAI
- Async & generator & PromisePromise
- Async +AwaitAI
- async函式函式
- akka-typed(6) - cluster:group router, cluster-load-balancing
- 什麼是.NET的強型別字串(Strongly typed string)?型別字串
- ObjectObject
- SpringMVC裡的Model、Map、ModelMap以及ModelAndViewSpringMVCView
- ModelViewSet-modelserializerView