by Stacey Tay

通過史黛西泰

我從參加#PerfMatters會議中學(xué)到的東西 (What I learned from attending the #PerfMatters conference)

從前端的網(wǎng)絡(luò)運行情況發(fā)布會上的注意事項 (Notes from a front-end web performance conference)

This week I had the privilege of attending #PerfMatters, a conference focused on front-end web performance. I’ve never been to a conference before, but I was thrilled to be attending because it promised an amazing lineup of speakers and topics.

本周，我有幸參加了#PerfMatters ，這是一個有關(guān)前端Web性能的會議。 我以前從未參加過會議，但是我很高興參加會議，因為會議答應(yīng)了精彩的演講者和主題 陣容 。

I started delving into web performance about over a year ago, and so thought this would be a great chance to deepen my knowledge and meet other people in the community.

大約一年多以前，我開始研究網(wǎng)絡(luò)性能 ，因此認為這是加深我的知識并結(jié)識社區(qū)中其他人的好機會。

This post consists of three parts:

這篇文章包括三個部分：

(1) my experience attending the conference,

(1)我參加會議的經(jīng)驗，

(2) some of the things I learnt at the conference, and

(2)我在會議上學(xué)到的一些東西，以及

(3) parting thoughts.

(3)離別思想。

關(guān)于會議體驗的思考 (Thoughts on the conference experience)

每個人都很友好和平易近人 (Everyone is so friendly and approachable)

I went alone and it was a fairly intimidating experience, since I’m generally a shy person and can take awhile to warm up. But, I made a rule to not sit alone during lunch and to try to talk to at least 2 people each day. I’m glad I did because everyone I met was nice and fun to talk to.

我一個人去，那是相當(dāng)令人生畏的經(jīng)歷，因為我通常是一個害羞的人，可能需要一段時間才能熱身。 但是，我制定了一個規(guī)則，不要在午餐時間獨自一人坐，并且每天嘗試與至少2個人交談。 我很高興，因為我遇到的每個人都很好并且很有趣。

I ended up meeting a lot of people, talking about things ranging from the PRPL pattern, experimenting with Cloudflare workers to better serve users in Australia (from servers in the US), functional programming’s increasing prevalence in front-end web development, and how to get started with snowboarding (not performance related, in case you’re wondering).

我最終結(jié)識了很多人，討論了從PRPL模式 ，嘗試Cloudflare工作者以更好地為澳大利亞的用戶提供服務(wù)(來自美國的服務(wù)器)，函數(shù)式編程在前端Web開發(fā)中日益普及的各種事情。開始使用單板滑雪(與性能無關(guān)，如果您想知道的話)。

這次談話真是太神奇了 (The talks were absolutely amazing)

All the speakers had something related to web performance in one form or another to talk about, and it was obvious that they put in a lot of effort into their presentations. Jenna Zeigen’s talk covered a long list of performance tricks and each of her points had a song lyric to go along with them, which was so entertainingly informative. She told me that it took her about 15 minutes for each song and there’s like over 30 in there ?

所有發(fā)言人都以一種或另一種形式談?wù)撆c網(wǎng)絡(luò)性能有關(guān)的事情，很明顯，他們在演講中付出了很多努力。 珍娜·澤根 ( Jenna Zeigen )的演講涵蓋了一長串表演技巧，她的每一個要點都帶有一首歌詞， 與之融為一體 。 她告訴我，每首歌花了她大約15分鐘，那里大概有30多分鐘？

Videos of the talks should be announced on @perfmattersconf soon, but a number of the slides have already been published with #perfmattersconf.

會談的影片應(yīng)在公布@perfmattersconf很快，但一些幻燈片已經(jīng)出版了#perfmattersconf 。

講座涵蓋了網(wǎng)絡(luò)性能方面的許多方面 (The talks cover the many facets of working on web performance)

Improving a web page’s performance isn’t just a one-off audit, fixing the problems that makes that page slow, and then moving on. It takes a concerted effort from all stakeholders—business, design, engineering, marketing, product—in an organisation to get and stay fast.

改善網(wǎng)頁的性能不僅是一次性審核，更正了使網(wǎng)頁變慢的問題，然后繼續(xù)進行。 在組織中， 所有利益相關(guān)者(業(yè)務(wù)，設(shè)計，工程，市場營銷，產(chǎn)品)需要齊心協(xié)力 ，以保持并保持快速發(fā)展。

The talks weren’t all just about how we could improve TTIs or load times, which are important. But, they also covered the other important parts of making the web accessible and usable for as many people as possible. From how people perceive performance to empowering a performance culture, and from how privilege defines performance to the intersection of performance and accessibility.

討論不僅涉及如何改善TTI或加載時間，這很重要。 但是，它們還涵蓋了使盡可能多的人可以訪問和使用Web的其他重要部分。 從人們對績效的看法到授權(quán)績效文化 ，從特權(quán)如何定義績效到績效與可訪問性的交集 。

非詳盡的性能提示和技巧列表 (A non-exhaustive list of performance tips and tricks learnt)

Some, if not all, of these might be common knowledge, but many were new to me.

這些中的一些(如果不是全部)可能是常識，但是許多對我來說是新的。

表演文化 (Performance Culture)

• Empower developers with tools to enable better performance. Also, make performance part of the development process.

  使開發(fā)人員能夠使用工具來實現(xiàn)更好的性能。 另外， 將性能作為開發(fā)過程的一部分 。

• Compare your site with your competitors’ to get executive buy-in on driving performance. Use WebPagetest’s side-by-side video comparison of your webpage against a competitor’s loading journey to succinctly drive your point across.

  將您的網(wǎng)站與競爭對手的網(wǎng)站進行比較，以獲取高管對績效的支持。 使用WebPagetest對您的網(wǎng)頁進行的并行視頻比較 ，與競爭對手的加載過程進行比較 ，以簡潔地傳達您的觀點。

• Measure the potential annual revenue gains from increasing site speed with Google’s Test My Site tool.

  使用Google的“測試我的網(wǎng)站”工具來 衡量提高網(wǎng)站速度可能帶來的潛在年度收益 。

網(wǎng)絡(luò)性能 (Performance on the Web)

• Latency has an outsized impact over bandwidth on network requests.

  延遲對帶寬對網(wǎng)絡(luò)請求的影響很大 。

• SVG animations are great for animating loaders because of their (relatively) smaller sizes.

  SVG動畫 (相對)較小， 因此非常適合動畫加載器 。

• Squeeze your page into 14KB if possible, to avoid multiple round trips because of TCP slow-start.

  如果可能，將頁面壓縮到14KB ，以避免由于TCP慢啟動導(dǎo)致多次往返 。

• Not all CDNs are doing HTTP/2 prioritisation as expected.

  并非所有CDN都按預(yù)期執(zhí)行HTTP / 2優(yōu)先級劃分。

• If you have to use web fonts, Zach Leatherman wrote a great guide on how to load them well.

  如果您必須使用網(wǎng)絡(luò)字體 ， Zach Leatherman撰寫了一份很好的指南，介紹了如何很好地加載它們 。

• Perceived performance is influenced by duration (actual duration that a process takes, referred to as “performance”), responsiveness, fluency (perceived smoothness of a process), and tolerance (how long does the user expect a process to take). Slides from Gemma Petrie and Heather McGaw’s talk on Measuring Perceived Performance to Prioritize Product Work.

  感知的性能受 持續(xù)時間 (一個過程所花費的實際持續(xù)時間，稱為“性能”)， 響應(yīng)能力 ， 流暢性 (一個過程的感知平滑度)和容忍度 (用戶期望一個過程花費多長時間)的影響。 來自Gemma Petrie和Heather McGaw的演講的幻燈片 ，該演講涉及衡量感知性能以優(yōu)先進行產(chǎn)品工作 。

一些整潔的工具 (Some Neat Tools)

• Chrome’s code coverage tool is useful for determining where and when to code-split stuff out. Interact with the page a little to see how the numbers change, and according to Tim Kaldec, about 45% unused code is normal and it’ll be diminishing marginal gains to optimise over that.

  Chrome的代碼覆蓋率工具對于確定何時何地對內(nèi)容進行代碼拆分很有用。 與頁面進行一些交互以查看數(shù)字如何變化，并且根據(jù)Tim Kaldec的說法 ，大約有45％的未使用代碼是正常的，因此優(yōu)化該代碼將減少邊際收益。

• Chrome’s override network resource feature allows developers to return a locally saved file, which is useful for debugging something on the fly.

  Chrome的覆蓋網(wǎng)絡(luò)資源功能使開發(fā)人員可以返回本地保存的文件，這對于動態(tài)調(diào)試某些內(nèi)容很有用。

• Google Docs Spreadsheet to do bulk WebPagetest audits.

  Google Docs Spreadsheet可以進行批量的WebPagetest審核 。

• Online JavaScript AST explorer (alright, this one isn’t exactly related to web performance, but I found out about it during the conference and can’t stop playing with it).

  在線JavaScript AST資源管理器 (好吧，這與網(wǎng)絡(luò)性能并不完全相關(guān)，但是我在會議期間發(fā)現(xiàn)了它，因此無法停止使用它)。

• Request Map creates a network graph from a web page and is useful for visualising third party requests.

  請求地圖可從網(wǎng)頁創(chuàng)建網(wǎng)絡(luò)圖，對于可視化第三方請求非常有用。

離別的想法 (Parting Thoughts)

If there’s one overarching theme I got from the conference, it’s that to be good at web performance, it’s crucial to understand how the browser works (things like how rendering happens and the critical rendering path). But, performance doesn’t just stop at technical gains.

如果有一個最重要的主題我從會上得到的，那就是要善于Web性能，它的關(guān)鍵是要了解如何 在瀏覽器 作品 (已經(jīng)是如何渲染發(fā)生和關(guān)鍵渲染路徑 )。 但是， 性能不僅止于技術(shù)進步 。

Getting buy-in from all stakeholders, not just engineering, is crucial to improving and maintaining performance because web performance goes beyond loading a page as fast as possible.從所有利益相關(guān)者那里獲得購買的支持，而不僅僅是工程方面的支持，對于提高和維護性能至關(guān)重要，因為Web性能不僅限于盡可能快地加載頁面。

There’s also perceived performance to consider, and then determining whether further improvements in performance creates additional significant business or user improvements. It’s important to keep in mind that performance is just one part of the user experience.

還需要考慮性能 ，然后確定性能的進一步提高是否會帶來其他重要的業(yè)務(wù)或用戶改進 。 重要的是要記住， 性能只是其中的一個用戶體驗的一部分是很重要的。

I didn’t take too many photos during the conference (note to self to definitely take more photos the next time), but I did manage to snap this one.

會議期間我沒有拍太多照片(請注意，下次一定要拍更多照片)，但是我確實設(shè)法拍了一張。

If you’re interested in web performance or just web development in general, this is an amazing conference to check out and it’s scheduled to happen next year too! There’s also a scholarship program for those unable to attend without financial assistance. Looking forward to seeing you there next year!

如果你有興趣在網(wǎng)絡(luò)性能或只是Web開發(fā)總的來說，這是一個了不起的會議，以檢查和它預(yù)定明年要發(fā)生呢！ 還有一個獎學(xué)金計劃，針對那些沒有經(jīng)濟援助就無法參加的人。 期待明年與您相見！

Thanks to Hui Yi, Jingwen Chen, and Yao Hui Chua for reading an earlier draft and sharing their feedback.

感謝Hui Yi ， Chenjingwen Chen和Yao Hui Chua閱讀早期的草稿并分享他們的反饋。

翻譯自: https://www.freecodecamp.org/news/thoughts-and-learnings-from-perfmatters-2019-c5d4daa8519/

總結(jié)

以上是生活随笔為你收集整理的我从参加#PerfMatters会议中学到的东西的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。