國網(wǎng)友可算把iPhone 13盼來了。

去年iPhone 12系列作為蘋果的5G手機(jī)開端，有太多不想做第一批吃螃蟹的人；一個(gè)王守義十三香的梗，給了“等等黨”們一個(gè)自洽的借口，為iPhone 13苦等一年。

今天凌晨，庫克終于帶著它身現(xiàn)直播間。你的等待究竟是“物有所值”還是“終究錯(cuò)付”，終于要揭曉了。

楊景怡 劉冬宇 | 作者

李拓 | 編輯

放大燈團(tuán)隊(duì) | 策劃

iPhone 13系列：要不咱別等了？

與去年iPhone 12如出一轍，iPhone 13依然有iPhone 13 mini、iPhone 13、iPhone 13 Pro和iPhone 13 Pro Max四款產(chǎn)品。它們的尺寸也沒有變化，iPhone 13 mini和iPhone 13 Pro Max的屏幕尺寸分別為5.4寸和6.7寸，而另外兩款則為6.1寸。

如果你也看完了發(fā)布會(huì)的全過程，也許會(huì)發(fā)現(xiàn)蘋果擁有了更多顏色，并且機(jī)型的顏色更難記了——以至于當(dāng)iPhone 13和iPhone 13 Pro發(fā)布顏色時(shí)，你可能已經(jīng)對(duì)顏色感到疲勞。它們總共有多達(dá)9種顏色，其中iPhone 13五種、13 Pro四種，沒有任何重復(fù)與交集。

蘋果對(duì)顏色的審美也不是一成不變的，但總的說來，這屆iPhone遠(yuǎn)沒有12系列那么“雷人”。iPhone 13和mini取消了去年頗具人氣的綠色和不太見得到的紫色，新增了粉色；去年被吐槽成塑料拖鞋的藍(lán)色，今年更灰了一點(diǎn)，看起來就兩個(gè)字：高級(jí)。

頭頂上的iPhone 13 Pro系列，也沒了“地才藍(lán)”，新增了一個(gè)熟悉的金色，它看起來幾乎就是iPhone Xs的金色的翻版（當(dāng)時(shí)就有不少吐槽的聲音，“科技以換殼為本”之類的），以及另一個(gè)全新的淺藍(lán)色“遠(yuǎn)峰藍(lán)”——由于整體結(jié)構(gòu)的相似性，如果不買這兩種顏色，圍觀群眾很可能看不出來你用的是iPhone 13 Pro。不用懷疑，這個(gè)新增的淺藍(lán)色，很快就能成為今年最搶手的新iPhone。

回到實(shí)在的事情上，看看iPhone 13系列有什么技術(shù)升級(jí)。

更小的“劉海”。郭明錤老師預(yù)測過了，它可能讓你的觀看體驗(yàn)好那么一點(diǎn)點(diǎn)，但這不是什么根本性的改變。多出的一點(diǎn)點(diǎn)顯示面積，蘋果并沒有為它安排什么新圖標(biāo)、新功能，一切照舊。

但特別地，更新后的Face ID功能將可以正常識(shí)別佩戴口罩或者眼鏡起霧的用戶。希望這項(xiàng)功能可以在冬天到來前上線。畢竟這一代iPhone仍然沒有屏下指紋，而大冬天里摘下口罩的滋味可不怎么好受。

更大容量的電池。這也早就被劇透了。實(shí)際上，iPhone 13全系列相對(duì)上代，續(xù)航提升從1.5小時(shí)（13 mini、13 Pro）到2.5小時(shí)（13、13 Pro Max）。

更快的主芯片A15。5nm制程、150億個(gè)晶體管、2大核+4小核架構(gòu)、更強(qiáng)的人工智能芯片。但需要特別注意，這屆蘋果給13和Pro系列的芯片做了差異化處理，13搭載4核心GPU，13 Pro搭載5核心GPU。其中的性能差異，根據(jù)發(fā)布會(huì)上的信息，4核的比競品快30%，5核的比競品快50%，我們用計(jì)算器做了個(gè)簡單的算術(shù)題，這兩款GPU的性能差異大概是15%。不過，具體差異，還需要等待實(shí)際測試結(jié)果。

更多的影像算法。電影模式視頻給中國手機(jī)廠商們好好上了一課：人工智能開始學(xué)習(xí)運(yùn)鏡，知道畫面中什么是重要的，應(yīng)該聚焦在哪里，焦點(diǎn)應(yīng)該如何跟隨主角的目光變化而變化——如果這套自動(dòng)化的程序失效了，那還應(yīng)該記錄下圖像中的深度信息，讓后期調(diào)整可以變焦虛化，這一切都應(yīng)該在手機(jī)中完成。當(dāng)然還有更多算法，天文攝影、攝影風(fēng)格、夜間模式、智能HDR4等。

剩下的提升，兩部手機(jī)就走上了不同的升級(jí)路線。總的說來，就是iPhone 13幾乎就是iPhone 12 Pro采用的技術(shù)下放，且換上了更好的處理器，誠意滿滿；而iPhone 13 Pro，則補(bǔ)上了幾個(gè)用戶期待已久的新技術(shù)，并且繼續(xù)將服務(wù)于創(chuàng)作者的能力，作為差異化的體現(xiàn)。

先說iPhone 13。它的這些關(guān)鍵升級(jí)，其實(shí)都是去年iPhone 12 Pro的參數(shù)下放。

比如XDR屏幕，最高典型亮度800nit、HDR亮度1200nit，與iPhone 12 Pro完全相同，而比12系列的625nit亮度高出28%，這就成了某種顯而易見的升級(jí)。

比如攝像頭，主攝1200萬像素/1.7微米，F(xiàn)/1.6光圈、7P鏡片、傳感器位移防抖，這幾乎完全重現(xiàn)了iPhone 12 Pro Max那顆主攝，根據(jù)Macworld的報(bào)道，它們就是同一顆鏡頭[1]，而超廣角鏡頭也如出一轍。

又比如存儲(chǔ)容量。相對(duì)上代iPhone 12，iPhone 13存儲(chǔ)空間直接翻倍，與iPhone 12 Pro系列拉平。而翻倍容量并沒有帶來價(jià)格的顯著提升，這代128G比上代64G便宜，這代256G跟上代128G一個(gè)價(jià)，新增的512G，它的確是會(huì)貴一點(diǎn)了，消費(fèi)升級(jí)不可避免嘛。

所以該如何總結(jié)iPhone 13？它是上代Pro的翻版，一樣的影像和顯示素質(zhì)、更大的存儲(chǔ)空間、更親民的價(jià)格，和更新的芯片——庫克在穩(wěn)定地推動(dòng)產(chǎn)品迭代，它沒有踩爆牙膏管，但仍然誠意滿滿，這次13的確香。

另外，在iPhone 13發(fā)布后，iPhone 12 Pro在蘋果官網(wǎng)上直接下架，而iPhone 12則降價(jià)，面向中端手機(jī)市場銷售。

再說iPhone 13 Pro系列。蘋果缺席已久的高刷新屏幕，這次終于在iPhone 13 Pro系列登場，還擁有了1000nit的夸張亮度。

除此之外，iPhone 13 Pro的三攝像頭系統(tǒng)則迎來了又一輪升級(jí)：主攝的單像素尺寸和底片面積繼續(xù)擴(kuò)大（1.7微米→1.9微米），更大的F/1.5光圈，光線捕捉能力提高至2.2倍；超廣角鏡頭的光圈擴(kuò)大，光線捕捉能力提高92%。

某種程度上說，Pro系列定位高端的原因只有一個(gè)：它的創(chuàng)作能力。的確，現(xiàn)在已經(jīng)走到第三代的iPhone Pro，與當(dāng)年iPhone X系列的“高端”是完全不同的路線，當(dāng)年iPhone X用全面屏、Face ID等橫空出世的新技術(shù)，讓高端系列成為未來感滿滿的新鮮玩具，而iPhone 13與Pro的差異，影像能力能占七成，剩下屏幕、材質(zhì)等隨便分分。

最后，總結(jié)下iPhone 13系列的售價(jià)——

值得注意的是，蘋果未來不會(huì)再推出5.4英寸手機(jī)。這意味著本次發(fā)布的iPhone 13 mini將成為小屏手機(jī)的“絕唱”。

這一代還是下一代，等等黨該做出選擇了。

iPad & iPad mini：

并沒有完全再見的邊框

庫克首先帶來了平平無奇的新款iPad。它額頭下巴還在，Home鍵也在，搭載A13仿生芯片，前置攝像頭升級(jí)至擁有1200萬像素的122°超廣角鏡頭，顯然是為疫情期間的學(xué)生和上班族做出的針對(duì)性優(yōu)化。

iPad mini迎來重大升級(jí)，徹底改頭換面。

此次發(fā)布的iPad mini沒有用傳統(tǒng)的數(shù)字編號(hào)，而是直接被稱作“新款iPad mini”，換上了類似iPad Pro的Liquid視網(wǎng)膜全面屏，也因此拿掉了過時(shí)的Home鍵，用戶可以在頂部按鈕用指紋解鎖，看起來像是iPad Air的縮小版——它也有與iPad Air相同的黑邊，并且由于iPad mini尺寸更小，黑邊所占比例相應(yīng)更大，讓視覺感受略顯突兀。

不過得益于全面屏的使用，iPad mini能在機(jī)身大小幾乎不發(fā)生變化的同時(shí)，屏幕尺寸從前代的7.9寸增加至8.3寸，重量也減小到293克。顏色方面，也有深空灰、星光色、粉色和紫色四種可選。

此外，新款iPad mini用上了與iPhone 13同款的A15芯片，采用了USB-C接口并配備了橫向立體聲揚(yáng)聲器，用來打游戲和刷劇再合適不過了。

新iPad mini有64GB和256GB兩款可選，連接方式也有無線版和5G蜂窩版兩種，普通的Wi-Fi版64G售價(jià)3799元，256G售價(jià)4999元，9月24日發(fā)售，9月16日上午9點(diǎn)開始接受訂購。

這個(gè)價(jià)格直接實(shí)現(xiàn)了消費(fèi)升級(jí)，要知道上代iPad mini同樣64G起售價(jià)只要2999元，如果看看更大尺寸的iPad Air，全面屏后價(jià)格同樣不太親切——庫克找到了在平板電腦上財(cái)富新密碼：更好看，就得更貴。

iPad作為平板行業(yè)中的王者，2020年靠iPad Pro和iPad Air取得了巨大的成功。據(jù)IDC的數(shù)據(jù)，2020年全年，蘋果的平板電腦市場份額以32.5%位居世界第一，遠(yuǎn)超份額為19.1%、排名第二的三星。[2]

Apple Watch Series 7

Apple Watch連續(xù)6年不變的外觀，終于在Series 7上發(fā)生了變化，但并非如此前爆料所言，使用直角邊框和扁平的屏幕，反而是維持一貫的圓弧形機(jī)身設(shè)計(jì)，邊角甚至因表鏡增厚變得更加圓潤。

不過，由于Apple Watch 7的邊框比上一代窄了40%，縮小至1.7mm，提升了20%的顯示面積和70%的顯示亮度。

可別小看這20%，據(jù)蘋果的介紹，Apple Watch 7屏幕能顯示的文本比上一代提升50%。你甚至可以在Apple Watch上進(jìn)行全鍵盤輸入。

價(jià)格方面，蘋果只透露了起售價(jià)為399美元，至于不同尺寸以及不同材質(zhì)的詳細(xì)價(jià)格，或許要等到發(fā)售才能知曉，但何時(shí)發(fā)售仍是個(gè)未知數(shù)。

彭博社此前文章就提到，新屏幕因工藝復(fù)雜，以致量產(chǎn)出現(xiàn)問題，Apple Watch 7或許會(huì)因此限量供應(yīng)。情況確實(shí)如此，蘋果并未說明該產(chǎn)品的具體發(fā)售時(shí)間，官網(wǎng)只顯示會(huì)在“秋末發(fā)售”。但按照郭明錤的說法，如今量產(chǎn)問題已經(jīng)解決，立訊精密已經(jīng)在加緊安排生產(chǎn)線出貨，Apple Watch 7想必也不會(huì)讓人等待太久。

Apple Watch 7為什么值得期待？不光因?yàn)樗潆娝俣雀臁獜?充到80%只需要45分鐘，比前代快了33%；也不完全是它的配色和表帶更多——擁3種材質(zhì)共8種不同配色和數(shù)不清的官配表帶。而是它在運(yùn)動(dòng)場景的一系列創(chuàng)新。

因傳感器和App的更新，新款A(yù)pple Watch配合專用的App，能夠檢測數(shù)十種體育項(xiàng)目，包括深蹲、跨步、騎行、游泳，甚至還有自動(dòng)記錄沖浪信息、網(wǎng)球發(fā)球速度和高爾夫球擊球數(shù)據(jù)等，其心率檢測和血氧測量等功能也得以優(yōu)化。

不過，此前呼聲很大的體溫和血糖監(jiān)測功能，并未在此代Apple Watch 7上推出。今年6月在國內(nèi)獲得批準(zhǔn)的心電圖功能，至今也未在國內(nèi)開放使用，Apple Watch 7也很難豁免。

我們對(duì)蘋果還剩下什么期待？

作為蘋果首代5G手機(jī)，iPhone 12大獲成功——7個(gè)月賣出1億臺(tái)，和當(dāng)年的iPhone 6一樣火。[3]

iPhone 12系列手機(jī)大獲成功后，郭明錤毫不掩飾其對(duì)iPhone 13的看好，曾在2020年11月、2021年6月、2021年9月的研報(bào)中多次提及，iPhone 13系列出貨量將超過iPhone 12系列。最近一篇報(bào)告中，他表示iPhone 13出貨量比去年同期iPhone 12增長10%以上。[4]

Loup Ventures聯(lián)合創(chuàng)始人Gene Munster也在研究報(bào)告中提到，由于三年及三年以上的舊iPhone數(shù)量達(dá)到4億部，iPhone 13依舊會(huì)大賣。[5]摩根士丹利和IDC也給出了相同的觀點(diǎn)。[6]

除了產(chǎn)品本身的因素外，iPhone 13還占盡天時(shí)。

競爭對(duì)手驍龍888翻車，極大地影響了Android陣營各品牌高端手機(jī)的銷量。據(jù)2021年京東618大促首天（6月1日）的銷售數(shù)據(jù)。銷量前12的手機(jī)型號(hào)中，只有小米11搭載的是驍龍888芯片。

不愿意妥協(xié)的安卓用戶只有兩個(gè)選擇：要么退而求其次，選擇驍龍870手機(jī)；要么選擇性能差不多的A14或者麒麟9000。但如今，華為暫無麒麟芯片，可蘋果的芯片已經(jīng)迭代到A15了。

A15芯片的生產(chǎn)也歷經(jīng)坎坷。

中國臺(tái)灣的芯片行業(yè)先后遭遇缺水、斷電、起火等事故困擾。在開始制造A15芯片后，臺(tái)積電又傳出5nm產(chǎn)線污染，所幸未對(duì)A15的生產(chǎn)造成實(shí)質(zhì)影響。

好景不長，9月2日臺(tái)積電宣布全面漲價(jià)。雖然作為VVVIP客戶的蘋果享受到了3%的最低漲幅，但日經(jīng)新聞報(bào)道稱，蘋果依然會(huì)將上漲的成本轉(zhuǎn)嫁給消費(fèi)者。

那我們?cè)摬辉摀QiPhone 13呢？

按照蘋果三年一次的“重新設(shè)計(jì)周期”，處于同一周期內(nèi)的連續(xù)三代iPhone將會(huì)維持基本相同的外觀設(shè)計(jì)，僅在配置和細(xì)節(jié)上做一些升級(jí)——iPhone 12作為新周期中的第一個(gè)系列，這也意味著，你不會(huì)在今天發(fā)布的iPhone13和明年發(fā)布的iPhone 14上看到什么顛覆性的變化。

好處也是有的。畢竟在經(jīng)過iPhone 12在5G上的驗(yàn)證后，蘋果的5G手機(jī)已經(jīng)足夠成熟。而5G基站在未來全面鋪開，5G信號(hào)從室外覆蓋到室內(nèi)，擁有一部支持5G的手機(jī)還很有必要。

如果你還在使用更早的機(jī)型，甚至是還帶著指紋識(shí)別的舊手機(jī)，iPhone 13確實(shí)是一個(gè)不錯(cuò)的選擇。但如果你更關(guān)注設(shè)計(jì)理念，或者覺得性能夠用就行，那手持iPhone 12的你可以努努力，堅(jiān)持到2023年的下一輪——即便iPhone 13在配置升級(jí)上誠意滿滿，把13變成了小Pro，但它在用戶體驗(yàn)上其實(shí)也難以實(shí)現(xiàn)某種跨越，這是種“穩(wěn)”，而我們期待蘋果每年都帶來突破性的升級(jí)、徹底顛覆一遍用戶的體驗(yàn)，也不現(xiàn)實(shí)。

對(duì)數(shù)碼愛好者來說，今年的科技春晚“蘋蘋淡淡”，但對(duì)普通用戶來說，最合適就是最好的。

文章來源：放大燈（ID：guokr233）

References：

[1] iPhone 13 and 13 Pro: The five most important things you need to know

https://www.macworld.com/article/234814/iphone-13-features-specs-price-release.html

[2] Worldwide Tablet Shipments Return to Growth in 2020, Fueled by Unprecedented Demand, According to IDC

https://www.idc.com/getdoc.jsp?containerId=prUS47423721

[3] iPhone 12 Series Sales Cross 100 Million Mark Within 7 Months of Launch

https://www.counterpointresearch.com/zh-hans/iphone-12-series-sales-cross-100-million-mark-within-7-months-launch/

[4] https://9to5mac.com/2021/09/12/kuo-iphone-13-to-drop-64gb-storage-size-pro-models-to-offer-1tb-option/

[5] Gene Munster previews next Tuesday's Apple event

https://www.ped30.com/2021/09/10/apple-preview-gene-munster/

[6] 蘋果iPhone中國需求火熱、摩根士丹利：iPhone 13銷量看旺

https://www.bnext.com.tw/article/64593/iphone13-demand-rise-in-china

[7] https://www.gamersky.com/tech/202106/1393729.shtml

說過CSS in JS，還有JS in CSS?

CSS in JS

CSS in JS是一種解決css問題想法的集合，而不是一個(gè)指定的庫。從CSS in JS的字面意思可以看出，它是將css樣式寫在JavaScript文件中，而不需要獨(dú)立出.css、.less之類的文件。將css放在js中使我們更方便的使用js的變量、模塊化、tree-shaking。還解決了css中的一些問題，譬如：更方便解決基于狀態(tài)的樣式，更容易追溯依賴關(guān)系，生成唯一的選擇器來鎖定作用域。盡管CSS in JS不是一個(gè)很新的技術(shù)，但國內(nèi)的普及程度并不高。由于Vue和Angular都有屬于他們自己的一套定義樣式的方案，React本身也沒有管用戶怎樣定義組件的樣式，所以CSS in JS在React社區(qū)的熱度比較高。

目前為止實(shí)現(xiàn)CSS in JS的第三方庫有很多:點(diǎn)擊這里。像JSS、styled-components等。在這里我們就不展開贅述了，這篇文章的重點(diǎn)是JS in CSS。

JS in CSS又是什么

在上面我們提到CSS in JS就是把CSS寫在JavaScript中，那么JS in CSS我們可以推斷出就是可以在CSS中使用JavaScript腳本，如下所示。可以在CSS中編寫Paint API的功能。還可以訪問：ctx，geom。甚至我們還可以編寫自己的css自定義屬性等。這些功能的實(shí)現(xiàn)都基于CSS Houdini。

.el {
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  --background-canvas: (ctx, geom)=> {
    let multiplier=var(--multiplier);
    let c=`var(--color)`;
    let pad=var(--pad);
    let slant=var(--slant);

    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle=c;
    ctx.fill();
  };
  background: paint(background-canvas);
  transition: --multiplier .4s;
}
.el:hover {
  --multiplier: 1;
}

Houdini 解決了什么問題

CSS 與 JS的標(biāo)準(zhǔn)制定流程對(duì)比

在如今的Web開發(fā)中，JavaScript幾乎占據(jù)了項(xiàng)目代碼的大部分。我們可以在項(xiàng)目開發(fā)中使用ES 2020、ES2021、甚至提案中的新特性（如:Decorator），即使瀏覽器尚未支持，也可以編寫Polyfill或使用Babel之類的工具進(jìn)行轉(zhuǎn)譯，讓我們可以將最新的特性應(yīng)用到生產(chǎn)環(huán)境中（如下圖所示）。

而CSS就不同了，除了制定CSS標(biāo)準(zhǔn)規(guī)范所需的時(shí)間外，各家瀏覽器的版本、實(shí)戰(zhàn)進(jìn)度差異更是曠日持久（如下圖所示），最多利用PostCSS、Sass等工具來幫我們轉(zhuǎn)譯出瀏覽器能接受的CSS。開發(fā)者們能操作的就是通過JS去控制DOM與CSSOM來影響頁面的變化，但是對(duì)于接下來的Layout、Paint與Composite就幾乎沒有控制權(quán)了。為了解決上述問題，為了讓CSS的魔力不再受到瀏覽器的限制，Houdini就此誕生。

CSS Polyfill

我們上文中提到JavaScript中進(jìn)入提案中的特性我們可以編寫Polyfill，只需要很短的時(shí)間就可以講新特性投入到生產(chǎn)環(huán)境中。這時(shí)，腦海中閃現(xiàn)出的第一個(gè)想法就是CSS Polyfill，只要CSS的Polyfill 足夠強(qiáng)大，CSS或許也能有JavaScript一樣的發(fā)展速度，令人可悲的是編寫CSS Polyfill異常的困難，并且大多數(shù)情況下無法在不破壞性能的情況下進(jìn)行。這是因?yàn)镴avaScript是一門動(dòng)態(tài)腳本語言。它帶來了極強(qiáng)的擴(kuò)展性，正是因?yàn)檫@樣，我們可以很輕松使用JavaScript做出JavaScript的Polyfill。但是CSS不是動(dòng)態(tài)的，在某些場景下，我們可以在編譯時(shí)將一種形式的CSS的轉(zhuǎn)換成另一種(如PostCSS)。如果你的Polyfill依賴于DOM結(jié)構(gòu)或者某一個(gè)元素的布局、定位等，那么我們的Polyfill就無法編譯時(shí)執(zhí)行，而需要在瀏覽器中運(yùn)行了。不幸的是，在瀏覽器中實(shí)現(xiàn)這種方案非常不容易。

如上圖所示，是從瀏覽器獲取到HTML到渲染在屏幕上的全過程，我們可以看到只有帶顏色（粉色、藍(lán)色）的部分是JavaScript可以控制的環(huán)節(jié)。首先我們根本無法控制瀏覽器解析HTML與CSS并將其轉(zhuǎn)化為DOM與CSSOM的過程，以及Cascade,Layout,Paint,Composite我們也無能為力。整個(gè)過程中我們唯一完全可控制的就是DOM，另外CSSOM部分可控。

CSS Houdini草案中提到，這種程度的暴露是不確定的、兼容性不穩(wěn)定的以及缺乏對(duì)關(guān)鍵特性的支持的。比如，在瀏覽器中的 CSSOM 是不會(huì)告訴我們它是如何處理跨域的樣式表，而且對(duì)于瀏覽器無法解析的 CSS 語句它的處理方式就是不解析了，也就是說——如果我們要用 CSS polyfill 讓瀏覽器去支持它尚且不支持的屬性，那就不能在 CSSOM 這個(gè)環(huán)節(jié)做，我們只能遍歷一遍DOM，找到 <style> 或 <link rel="stylesheet"> 標(biāo)簽，獲取其中的 CSS 樣式、解析、重寫，最后再加回 DOM 樹中。令人尷尬的是，這樣DOM樹全部刷新了，會(huì)導(dǎo)致頁面的重新渲染（如下如所示）。

即便如此，有的人可能會(huì)說：“除了這種方法，我們也別無選擇，更何況對(duì)網(wǎng)站的性能也不會(huì)造成很大的影響”。那么對(duì)于部分網(wǎng)站是這樣的。但如果我們的Polyfill是需要對(duì)可交互的頁面呢？例如scroll，resize，mousemove，keyup等等，這些事件隨時(shí)會(huì)被觸發(fā)，那么意味著隨時(shí)都會(huì)導(dǎo)致頁面的重新渲染，交互不會(huì)像原本那樣絲滑，甚至導(dǎo)致頁面崩潰，對(duì)用戶的體驗(yàn)也極其不好。

綜上所述，如果我們想讓瀏覽器解析它不認(rèn)識(shí)的樣式（低版本瀏覽器使用grid布局），然而渲染流程我們無法介入，我們也只能通過手動(dòng)更新DOM的方式，這樣會(huì)帶來很多問題，Houdini的出現(xiàn)正是致力于解決他們。

Houdini API

Houdini是一組底層API，它公開了CSS引擎的各個(gè)部分，如下圖所示展示了每個(gè)環(huán)節(jié)對(duì)應(yīng)的新API（灰色部分各大瀏覽器還未實(shí)現(xiàn)），從而使開發(fā)人員能夠通過加入瀏覽器渲染引擎的樣式和布局過程來擴(kuò)展CSS。Houdini是一群來自Mozilla，Apple，Opera，Microsoft，HP，Intel和Google的工程師組成的工作小組設(shè)計(jì)而成的。它們使開發(fā)者可以直接訪問CSS對(duì)象模型（CSSOM），使開發(fā)人員可以編寫瀏覽器可以解析為CSS的代碼，從而創(chuàng)建新的CSS功能，而無需等待它們?cè)跒g覽器中本地實(shí)現(xiàn)。

Properties & Values API

盡管當(dāng)前已經(jīng)有了CSS變量，可以讓開發(fā)者控制屬性值，但是無法約束類型或者更嚴(yán)格的定義，CSS Houdini新的API，我們可以擴(kuò)展css的變量，我們可以定義CSS變量的類型,初始值,繼承。它是css變量更強(qiáng)大靈活。

CSS變量現(xiàn)狀：

.dom {
  --my-color: green;
  --my-color: url('not-a-color'); // 它并不知道當(dāng)前的變量類型
  color: var(--my-color);
}

Houdini提供了兩種自定義屬性的注冊(cè)方式，分別是在js和css中。

CSS.registerProperty({
  name: '--my-prop', // String 自定義屬性名
  syntax: '<color>', // String 如何去解析當(dāng)前的屬性，即屬性類型，默認(rèn) *
  inherits: false, // Boolean 如果是true，子節(jié)點(diǎn)將會(huì)繼承
  initialValue: '#c0ffee', // String 屬性點(diǎn)初始值
});

我們還可以在css中注冊(cè)，也可以達(dá)到上面的效果

@property --my-prop {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

這個(gè)API中最令人振奮人心的功能是自定義屬性上添加動(dòng)畫，像這樣：transition: --multiplier 0.4s;，這個(gè)功能我們?cè)谇懊娼榻B什么是js in css那個(gè)demo用使用過。我們還可以使用+使syntax屬性支持一個(gè)或多個(gè)類型，也可以使用|來分割。更多syntax屬性值：

Worklets

Worklets是渲染引擎的擴(kuò)展，從概念上來講它類似于Web Workers，但有幾個(gè)重要的區(qū)別：

1. 設(shè)計(jì)為并行，每個(gè)Worklets必須始終有兩個(gè)或更多的實(shí)例，它們中的任何一個(gè)都可以在被調(diào)用時(shí)運(yùn)行
2. 作用域較小，限制不能訪問全局作用域的API（Worklet的函數(shù)除外）
3. 渲染引擎會(huì)在需要的時(shí)候調(diào)用他們，而不是我們手動(dòng)調(diào)用

Worklet是一個(gè)JavaScript模塊，通過調(diào)用worklet的addModule方法（它是個(gè)Promise）來添加。比如registerLayout, registerPaint, registerAnimator 我們都需要放在Worklet中

//加載單個(gè)
await demoWorklet.addModule('path/to/script.js');

// 一次性加載多個(gè)worklet
Promise.all([
  demoWorklet1.addModule('script1.js'),
  demoWorklet2.addModule('script2.js'),
]).then(results=> {});

registerDemoWorklet('name', class {

  // 每個(gè)Worklet可以定義要使用的不同函數(shù)
  // 他們將由渲染引擎在需要時(shí)調(diào)用
  process(arg) {
    return !arg;
  }
});

Worklets的生命周期

1. Worklet的生命周期從渲染引擎內(nèi)開始
2. 對(duì)于JavaScript，渲染引擎啟動(dòng)JavaScript主線程
3. 然后他將啟動(dòng)多個(gè)worklet進(jìn)程，并且可以運(yùn)行。這些進(jìn)程理想情況下是獨(dú)立于主線程的線程，這樣就不會(huì)阻塞主線程(但它們也不需要阻塞)
4. 然后在主線程中加載我們?yōu)g覽器的JavaScript
5. 該JavaScript調(diào)用 worklet.addModule 并異步加載一個(gè)worklet
6. 加載后，將worklet加載到兩個(gè)或多個(gè)可用的worklet流程中
7. 當(dāng)需要時(shí)，渲染引擎將通過從加載的Worklet中調(diào)用適當(dāng)?shù)奶幚砗瘮?shù)來執(zhí)行Worklet。該調(diào)用可以針對(duì)任何并行的Worklet實(shí)例。

Typed OM

Typed OM是對(duì)現(xiàn)有的CSSOM的擴(kuò)展，并實(shí)現(xiàn) Parsing API 和 Properties & Values API相關(guān)的特性。它將css值轉(zhuǎn)化為有意義類型的JavaScript的對(duì)象，而不是像現(xiàn)在的字符串。如果我們嘗試將字符串類型的值轉(zhuǎn)化為有意義的類型并返回可能會(huì)有很大的性能開銷，因此這個(gè)API可以讓我們更高效的使用CSS的值。

現(xiàn)在讀取CSS值增加了新的基類CSSStyleValue，他有許多的子類可以更加精準(zhǔn)的描述css值的類型：

使用Typed OM主要有兩種方法：

1. 通過attributeStyleMap設(shè)置和獲取有類型的行間樣式
2. 通過computedStyleMap獲取元素完整的Typed OM樣式

使用attributeStyleMap設(shè)置并獲取

myElement.attributeStyleMap.set('font-size', CSS.em(2));
myElement.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' }

myElement.attributeStyleMap.set('opacity', CSS.number(.5));
myElement.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' };

在線demo

使用computedStyleMap

.foo {
  transform: translateX(1em) rotate(50deg) skewX(10deg);
  vertical-align: baseline;
  width: calc(100% - 3em);
}

const cs=document.querySelector('.foo').computedStyleMap();

cs.get('vertical-align');
// CSSKeywordValue {
//  value: 'baseline',
// }

cs.get('width');
// CSSMathSum {
//   operator: 'sum',
//   length: 2,
//   values: CSSNumericArray {
//     0: CSSUnitValue { value: -90, unit: 'px' },
//     1: CSSUnitValue { value: 100, unit: 'percent' },
//   },
// }

cs.get('transform');
// CSSTransformValue {
//   is2d: true,
//   length: 3,
//   0: CSSTranslate {
//     is2d: true,
//     x: CSSUnitValue { value: 20, unit: 'px' },
//     y: CSSUnitValue { value: 0, unit: 'px' },
//     z: CSSUnitValue { value: 0, unit: 'px' },
//   },
//   1: CSSRotate {...},
//   2: CSSSkewX {...},
// }
復(fù)制代碼

在線demo

Layout API

開發(fā)者可以通過這個(gè)API實(shí)現(xiàn)自己的布局算法，我們可以像原生css一樣使用我們自定義的布局（像display:flex, display:table）。在 Masonry layout library 上我們可以看到開發(fā)者們是有多想實(shí)現(xiàn)各種各樣的復(fù)雜布局，其中一些布局光靠 CSS 是不行的。雖然這些布局會(huì)讓人耳目一新印象深刻，但是它們的頁面性能往往都很差，在一些低端設(shè)備上性能問題猶為明顯。

CSS Layout API 暴露了一個(gè)registerLayout方法給開發(fā)者，接收一個(gè)布局名（layout name）作為后面在 CSS中使用的屬性值，還有一個(gè)包含有這個(gè)布局邏輯的JavaScript類。

my-div {
  display: layout(my-layout);
}

// layout-worklet.js
registerLayout('my-layout', class {
  static get inputProperties() { return ['--foo']; }
  
  static get childrenInputProperties() { return ['--bar']; }
  
  async intrinsicSizes(children, edges, styleMap) {}

  async layout(children, edges, constraints, styleMap) {}
});

await CSS.layoutWorklet.addModule('layout-worklet.js');

在線demo 目前瀏覽器大部分還不支持

Painting API

我們可以在CSS background-image中使用它，我們可以使用Canvas 2d上下文，根據(jù)元素的大小控制圖像，還可以使用自定義屬性。

await CSS.paintWorklet.addModule('paint-worklet.js');

registerPaint('sample-paint', class {
  static get inputProperties() { return ['--foo']; }

  static get inputArguments() { return ['<color>']; }

  static get contextOptions() { return {alpha: true}; }

  paint(ctx, size, props, args) { }
});

在線demo

Animation API

這個(gè)API讓我們可以控制基于用戶輸入的關(guān)鍵幀動(dòng)畫，并且以非阻塞的方式。還能更改一個(gè) DOM 元素的屬性，不過是不會(huì)引起渲染引擎重新計(jì)算布局或者樣式的屬性，比如 transform、opacity 或者滾動(dòng)條位置（scroll offset）。Animation API的使用方式與 Paint API 和 Layout API略有不同我們還需要通過new一個(gè)WorkletAnimation來注冊(cè)worklet。

// animation-worklet.js
registerAnimator('sample-animator', class {
  constructor(options) {
  }
  animate(currentTime, effect) {
    effect.localTime=currentTime;
  }
});

await CSS.animationWorklet.addModule('animation-worklet.js');

// 需要添加動(dòng)畫的元素
const elem=document.querySelector('#my-elem');
const scrollSource=document.scrollingElement;
const timeRange=1000;
const scrollTimeline=new ScrollTimeline({
  scrollSource,
  timeRange,
});

const effectKeyframes=new KeyframeEffect(
  elem,
  // 動(dòng)畫需要綁定的關(guān)鍵幀
  [
    {transform: 'scale(1)'},
    {transform: 'scale(.25)'},
    {transform: 'scale(1)'}
  ],
  {
    duration: timeRange,
  },
);
new WorkletAnimation(
  'sample-animator',
  effectKeyframes,
  scrollTimeline,
  {},
).play();

關(guān)于此API的更多內(nèi)容點(diǎn)擊這里

Parser API

允許開發(fā)者自由擴(kuò)展 CSS 詞法分析器。

解析規(guī)則：

const background=window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"

const styles=window.cssParse.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"

解析CSS：

const style=fetch("style.css")
        .then(response=> CSS.parseStylesheet(response.body));
style.then(console.log);

Font Metrics API

它將提供一些方法來測量在屏幕上呈現(xiàn)的文本元素的尺寸，將允許開發(fā)者控制文本元素在屏幕上呈現(xiàn)的方式。使用當(dāng)前功能很難或無法測量這些值，因此該API將使開發(fā)者可以更輕松地創(chuàng)建與文本和字體相關(guān)的CSS特性。例如：

• flex布局: align-items baseline特性。需要知道每一個(gè)flex盒子中第一個(gè)元素的基線位置。
• 首字母: 需要知道每個(gè)字母的基線高度和字母最大的高度，以及換行內(nèi)容的基線長度。
• 單個(gè)字形的前進(jìn)和后退。
• 換行: 需要訪問字體數(shù)據(jù)，文本的所有樣式輸入以及布局信息（可用的段落長度等）。
• 元素中的每一個(gè)line boxes都需要一個(gè)基線。(line boxes代表包含眾多inline boxes的這行)

Houdini 目前進(jìn)展

Houdini 的藍(lán)圖

了解到這里，部分開發(fā)者可能會(huì)說：“我不需要這些花里胡哨的技術(shù)，并不能帶收益。我只想簡簡單單地寫幾個(gè)頁面，做做普通的Web App，并不想試圖干預(yù)瀏覽器的渲染過程從而實(shí)現(xiàn)一些實(shí)驗(yàn)性或炫酷的功能。”如果這樣想的話，我們不妨退一步再去思考。回憶下最近做過的項(xiàng)目，用于實(shí)現(xiàn)頁面效果所使用到的技術(shù)，grid布局方式在考慮兼容老版本瀏覽器時(shí)也不得不放棄。我們想控制瀏覽器渲染頁面的過程并不是僅僅為了炫技，更多的是為了幫助開發(fā)者們解決以下兩個(gè)問題：

1. 統(tǒng)一各大瀏覽器的行為
2. 像JavaScript一樣，在推出新的特性時(shí)，我們可以通過Polyfill的形式快速地投入生產(chǎn)環(huán)境中。

幾年過后再回眸，當(dāng)主流瀏覽器完全支持Houdini的時(shí)候。我們可以在瀏覽器上隨心所欲的使用任何CSS屬性，并且他們都能完美支持。像今天的grid布局在舊版本瀏覽器支持的并不友好的這類問題，那時(shí)我們只需要安裝對(duì)應(yīng)的Polyfill就能解決類似的問題。

如在文中發(fā)現(xiàn)有誤之處，歡迎反饋、糾正。