前端快爆

• Chrome 71 開始將試用 SXG 功能，它是由 IETF 提出，Web Package 協議規范下的 Signed HTTP Exchanges 功能的縮寫。該技術使得一個第三方服務器可以直接向用戶提供可靠資源，且不用與原站共享 HTTPS 證書密鑰。?

點評：一項非常適合 CDN 的前瞻技術。

• Safari 發布了第 70 個科技預覽版，近期版本實現了 WebRTC 的功能完善、完善了 Canvas 的審查和 WebGL Shader 的 debug 功能、WebDriver 協議針對 W3C 規范進行了更新等等。?

點評：Canvas 調試功能還是非常棒的。

• Node.js 十一月累計安全更新發布，修正了大 http 請求頭導致拒絕服務、 debugger 端口任意代碼執行、Slowloris 拒絕服務及部分 OpenSSL 漏洞。為了預防這些安全風險，可以升級到 Node.js 11.3.0 / 10.14.0 / 8.14.0。?

• Vue Conf 于 11 月下旬在杭州舉行，會上與大家同步了 Vue 3 的更新消息：為提速而完全重構的 Virtual DOM 實現，基于 Proxy 實現的全新監聽系統，代碼更小，使用 TypeScript 重構，開放了響應式數據更新 API 等等。所有議題的 PPT 已上傳官網。?

點評：應該是第一個大型基于 Proxy 接口的框架了，期待。

• 第 13 屆 D2 前端技術論壇將于杭州在明年1月6日舉行，現在可以購買普通票了。?

瑞士軍刀

• Retoggle 是一個基于 React Hooks 的腦洞：把一個元素中可以定制的變量，用 React Hooks 抽取出來做成表單組件。

• 2018 年將要過去，而前端最基礎的網絡請求庫還有一堆：Axios、Request、Superagent、Fetch、Supertest，如果你不知道該用哪一個，這里有一篇比較他們的文章。

• TypeScript 3.2 發布了，具體更新細節可見官方文檔。

專題：DOM 布局

本周專題是易京為我們帶來的 DOM 布局相關的文章列表。

布局介紹

布局即是計算可見節點在 Viewport 內的大小位置信息的過程：

• 渲染樹構建、布局及繪制
• 從 Chrome 源碼看瀏覽器如何 layout 布局
• 【瀏覽器工作原理】:布局

Reflow

當 DOM 結構發生變化、樣式變化或是調用某些屬性方法觸發重新構造渲染樹的過程為 reflow：

• 觸發 reflow 操作 [英文版] [中文版]
• CSS Triggers
• 高性能 JavaScript 重排與重繪
• 診斷強制同步布局

優化

優化的目的是盡量減少 reflow 發生的次數和影響范圍：

• 縮小樣式計算的范圍并降低其復雜性
• 避免大型、復雜的布局和布局抖動
• Preventing 'layout thrashing'
• fastDom
• Introducing 'layout boundaries'
• What are Reflows and Repaints and How to Avoid Them

---

編輯：承虎 humphry & 審閱：壹絲 & 專題供稿：易京

首發地址：zhuanlan.zhihu.com/mm-fe

總結

以上是生活随笔為你收集整理的前端技术周刊 2018-12-03：DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。