我从参加#PerfMatters会议中学到的东西
by Stacey Tay
通過(guò)史黛西泰
我從參加#PerfMatters會(huì)議中學(xué)到的東西 (What I learned from attending the #PerfMatters conference)
從前端的網(wǎng)絡(luò)運(yùn)行情況發(fā)布會(huì)上的注意事項(xiàng) (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 ，這是一個(gè)有關(guān)前端Web性能的會(huì)議。 我以前從未參加過(guò)會(huì)議，但是我很高興參加會(huì)議，因?yàn)闀?huì)議答應(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.
大約一年多以前，我開(kāi)始研究網(wǎng)絡(luò)性能 ，因此認(rèn)為這是加深我的知識(shí)并結(jié)識(shí)社區(qū)中其他人的好機(jī)會(huì)。
This post consists of three parts:
這篇文章包括三個(gè)部分：
(1) my experience attending the conference,
(1)我參加會(huì)議的經(jīng)驗(yàn)，
(2) some of the things I learnt at the conference, and
(2)我在會(huì)議上學(xué)到的一些東西，以及
(3) parting thoughts.
(3)離別思想。
關(guān)于會(huì)議體驗(yàn)的思考 (Thoughts on the conference experience)
每個(gè)人都很友好和平易近人 (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.
我一個(gè)人去，那是相當(dāng)令人生畏的經(jīng)歷，因?yàn)槲彝ǔＪ且粋€(gè)害羞的人，可能需要一段時(shí)間才能熱身。 但是，我制定了一個(gè)規(guī)則，不要在午餐時(shí)間獨(dú)自一人坐，并且每天嘗試與至少2個(gè)人交談。 我很高興，因?yàn)槲矣龅降拿總€(gè)人都很好并且很有趣。
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é)識(shí)了很多人，討論了從PRPL模式 ，嘗試Cloudflare工作者以更好地為澳大利亞的用戶提供服務(wù)(來(lái)自美國(guó)的服務(wù)器)，函數(shù)式編程在前端Web開(kāi)發(fā)中日益普及的各種事情。開(kāi)始使用單板滑雪(與性能無(wú)關(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)的事情，很明顯，他們?cè)谘葜v中付出了很多努力。 珍娜·澤根 ( Jenna Zeigen )的演講涵蓋了一長(zhǎng)串表演技巧，她的每一個(gè)要點(diǎn)都帶有一首歌詞， 與之融為一體 。 她告訴我，每首歌花了她大約15分鐘，那里大概有30多分鐘？
Videos of the talks should be announced on @perfmattersconf soon, but a number of the slides have already been published with #perfmattersconf.
會(huì)談的影片應(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)頁(yè)的性能不僅是一次性審核，更正了使網(wǎng)頁(yè)變慢的問(wèn)題，然后繼續(xù)進(jìn)行。 在組織中， 所有利益相關(guān)者(業(yè)務(wù)，設(shè)計(jì)，工程，市場(chǎng)營(yíng)銷，產(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或加載時(shí)間，這很重要。 但是，它們還涵蓋了使盡可能多的人可以訪問(wèn)和使用Web的其他重要部分。 從人們對(duì)績(jī)效的看法到授權(quán)績(jī)效文化 ，從特權(quán)如何定義績(jī)效到績(jī)效與可訪問(wè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.
這些中的一些(如果不是全部)可能是常識(shí)，但是許多對(duì)我來(lái)說(shuō)是新的。
表演文化 (Performance Culture)
Empower developers with tools to enable better performance. Also, make performance part of the development process.
使開(kāi)發(fā)人員能夠使用工具來(lái)實(shí)現(xiàn)更好的性能。 另外， 將性能作為開(kāi)發(fā)過(guò)程的一部分 。
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)站與競(jìng)爭(zhēng)對(duì)手的網(wǎng)站進(jìn)行比較，以獲取高管對(duì)績(jī)效的支持。 使用WebPagetest對(duì)您的網(wǎng)頁(yè)進(jìn)行的并行視頻比較 ，與競(jìng)爭(zhēng)對(duì)手的加載過(guò)程進(jìn)行比較 ，以簡(jiǎn)潔地傳達(dá)您的觀點(diǎn)。
Measure the potential annual revenue gains from increasing site speed with Google’s Test My Site tool.
使用Google的“測(cè)試我的網(wǎng)站”工具來(lái) 衡量提高網(wǎng)站速度可能帶來(lái)的潛在年度收益 。
網(wǎng)絡(luò)性能 (Performance on the Web)
Latency has an outsized impact over bandwidth on network requests.
延遲對(duì)帶寬對(duì)網(wǎng)絡(luò)請(qǐng)求的影響很大 。
SVG animations are great for animating loaders because of their (relatively) smaller sizes.
SVG動(dòng)畫(huà) (相對(duì))較小， 因此非常適合動(dòng)畫(huà)加載器 。
Squeeze your page into 14KB if possible, to avoid multiple round trips because of TCP slow-start.
如果可能，將頁(yè)面壓縮到14KB ，以避免由于TCP慢啟動(dòng)導(dǎo)致多次往返 。
Not all CDNs are doing HTTP/2 prioritisation as expected.
并非所有CDN都按預(yù)期執(zhí)行HTTP / 2優(yōu)先級(jí)劃分。
If you have to use web fonts, Zach Leatherman wrote a great guide on how to load them well.
如果您必須使用網(wǎng)絡(luò)字體 ， Zach Leatherman撰寫(xiě)了一份很好的指南，介紹了如何很好地加載它們 。
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ù)時(shí)間 (一個(gè)過(guò)程所花費(fèi)的實(shí)際持續(xù)時(shí)間，稱為“性能”)， 響應(yīng)能力 ， 流暢性 (一個(gè)過(guò)程的感知平滑度)和容忍度 (用戶期望一個(gè)過(guò)程花費(fèi)多長(zhǎng)時(shí)間)的影響。 來(lái)自Gemma Petrie和Heather McGaw的演講的幻燈片 ，該演講涉及衡量感知性能以優(yōu)先進(jìn)行產(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的代碼覆蓋率工具對(duì)于確定何時(shí)何地對(duì)內(nèi)容進(jìn)行代碼拆分很有用。 與頁(yè)面進(jìn)行一些交互以查看數(shù)字如何變化，并且根據(jù)Tim Kaldec的說(shuō)法 ，大約有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ò)資源功能使開(kāi)發(fā)人員可以返回本地保存的文件，這對(duì)于動(dòng)態(tài)調(diào)試某些內(nèi)容很有用。
Google Docs Spreadsheet to do bulk WebPagetest audits.
Google Docs Spreadsheet可以進(jìn)行批量的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)，但是我在會(huì)議期間發(fā)現(xiàn)了它，因此無(wú)法停止使用它)。
Request Map creates a network graph from a web page and is useful for visualising third party requests.
請(qǐng)求地圖可從網(wǎng)頁(yè)創(chuàng)建網(wǎng)絡(luò)圖，對(duì)于可視化第三方請(qǐng)求非常有用。
離別的想法 (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.
如果有一個(gè)最重要的主題我從會(huì)上得到的，那就是要善于Web性能，它的關(guān)鍵是要了解如何 在瀏覽器 作品 (已經(jīng)是如何渲染發(fā)生和關(guān)鍵渲染路徑 )。 但是， 性能不僅止于技術(shù)進(jìn)步 。
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)者那里獲得購(gòu)買的支持，而不僅僅是工程方面的支持，對(duì)于提高和維護(hù)性能至關(guān)重要，因?yàn)閃eb性能不僅限于盡可能快地加載頁(yè)面。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.
還需要考慮性能 ，然后確定性能的進(jìn)一步提高是否會(huì)帶來(lái)其他重要的業(yè)務(wù)或用戶改進(jìn) 。 重要的是要記住， 性能只是其中的一個(gè)用戶體驗(yàn)的一部分是很重要的。
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.
會(huì)議期間我沒(méi)有拍太多照片(請(qǐng)注意，下次一定要拍更多照片)，但是我確實(shí)設(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開(kāi)發(fā)總的來(lái)說(shuō)，這是一個(gè)了不起的會(huì)議，以檢查和它預(yù)定明年要發(fā)生呢！ 還有一個(gè)獎(jiǎng)學(xué)金計(jì)劃，針對(duì)那些沒(méi)有經(jīng)濟(jì)援助就無(wú)法參加的人。 期待明年與您相見(jiàn)！
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会议中学到的东西的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 梦到自己吃泡面是什么意思
- 下一篇： 梦到打煤球啥意思