Performans ng Linya ng Diff: Ang Mahirap na Pag-ahon ng GitHub para Ma-optimize

Ang Mahirap na Pag-ahon ng GitHub: Optimisasyon ng Linya ng Diff para sa Pinakamataas na Performans

Ang mga pull request ay nananatiling masiglang puso ng GitHub, kung saan ang hindi mabilang na mga inhinyero ay naglalaan ng malaking bahagi ng kanilang buhay propesyonal. Dahil sa napakalaking sukat ng GitHub, ang paghawak ng mga pull request na mula sa maliliit na pag-aayos ng isang linya hanggang sa malalaking pagbabago na sumasaklaw sa libu-libong file at milyun-milyong linya, ang karanasan sa pagsusuri ay dapat manatiling napakabilis at tumutugon. Ang kamakailang paglabas ng bagong karanasan na batay sa React para sa tab na Files changed, na ngayon ang default para sa lahat ng gumagamit, ay nagmarka ng isang mahalagang pamumuhunan sa pagtiyak ng matatag na performans, lalo na para sa mga mahirap na malalaking pull request. Ang pangakong ito ay kinabibilangan ng patuloy na pagharap sa mahihirap na problema tulad ng na-optimize na pag-render, pagkaantala ng interaksyon, at pagkonsumo ng memorya.

Bago ang mga optimisasyon na ito, bagama't karamihan sa mga gumagamit ay nakaranas ng tumutugon na karanasan, ang malalaking pull request ay hindi maiiwasang magdulot ng kapansin-pansing pagbaba ng performans. Sa matinding mga kaso, ang JavaScript heap ay lumampas sa 1 GB, ang bilang ng mga DOM node ay lumampas sa 400,000, at ang mga interaksyon sa pahina ay naging lubhang mabagal o hindi na magamit. Ang mga pangunahing metriko ng pagiging tumutugon tulad ng Interaction to Next Paint (INP) ay lumampas sa katanggap-tanggap na mga antas, na lumilikha ng isang malinaw na pakiramdam ng pagkaantala sa pagpasok para sa mga gumagamit. Binibigyang-diin ng artikulong ito ang detalyadong paglalakbay na ginawa ng GitHub upang lubos na mapabuti ang mga pangunahing metriko ng performans na ito, na binabago ang karanasan sa pagsusuri ng diff.

Pag-navigate sa Mga Bottleneck ng Performans: Isang Multi-Estratehiyang Diskarte

Nang simulan ang pagsisiyasat sa performans para sa tab na Files changed, mabilis na naging malinaw na hindi sapat ang isang solong solusyon na "silver bullet". Ang mga pamamaraan na idinisenyo upang mapanatili ang bawat tampok at katutubong pag-uugali ng browser ay madalas na nakakaranas ng limitasyon sa matinding dami ng data. Sa kabaligtaran, ang mga mitigasyon na naglalayong maiwasan lamang ang pinakamasamang sitwasyon ay maaaring magpakilala ng hindi kanais-nais na mga kompromiso para sa pang-araw-araw na pagsusuri.

Sa halip, bumuo ang pangkat ng inhinyero ng GitHub ng isang komprehensibong hanay ng mga estratehiya, bawat isa ay masusing dinisenyo upang matugunan ang mga partikular na laki at kumplikado ng pull request. Ang mga estratehiyang ito ay binuo batay sa tatlong pangunahing tema:

Naka-target na Mga Optimisasyon para sa Mga Bahagi ng Linya ng Diff: Pagpapahusay sa kahusayan ng pangunahing karanasan sa diff para sa karamihan ng mga pull request. Tiniyak nito na ang katamtaman at malalaking pagsusuri ay nanatiling mabilis nang hindi nakokompromiso ang inaasahang mga paggana tulad ng katutubong find-in-page.
Unti-unting Pagbaba ng Kalidad na may Virtualization: Pagtitiyak ng pagiging magagamit para sa pinakamalaking pull request sa pamamagitan ng pagbibigay-prayoridad sa pagiging tumutugon at katatagan, at matalinong paglilimita sa kung ano ang na-render sa anumang partikular na sandali.
Pamumuhunan sa Mga Pangunahing Bahagi at Pagpapabuti ng Pag-render: Pagpapatupad ng mga pagpapahusay na nagbibigay ng lumalaking benepisyo sa bawat laki ng pull request, anuman ang partikular na mode ng pagtingin ng gumagamit.

Ang mga istratehikong haligi na ito ang gumabay sa mga pagsisikap ng pangkat, na nagpapahintulot sa kanila na sistematikong harapin ang mga ugat ng mga isyu sa performans at maghanda para sa mga kasunod na pagbabago sa arkitektura.

Pagsusuri sa V1: Ang Gastos ng Isang Mahal na Linya ng Diff

Ang unang implementasyon ng GitHub na batay sa React, na tinutukoy bilang v1, ang naglatag ng pundasyon para sa modernong diff view. Ang bersyon na ito ay isang tapat na pagsisikap na i-port ang klasikong Rails view sa React, na nagbibigay-priyoridad sa paglikha ng maliliit, magagamit muli na mga bahagi ng React at pagpapanatili ng isang malinaw na istruktura ng DOM tree. Gayunpaman, ang diskarte na ito, bagama't lohikal sa simula nito, ay napatunayang isang malaking bottleneck sa sukatan.

Sa v1, ang pag-render ng bawat linya ng diff ay isang mahal na operasyon. Ang isang solong linya sa isang unified view ay karaniwang isinasalin sa humigit-kumulang 10 elemento ng DOM, habang ang isang split view ay nangangailangan ng humigit-kumulang 15. Tataas pa ang bilang na ito sa pag-highlight ng syntax, na nagpapakilala ng mas maraming <span> tag. Sa antas ng React, ang mga unified diff ay naglalaman ng hindi bababa sa walong bahagi bawat linya, at ang mga split view ay hindi bababa sa 13. Ito ang mga baseline na bilang, na may dagdag na mga estado ng UI tulad ng mga komento, hover, at focus na nagdaragdag pa ng mas maraming bahagi.

Ang arkitekturang v1 ay nagdusa rin mula sa pagkalat ng mga tagapamahala ng kaganapan ng React. Bagama't tila hindi nakakapinsala sa maliit na sukat, ang isang solong linya ng diff ay maaaring magdala ng 20 o higit pang mga tagapamahala ng kaganapan. Kapag pinagsama-sama sa libu-libong linya sa isang malaking pull request, ito ay mabilis na lumalaki, na humahantong sa labis na overhead at pagtaas ng paggamit ng JavaScript heap. Ang kumplikado na ito ay hindi lamang nakaapekto sa performans kundi ginawa rin ang pagbuo at pagpapanatili na mas mahirap. Ang paunang disenyo, na epektibo para sa nakagapos na data, ay lubos na nahirapan kapag naharap sa walang limitasyong katangian ng magkakaibang laki ng pull request ng GitHub.

Upang buod, para sa bawat linya ng v1 diff, ang sistema ay mayroon:

Minimum na 10-15 na elemento ng DOM tree
Minimum na 8-13 na Bahagi ng React
Minimum na 20 na Tagapamahala ng Kaganapan ng React
Maraming maliliit, magagamit muli na mga Bahagi ng React

Ang arkitektura na ito ay direktang nag-ugnay sa mas malalaking laki ng pull request sa mas mabagal na INP at pagtaas ng paggamit ng JavaScript heap, na nangangailangan ng isang pangunahing muling pagsusuri at muling disenyo.

Rebolusyon sa Pag-render: Ang Epekto ng Mga Optimisasyon ng V2

Ang paglipat sa v2 ay nagmarka ng isang makabuluhang pagbabago sa arkitektura, na nakatuon sa granular, maimpluwensyang pagbabago. Tinanggap ng pangkat ang pilosopiya na "walang pagbabago ang masyadong maliit pagdating sa performans, lalo na sa sukatan." Isang pangunahing halimbawa ay ang pag-alis ng hindi kinakailangang <code> tags mula sa mga cell ng numero ng linya. Bagama't tila maliit ang pag-alis ng dalawang DOM node bawat linya ng diff, sa 10,000 linya, ito ay agad na katumbas ng 20,000 mas kaunting node sa DOM, na nagpapakita kung paano ang naka-target, incremental na mga optimisasyon ay nagbubunga ng malaking pagpapabuti.

Binibigyang-diin ng visual na paghahambing sa ibaba ang pinababang kumplikado mula v1 patungo v2 sa antas ng bahagi:

Mga Bahagi ng Diff at HTML ng V1. Mayroon kaming 8 bahagi ng react para sa isang solong linya ng diff.

Pinabilis na Arkitektura ng Bahagi

Isang pangunahing inobasyon sa v2 ang pagpapasimple ng puno ng bahagi. Lumipat ang pangkat mula sa walong bahagi ng React bawat linya ng diff patungo sa dalawa. Nakamit ito sa pamamagitan ng pag-alis ng malalim na nakasalansan na mga puno ng bahagi at paglikha ng mga nakalaang bahagi para sa bawat split at unified diff line. Bagama't nagpakilala ito ng ilang duplikasyon ng code, lubos nitong pinasimple ang pag-access ng data at binawasan ang pangkalahatang kumplikado. Ang paghawak ng kaganapan ay isinentro din, na ngayon ay pinamamahalaan ng isang solong top-level na tagapamahala gamit ang mga halaga ng data-attribute, na pumapalit sa maraming indibidwal na tagapamahala ng kaganapan ng v1. Ang diskarte na ito ay lubos na nagpabilis sa parehong code at performans.

Matalinong Pamamahala ng State at O(1) na Pag-access ng Data

Marahil ang pinaka-maimpluwensyang pagbabago ay ang paglilipat ng kumplikadong app state, tulad ng pagkokomento at mga menu ng konteksto, sa kondisyonal na na-render na mga bahaging anak. Sa isang kapaligiran tulad ng GitHub, kung saan ang mga pull request ay maaaring lumampas sa libu-libong linya, hindi mahusay para sa bawat linya na magdala ng kumplikadong commenting state kapag maliit na bahagi lamang ang magkakaroon ng mga komento. Sa pamamagitan ng paglipat ng state na ito sa mga nakasalansan na bahagi, ang pangunahing responsibilidad ng diff-line component ay naging purong pag-render ng code, na umaayon sa Single Responsibility Principle.

Bukod pa rito, tinugunan ng v2 ang isyu ng O(n) na paghahanap at labis na mga hook ng useEffect na nagpapahirap sa v1. Nagpatibay ang pangkat ng isang dalawang-bahaging estratehiya: mahigpit na paglilimita sa paggamit ng useEffect sa top-level ng mga file ng diff at pagtatatag ng mga panuntunan sa linting upang maiwasan ang muling pagpapakilala sa mga bahagi na nagbabalot ng linya. Tiniyak nito ang tumpak na memoization at mahuhulaan na pag-uugali. Kasabay nito, ang global at diff state machine ay muling dinisenyo upang gamitin ang O(1) na paghahanap sa pare-parehong oras gamit ang mga object ng JavaScript Map. Nagpahintulot ito para sa mabilis, pare-parehong mga selector para sa karaniwang mga operasyon tulad ng pagpili ng linya at pamamahala ng komento, lubos na nagpapahusay sa kalidad ng code, nagpapabuti sa performans, at binabawasan ang kumplikado sa pamamagitan ng pagpapanatili ng na-flatten, na-map na mga istruktura ng data. Ang masusing diskarte na ito sa pag-optimize ng mga workflow ng developer at pinagbabatayan na arkitektura ay tinitiyak ang isang matatag, scalable na sistema.

Ang Nasusukat na Epekto: Ang V2 ay Naghahatid ng Nabibilang na Gains

Ang masusing pagbabago sa arkitektura at antas ng code na ipinatupad sa v2 ay nagdulot ng malalim, nasusukat na mga pagpapabuti sa mga pangunahing sukatan ng performans. Ang bagong sistema ay mas mabilis na tumatakbo, na may napakalaking pagbawas sa paggamit ng JavaScript heap at mga marka ng INP. Ipinapakita ng sumusunod na talahanayan ang mga kapansin-pansing pagpapabuti na naobserbahan sa isang kinatawan ng pull request na may 10,000 pagbabago sa linya sa isang split diff setting:

Metrik	v1	v2	Pagpapabuti
JavaScript Heap	1GB+	250MB	75%
Mga DOM Node	400,000+	80,000	80%
INP p95	1000ms+	100ms	90%

Binibigyang-diin ng mga figure na ito ang tagumpay ng multi-pronged na estratehiya ng GitHub. Ang 75% na pagbawas sa laki ng heap ng JavaScript at isang 80% na pagbaba sa mga DOM node ay hindi lamang nangangahulugan ng mas magaan na browser footprint kundi direktang nag-aambag din sa isang mas matatag at tumutugon na interface. Ang pinaka-kapansin-pansing pagpapabuti, isang 90% na pagbawas sa INP p95 (ang ika-95 bahagdan ng pagkaantala ng interaksyon), ay nangangahulugang 95% ng mga interaksyon ng gumagamit ay natapos na ngayon sa loob lamang ng 100 millisecond, halos inaalis ang pagkaantala sa pagpasok na nagpapahirap sa malalaking pull request sa v1. Lubos nitong pinapahusay ang karanasan ng gumagamit, na ginagawang ang malalaking pagsusuri ng code ay parang kasing likas at tumutugon tulad ng mas maliliit.

Ang pangako ng GitHub sa patuloy na pagpapabuti, na pinatunayan ng malalim na pagbusisi na ito sa optimisasyon ng linya ng diff, ay isang patunay sa kanilang dedikasyon sa pagbibigay ng isang world-class na platform ng developer. Sa pamamagitan ng masusing pagsusuri sa mga bottleneck ng performans at pagpapatupad ng naka-target na mga solusyon sa arkitektura, hindi lamang nila nalutas ang kritikal na mga isyu sa scalability kundi nagtakda rin ng bagong pamantayan para sa pagiging tumutugon sa kanilang pangunahing produkto. Tinitiyak ng pagtutok na ito sa performans na ang mga inhinyero ay maaaring mahusay na makapagtrabaho sa mga mahalagang gawain tulad ng pagsusuri ng code, na sa huli ay humahantong sa mas mataas na kalidad at seguridad ng code at isang mas produktibong kapaligiran sa pagbuo.

Orihinal na pinagmulan

https://github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/

Mga Karaniwang Tanong

What is the 'Files changed' tab in GitHub pull requests and why was its performance critical?

The 'Files changed' tab is a core component of GitHub's pull request workflow, allowing engineers to review code modifications. Its performance is critical because it's where developers spend significant time, and slowdowns, especially with large pull requests, can severely impede productivity and user experience. GitHub prioritized its optimization to ensure responsiveness across all scales of code changes, from minor fixes to extensive refactorings, which can involve millions of lines across thousands of files. Maintaining a smooth and efficient review process is paramount for collaborative development.

What were the primary performance challenges GitHub faced with large pull requests in the v1 architecture?

In its initial React-based architecture (v1), GitHub encountered significant performance degradation when handling large pull requests. Key issues included the JavaScript heap exceeding 1 GB, DOM node counts soaring past 400,000, and page interactions becoming extremely sluggish or even unusable. The Interaction to Next Paint (INP) metric, which measures responsiveness, showed unacceptably high values. These problems stemmed from an inefficient rendering strategy where each diff line was resource-intensive, with too many DOM elements, React components, and event handlers, particularly in cases involving thousands of lines of code.

How did GitHub approach solving the complex performance issues, moving beyond a 'silver bullet' solution?

Recognizing that no single solution would address the diverse range of pull request sizes and complexities, GitHub adopted a multi-faceted strategic approach. They focused on three core themes: targeted optimizations for diff-line components to keep medium and large reviews fast, graceful degradation with virtualization to maintain usability for the largest pull requests by limiting rendered content, and investing in foundational components and rendering improvements to yield compounding benefits across all pull request sizes. This comprehensive strategy allowed them to tailor solutions to specific problem areas.

What were the key limitations of the 'v1' diff rendering architecture that made it unsustainable for scale?

The v1 architecture, while initially sensible for smaller diffs, proved unsustainable for large-scale pull requests. Each diff line was costly, requiring 10-15 DOM elements, 8-13 React components, and over 20 event handlers. This was compounded by deep component nesting, excessive `useEffect` hooks, and O(n) data lookups, leading to unnecessary re-renders and increased complexity. The abstraction layers, meant to share code, inadvertently added overhead by carrying logic for both split and unified views, even when only one was active. This design led to a significant increase in JavaScript heap, DOM count, and poor INP scores for larger diffs.

What specific architectural changes were implemented in 'v2' to drastically improve diff line performance?

The v2 architecture introduced several critical changes. It streamlined the component tree, reducing React components per diff line from eight to two by creating dedicated components for split and unified views, even with some code duplication. Event handling was centralized to a single top-level handler using `data-attribute` values, replacing numerous individual handlers. Complex app state, such as commenting features, was moved into conditionally rendered child components, ensuring that diff lines primarily focused on rendering code. Furthermore, v2 restricted `useEffect` hooks to top-level diff files and adopted O(1) constant-time data access using `JavaScript Map` for efficient state lookups, significantly reducing re-renders and improving data management.

How did the GitHub engineering team achieve quantifiable improvements in JavaScript heap, DOM nodes, and INP metrics with v2?

The cumulative effect of v2's architectural changes led to substantial quantifiable improvements. For a pull request with 10,000 line changes, the JavaScript heap size was reduced from 1GB+ to 250MB, a 75% improvement. DOM nodes decreased from 400,000+ to 80,000, an 80% reduction. The Interaction to Next Paint (INP) p95 (95th percentile) saw an astounding 90% improvement, dropping from 1000ms+ to just 100ms. These results were achieved through meticulous optimization, including removing extraneous DOM elements, simplifying the React component structure, centralizing event handling, and optimizing state management and data access patterns, leading to a much faster and more responsive user experience.

What is Interaction to Next Paint (INP) and why is its improvement significant for GitHub's user experience?

Interaction to Next Paint (INP) is a crucial web performance metric that assesses a page's responsiveness by measuring the latency of all interactions made by a user with the page. It records the time from when a user interacts (e.g., click, tap, keypress) until the next frame is painted to the screen, reflecting the visual feedback of that interaction. For GitHub, a high INP meant users experienced noticeable input lag, making the platform feel slow and unresponsive. By reducing INP p95 from over 1000ms to 100ms in v2, GitHub significantly enhanced the perceived speed and fluidity of the 'Files changed' tab, ensuring a smoother and more satisfying developer experience, especially during code review.

Manatiling Updated

Kunin ang pinakabagong AI news sa iyong inbox.

I-share