نکات کلیدی
1. بارگذاری کارآمد جاوااسکریپت برای کاهش درخواست‌های HTTP و بهبود سرعت صفحه
تعداد درخواست‌های HTTP مورد نیاز برای رندر صفحه را کاهش دهید.
ترکیب و موقعیت‌دهی اسکریپت‌ها. چندین فایل جاوااسکریپت را به یک فایل واحد ادغام کنید تا درخواست‌های HTTP را به حداقل برسانید. تگ‌های اسکریپت را در انتهای بدنه HTML قرار دهید تا صفحه قبل از اجرای اسکریپت‌ها به‌طور بصری بارگذاری شود. از تکنیک‌های بارگذاری غیرهمزمان مانند درج اسکریپت دینامیک یا ویژگی defer در صورت امکان استفاده کنید.
فشرده‌سازی و بهینه‌سازی. از ابزارهایی مانند YUI Compressor برای حذف کاراکترها و فضای خالی غیرضروری از فایل‌های جاوااسکریپت استفاده کنید. فشرده‌سازی gzip را در سرور وب خود فعال کنید تا اندازه فایل‌ها را بیشتر کاهش دهید. در نظر داشته باشید که از شبکه تحویل محتوا (CDN) برای ارائه دارایی‌های استاتیک، از جمله فایل‌های جاوااسکریپت، از سرورهای جغرافیایی توزیع‌شده برای تحویل سریع‌تر استفاده کنید.
استراتژی‌های کش را پیاده‌سازی کنید. هدرهای کش مناسب را برای فایل‌های جاوااسکریپت تنظیم کنید تا مرورگرها بتوانند آن‌ها را به‌صورت محلی ذخیره کنند. از نسخه‌بندی یا زمان‌سنجی در نام فایل‌ها برای مجبور کردن به‌روزرسانی‌ها در صورت لزوم استفاده کنید. برای دستگاه‌های موبایل با قابلیت‌های کش محدود، در نظر داشته باشید که از کش برنامه HTML5 یا مکانیزم‌های ذخیره‌سازی سمت کلاینت استفاده کنید.
2. بهینه‌سازی دسترسی به داده‌ها و مدیریت دامنه برای اجرای سریع‌تر
متغیرهای محلی همیشه سریع‌ترین دسترسی را در داخل یک تابع دارند، در حالی که متغیرهای جهانی معمولاً کندترین هستند.
کاهش پیمایش زنجیره دامنه. متغیرهای خارج از دامنه که به‌طور مکرر دسترسی دارند را در متغیرهای محلی ذخیره کنید. از استفاده از دستور with و eval() خودداری کنید، زیرا می‌توانند زنجیره دامنه را گسترش دهند و اجرای کد را کند کنند. از بستن‌ها به‌طور معقول استفاده کنید، زیرا آن‌ها ارجاعات به دامنه خارجی خود را حفظ می‌کنند و می‌توانند بر استفاده از حافظه تأثیر بگذارند.
بهینه‌سازی دسترسی به اشیاء و آرایه‌ها. از نوتیشن نقطه‌ای به‌جای نوتیشن براکت برای دسترسی به ویژگی‌های اشیاء با شناسه‌های معتبر و شناخته‌شده استفاده کنید. طول آرایه‌ها را در حلقه‌های for ذخیره کنید تا از جستجوی مکرر ویژگی‌ها جلوگیری شود. در نظر داشته باشید که از اشیاء یا آرایه‌های ساده به‌جای ساختارهای داده پیچیده‌تر استفاده کنید زمانی که ذخیره‌سازی کلید-مقدار ساده کافی است.
استفاده از نوتیشن ادبی. از ادبیات اشیاء و آرایه‌ها به‌جای معادل‌های سازنده آن‌ها (به‌عنوان مثال، {} به‌جای new Object()) استفاده کنید. این نه‌تنها خوانایی را بهبود می‌بخشد بلکه می‌تواند در بسیاری از موتورهای جاوااسکریپت سریع‌تر باشد.
3. کاهش دستکاری DOM برای بهبود عملکرد
دسترسی و دستکاری DOM بخشی مهم از برنامه‌های وب مدرن است. اما هر بار که از ECMAScript به دنیای DOM عبور می‌کنید، هزینه‌ای دارد.
عملیات DOM را دسته‌بندی کنید. با ایجاد تغییرات در یک قطعه سند یا گره کپی‌شده قبل از به‌روزرسانی DOM زنده، دستکاری مستقیم DOM را به حداقل برسانید. این کار تعداد reflow و repaint را که هزینه محاسباتی بالایی دارند، کاهش می‌دهد.
از انتخاب‌گرهای کارآمد استفاده کنید. از روش‌های بومی DOM مانند getElementById() و querySelector() به‌جای روش‌های عمومی‌تر استفاده کنید. هنگام استفاده از کتابخانه‌ها، اطمینان حاصل کنید که آن‌ها از این روش‌های بومی سریع‌تر در دسترس استفاده می‌کنند. ارجاعات DOM را برای عناصری که به‌طور مکرر دسترسی دارند، ذخیره کنید.
بهینه‌سازی مدیریت رویدادها. با اتصال شنوندگان رویداد به عناصر والد به‌جای عناصر فرزند فردی، مدیریت رویدادها را پیاده‌سازی کنید. این کار تعداد شنوندگان رویداد را کاهش می‌دهد و عملکرد را بهبود می‌بخشد، به‌ویژه برای عناصر اضافه‌شده به‌طور دینامیک.
4. پیاده‌سازی الگوریتم‌های کارآمد و تکنیک‌های کنترل جریان
در واقع فقط دو عامل وجود دارد: کار انجام‌شده در هر تکرار و تعداد تکرارها.
بهینه‌سازی حلقه‌ها. کار انجام‌شده در هر تکرار را با انتقال کد ثابت به خارج از حلقه به حداقل برسانید. در صورت امکان از حلقه‌های معکوس while استفاده کنید، زیرا معمولاً سریع‌تر از حلقه‌های for هستند. در نظر داشته باشید که از روش‌های آرایه‌ای مانند forEach()، map() و reduce() برای تکرارهای تمیزتر و احتمالاً سریع‌تر استفاده کنید.
شرایط مناسب را انتخاب کنید. از عبارات switch به‌جای زنجیره‌های طولانی if-else هنگام کار با چندین مقدار گسسته استفاده کنید. برای شرایط پیچیده، در نظر داشته باشید که از جداول جستجو یا بیت‌ماسک‌ها برای ارزیابی سریع‌تر استفاده کنید.
پیاده‌سازی حافظه‌سازی. نتایج فراخوانی‌های پرهزینه تابع را ذخیره کنید تا از محاسبات تکراری جلوگیری شود. این کار به‌ویژه برای توابع بازگشتی یا عملیات‌هایی که به‌طور مکرر با ورودی‌های یکسان فراخوانی می‌شوند، مفید است.
5. انتخاب فرمت داده مناسب برای عملکرد بهینه Ajax
JSON در مقایسه با XML مزایای زیادی دارد. این فرمت بسیار کوچکتر است و بخش کمتری از اندازه کل پاسخ به ساختار اختصاص داده شده و بیشتر به داده‌ها مربوط می‌شود.
JSON را به XML ترجیح دهید. JSON فشرده‌تر و سریع‌تر از XML تجزیه می‌شود. در صورت امکان، از JSON-P (JSON با padding) برای تجزیه سریع‌تر، به‌ویژه هنگام کار با مجموعه‌های داده بزرگ، استفاده کنید. برای مجموعه‌های داده بسیار بزرگ، در نظر داشته باشید که از فرمت‌های سفارشی با جداکننده‌های حداقلی استفاده کنید.
انتقال داده را بهینه کنید. از درخواست‌های GET برای عملیات ایپیدمیک و POST برای بارهای بزرگ‌تر استفاده کنید. استراتژی‌های کش مناسب را برای پاسخ‌های Ajax پیاده‌سازی کنید تا از درخواست‌های غیرضروری شبکه جلوگیری شود. در نظر داشته باشید که از تکنیک‌هایی مانند multipart XHR برای بسته‌بندی چندین منبع در یک درخواست واحد استفاده کنید.
داده‌ها را به‌طور کارآمد مدیریت کنید. پاسخ‌های JSON را با استفاده از روش‌های بومی مانند JSON.parse() در صورت در دسترس بودن تجزیه کنید. برای مجموعه‌های داده بزرگ، از رندرینگ تدریجی برای بهبود عملکرد درک‌شده استفاده کنید. از کارگران وب برای وظایف تجزیه یا پردازش زمان‌بر استفاده کنید تا UI پاسخگو باقی بماند.
6. ایجاد رابط‌های پاسخگو با مدیریت رشته UI مرورگر
هیچ وظیفه جاوااسکریپت نباید بیش از 100 میلی‌ثانیه طول بکشد.
وظایف طولانی را تقسیم کنید. از setTimeout() یا setInterval() برای تقسیم عملیات طولانی به قطعات کوچکتر استفاده کنید تا UI پاسخگو باقی بماند. در نظر داشته باشید که از کارگران وب برای وظایف پردازشی سنگین که به دسترسی DOM نیاز ندارند، استفاده کنید.
مدیریت شنوندگان رویدادها را بهینه کنید. شنوندگان رویدادها را برای رویدادهای مکرر مانند اسکرول یا تغییر اندازه به‌صورت debounce یا throttle کنید تا تعداد فراخوانی‌های تابع کاهش یابد. اطمینان حاصل کنید که شنوندگان رویدادها به‌سرعت کامل شوند، به‌ویژه برای تعاملات کاربر.
مدیریت انیمیشن‌ها به‌طور کارآمد. از requestAnimationFrame() برای انیمیشن‌های نرم‌تر که با چرخه رندرینگ مرورگر همزمان هستند، استفاده کنید. تعداد عناصری که انیمیشن می‌شوند را به حداقل برسانید و در صورت امکان از انتقال‌ها یا انیمیشن‌های CSS برای بهبود عملکرد استفاده کنید.
7. استفاده از فرآیندهای ساخت و استقرار برای افزایش عملکرد جاوااسکریپت
هر چیزی که می‌تواند در زمان ساخت انجام شود، نباید در زمان اجرا انجام شود.
بهینه‌سازی‌ها را خودکار کنید. یک فرآیند ساخت با استفاده از ابزارهایی مانند Grunt، Gulp یا Webpack پیاده‌سازی کنید تا وظایفی مانند ادغام، فشرده‌سازی و فشرده‌سازی فایل‌های جاوااسکریپت را خودکار کنید. از نقشه‌های منبع برای حفظ قابلیت اشکال‌زدایی کد فشرده‌شده استفاده کنید.
تقسیم کد را پیاده‌سازی کنید. برنامه خود را به قطعات کوچکتر تقسیم کنید که می‌توانند به‌صورت درخواستی بارگذاری شوند، بار اولیه را کاهش داده و زمان راه‌اندازی را بهبود بخشند. از تکنیک‌هایی مانند بارگذاری تنبل برای منابع غیرضروری استفاده کنید.
برای تولید بهینه‌سازی کنید. کدهای مختص توسعه، مانند بیانیه‌های لاگ‌گذاری و اشکال‌زدایی را در ساخت‌های تولید حذف کنید. به‌جای شناسایی مرورگر، از شناسایی ویژگی استفاده کنید تا کد قابل نگهداری و کارآمدتری در محیط‌های مختلف ایجاد کنید.
8. استفاده از ابزارهای پروفایلینگ برای شناسایی و حل گلوگاه‌های عملکرد
داشتن نرم‌افزار مناسب برای شناسایی گلوگاه‌ها در بارگذاری و اجرای اسکریپت‌ها ضروری است.
از ابزارهای توسعه‌دهنده مرورگر استفاده کنید. از پروفایلرهای داخلی در مرورگرهایی مانند Chrome DevTools، Firefox Developer Tools و Safari Web Inspector برای تجزیه و تحلیل زمان اجرای جاوااسکریپت و شناسایی توابع کند استفاده کنید. از پنل‌های شبکه برای بهینه‌سازی بارگذاری منابع و شناسایی گلوگاه‌ها در تحویل دارایی‌ها استفاده کنید.
زمان‌بندی سفارشی را پیاده‌سازی کنید. از API عملکرد (window.performance) یا توابع زمان‌بندی سفارشی برای اندازه‌گیری عملیات خاص در کد خود استفاده کنید. این کار امکان ردیابی و بهینه‌سازی عملکرد دقیق‌تر را فراهم می‌کند.
عملکرد واقعی را نظارت کنید. نظارت بر کاربران واقعی (RUM) را برای جمع‌آوری داده‌های عملکرد از کاربران واقعی پیاده‌سازی کنید. این کار بینش‌هایی درباره عملکرد برنامه شما در دستگاه‌ها و شرایط شبکه مختلف ارائه می‌دهد و به اولویت‌بندی تلاش‌های بهینه‌سازی کمک می‌کند.
آخرین به‌روزرسانی::
FAQ
What's High Performance JavaScript about?
- Focus on Performance: High Performance JavaScript by Nicholas C. Zakas is centered on optimizing JavaScript to enhance web application performance, addressing execution time, DOM interaction, and network latency.
- Historical Context: The book provides a historical perspective on JavaScript, tracing its evolution from 1996 to the present, highlighting the increasing complexity of web applications.
- Practical Techniques: It offers practical techniques and best practices for writing efficient JavaScript code, making it a valuable resource for developers aiming to improve their skills.
Why should I read High Performance JavaScript?
- Enhance User Experience: By applying the techniques in this book, you can significantly improve the speed and responsiveness of web applications, leading to a better user experience.
- Stay Current: The book covers the evolution of JavaScript engines and optimization practices, ensuring you are up-to-date with the latest trends in web development.
- Expert Insights: Authored by Nicholas C. Zakas, a recognized expert, the book provides valuable insights that can help you become a more proficient JavaScript developer.
What are the key takeaways of High Performance JavaScript?
- Optimization Techniques: The book outlines various optimization techniques, such as minimizing DOM access and using efficient algorithms, to improve JavaScript performance.
- JavaScript Loading Strategies: It emphasizes efficient JavaScript loading, recommending practices like placing scripts at the bottom of the page to avoid blocking rendering.
- Understanding JavaScript Engines: Readers gain insights into modern JavaScript engines, including just-in-time compilation and garbage collection, crucial for writing high-performance code.
What are the best quotes from High Performance JavaScript and what do they mean?
- Performance and Usability: "JavaScript performance in the browser is arguably the most important usability issue facing developers." This highlights the critical role of performance in user satisfaction and web application success.
- Minimize DOM Interaction: "Touch the DOM lightly, and stay within ECMAScript as much as possible." This advice emphasizes minimizing direct DOM interactions, which can be slow, and focusing on faster JavaScript operations.
- Comprehensive Techniques: "The techniques and approaches taught in this book address many different aspects of JavaScript." This indicates the book's comprehensive nature, covering essential topics for optimizing JavaScript performance.
How does High Performance JavaScript address DOM scripting performance?
- DOM Access Costs: The book explains that accessing and modifying DOM elements is expensive and can lead to performance bottlenecks, especially in loops.
- Batch DOM Changes: It advises batching DOM changes to minimize reflows and repaints, which can slow down the user interface.
- Efficient Methods: The author recommends using methods like
document.createDocumentFragment()to make off-document changes before appending to the DOM, reducing reflows.
What are the best practices for loading JavaScript according to High Performance JavaScript?
- Scripts at the Bottom: The book recommends placing all
<script>tags just before the closing</body>tag to ensure the page renders before JavaScript execution begins. - Asynchronous Loading: It suggests using the
asyncordeferattributes for script tags to prevent blocking the rendering of the page while scripts are being downloaded. - Minimize Script Tags: Grouping multiple scripts into a single file reduces the number of HTTP requests, significantly improving loading times.
What techniques does High Performance JavaScript recommend for optimizing algorithms?
- Minimize Work Per Iteration: The book advises reducing operations within loops to improve performance, such as caching array lengths in local variables.
- Efficient Data Structures: It suggests using lookup tables instead of conditionals for mapping values, which can significantly speed up execution.
- Avoid Recursion: The author recommends using iterative solutions instead of recursive ones to prevent stack overflow errors and improve performance.
How does High Performance JavaScript explain the importance of understanding JavaScript engines?
- Engine Evolution: The book discusses the evolution of JavaScript engines and their performance improvements through techniques like just-in-time compilation.
- Garbage Collection: It explains how garbage collection works in different engines and its impact on performance, emphasizing the need for memory-efficient code.
- Performance Implications: Understanding engine execution helps developers write optimized JavaScript, leading to faster web applications.
How does High Performance JavaScript address the browser UI thread?
- Single Process Management: The book explains that most browsers have a single process shared between JavaScript execution and UI updates, which can lead to unresponsive interfaces if not managed properly.
- Task Queuing System: Zakas describes how the UI thread uses a queuing system to manage tasks, helping developers optimize code to ensure UI updates are not blocked.
- Responsiveness Importance: Ensuring responsiveness in web applications is critical, and developers are encouraged to minimize JavaScript execution time to keep the UI responsive.
What techniques does High Performance JavaScript recommend for optimizing Ajax?
- Efficient Data Formats: The book recommends using JSON instead of XML for Ajax requests due to its lightweight nature and faster parsing.
- Minimize HTTP Requests: Zakas advises combining multiple Ajax requests into a single request whenever possible to decrease load times.
- Leverage Caching: Properly configured caching can reduce server load and improve response times for repeat users.
How can I improve my JavaScript code based on High Performance JavaScript?
- Avoid Double Evaluation: The book advises against using
eval()and theFunction()constructor due to performance penalties, recommending direct function calls instead. - Object and Array Literals: Zakas emphasizes the performance benefits of using object and array literals for creating data structures, resulting in cleaner code.
- Implement Lazy Loading: Using lazy loading techniques defers work until necessary, optimizing performance by executing only essential code during critical interactions.
What are the performance implications of using web workers as discussed in High Performance JavaScript?
- Offload Processing: Web workers allow JavaScript code to run in the background, separate from the main UI thread, improving performance by offloading heavy computations.
- Limited DOM Access: Web workers cannot directly access the DOM, preventing UI-related issues and ensuring long-running tasks do not interfere with user interactions.
- Efficient Communication: Web workers communicate with the main thread using the
postMessage()method, allowing efficient data transfer while keeping the UI responsive.
نقد و بررسی
کتاب جاوااسکریپت با عملکرد بالا نقدهای متفاوتی دریافت کرده است و به‌طور میانگین امتیاز 4.11 از 5 را کسب کرده است. بسیاری از خوانندگان از بینش‌های دقیق و نکات عملی آن برای بهینه‌سازی کد جاوااسکریپت تمجید می‌کنند. با این حال، برخی از محتوای قدیمی آن انتقاد می‌کنند، زیرا کتاب در سال 2010 منتشر شده است. جنبه‌های مثبت شامل توضیحات جامع از تکنیک‌های عملکرد، تعاملات DOM و عبارات منظم است. منتقدان اشاره می‌کنند که بسیاری از روش‌ها اکنون استاندارد شده‌اند و معیارهای مرورگر منسوخ شده‌اند. با وجود قدمت آن، برخی از خوانندگان هنوز ارزش‌هایی در اصول و دیدگاه تاریخی بهینه‌سازی عملکرد جاوااسکریپت می‌یابند.
