مهم است که بدانیم کاربرانی که با سایت یا برنامه های تحت وب ما تعامل دارند، پس از هر بار ورود به این صفحات چه تجربه ایی را کسب می کنند. با استفاده از این تجربیات میتوان نقاط ضعف و قوت سایت را پیدا کرد. سپس بر روی آنها کار کرد و بهترین تجربه کاربری ممکن را برای آنها ارائه داد.

بنابراین برای شناسایی این تجربیات چه چیزهایی را باید بررسی کنیم؟ برای شروع معیارهایی مثل زمان بارگذاری صفحه، زمان درخواست HTTP، مدت زمان رسیدن به اولین بایت و رنگ محتوا را بررسی کنید. اگر از Sematext Experience استفاده میکنید، در آن یک سری metrics یا معیارهای مفید برای سایت و برنامه های تحت وب خود می بینید.

نشت حافظه یا Memory leak چیست؟

در علم کامپیوتر و تکنولوژی نشت حافظه، هدر رفت یا نشت منابع محسوب میشود که بر اثر مدیریت و کنترل نادرست تخصیص حافظه در نرم افزارهای کامپیوتر رخ می دهد. تا زمانی که شما به سایت یا برنامه خود حافظه اختصاص داده اید و در حال استفاده از آن هستید، مشکل نشت حافظه شما را تهدید میکند.

هنگامی که کاربر در حال استفاده از برنامه یا وبسایت است، ممکن است با اشکلاتی در آن روبرو شود. این اشکالات بر روی دید اکثر کاربران تاثیر منفی میگذارد و باعث میشود آنها دیگر علاقه ایی به بازگشت به آن سایت را نداشته باشند. به همین جهت حتما باید از تمام مسائلی که ممکن است بر روی تعامل کاربر با ما تاثیر بگذارد، را شناسایی و کنترل کنیم. باید به محض ظاهر شدن این اشکالات از آنها آگاه شویم و با بالاترین سرعت آن را رفع کنیم. یکی از این ایشو یا مسائل می تواند نشت حافظه یا همان memory leak باشد.

هنگامی نشت حافظه رخ می دهد، سرعت برنامه شما کند میشود و به تدریج آن برنامه غیرقابل استفاده میشود. در صورتی که نشت یا هدر رفت حافظه شدید باشد، ابتدا مرورگر و کامپیوتری که برنامه در آن در حال اجراست، کند میشود. این کندی انقدر ادامه پیدا میکند که در نهایت باعث خرابی و از کار افتادن مرورگر میشود. معمولا نشت های حافظه را نمیتوان به سرعت مشاهده کرد. زیرا تنها در صورتی نشت حافظه رخ می دهد که برنامه دارای تعاملات طولانی مدت باشد. از این رو شناسایی و رفع این ایشو، بسیار دشوار است.

ابزار مانیتورینگ یا نظارت Sematext Experience دارای قابلیت های منحصر به فردی است که به شما امکان میدهد تا میزان استفاده از حافظه را در برنامه خود کنترل کنید. همچنین به شما در تشخیص سریع و کارآمد نشت حافظه نیزکمک میکند. در ادامه به طور کامل با memory leak ها آشنا میشویم و طریقه عیب یابی آن ها را بررسی خواهیم کرد.

دلایل به وجود آمدن نشت حافظه

برنامه یا وب سایت برای انجام کارهای خود متغییر، اثبات ها و توابع مختلفی را ایجاد میکند. که برای استفاده از آنها به مموری یا حافظه نیز نیاز دارد. در جاوا اسکریپت و بقیه زبان های برنامه نویسی سطح بالا زمانی که به منابع نیاز نیست، آن منابع به صورت خودکار توسط سیستم مدیریت حافظه خودکار (garbege collecter) حذف میشوند.

حافظه زمانی آزاد میشود که در کد اختصاص داده نشود. با توجه به اینکه حافظه نقش مهمی در چرخه عمر یک سایت و برنامه دارد، موارد زیادی به آن اختصاص داده میشود که این امر کار آزاد کردن حافظه را دشوار میکند. با این حال شرایطی وجود دارد که ما به نشت حافظه در سایت یا برنامه خود نیاز داریم. برای مثال زمانی که به اطلاعات خاصی نیاز نداریم و میخواهیم آن را محول کنیم، در این صورت استفاده از نشت حافظه بهترین گزینه است.

در برنامه های جانبی، چندین الگو وجود دارد که میتواند باعث رخ دادن نشت حافظه شود:

Closures : توابع داخلی به متغییرهای توابع خارجی ارجاع میشوند. به این ترتیب یک تابع داخلی مانع garbage collector شدن داده ها از آزادسازی حافظه میشود.

Accidental global variables : متغییرهایی که از قبل اعلام نشده اند، جهانی می شوند و دیگر منتتشر نخواهند شد.

Unbound collections : آرایه، نقشه ها و مجموعه ها به ما امکان می دهند تا داده ها را به روش ههای خاصی ذخیره کنیم. اما با وجود اشکالاتی در کد، می توانند منجر به نشت حافظه شوند، زیرا منابع را برای همیشه نگه می دارند.

Detached DOM referenced : یک عنصر از Document Object Model که دیگر استفاده نمی شود، اما همچنان

به آن اشاره میشود.

Unbound timers : تایمرهایی که برای همیشه کار می کنند و اشیاء را تعیین میکنند، منجر به نشت حافظه میشوند.

نحوه تشخیص نشت حافظه در برنامه

جهت تست یک نشت حافظه واقعی، یک برنامه تحت وب ساده را ایجاد کرده ایم. این برنامه رفتار کاربران کسب و کارهای الکترونیکی را شبیه سازی می کند. صفحه وب، محصولاتی را که کاربران هنگام بازدید از فروشگاه با آنها ارتباط بر قرار می کنند را پیگیری می کند. بنابراین هر تبلیغی که نمایش داده میشود، هر محصولی که جسجتو میشود و یا به سبد خرید اضافه میشود همه در یک آرایه قرار می گیرند. برای درک بهتر به کد ساده زیر توجه کنید:

function(product, timestamp, page) {

visited.push({product, timestamp, page})

}

اکنون میخواهیم جوری کد بنویسیم که داده ها با ارسال دوره ای داده ها، در backend ذخیره شوند. در این صورت داده ها همچنان از برنامه ما ارجاع داده میشوند. در صورتی که کاربر آن تب یا صفحه را نبندد، داده ها باقی می مانند و همچنان ارجاع داده میشوند که این امر منجر به نشت حافظه میشود.

یکپارچه سازی برنامه با Sematext Experience

اولین قدم، پیکربندی برنامه یا سایت است. برنامه خود را طوری پیکربندی کنید که از Sematext مرورگر SDK، برای ارسال داده ها به Sematext Cloud استفاده کند.

برای انجام این کار، قبل از بستن تگ <head/> مانند زیر یک تگ <script> اضافه میکنیم:

<script type=“text/javascript”>

(function(e,r,n,t,s){var a=[];e[s]=function(){a.push(arguments)};e[s].queue=a; var o=[];var i=[];var c=true;var p=void 0;if(window.PerformanceObserver&& window.PerformanceObserver.supportedEntryTypes&&( PerformanceObserver.supportedEntryTypes.indexOf(“longtask”)>=0|| PerformanceObserver.supportedEntryTypes.indexOf(“element”)>=0)){ p=new PerformanceObserver(function(e){e.getEntries().forEach(function(e){ switch(e.entryType){case”element”:i.push(e);break;case”longtask”:o.push(e);break; default:break}})});p.observe({entryTypes:[“longtask”,“element”]})}e[s+“lt”]={ longTasks:o,timingElements:i,inPageLoad:c,observer:p};if(t){var u=r.createElement(n); u.async=1;u.src=t;var f=r.getElementsByTagName(n)[0];f.parentNode.insertBefore(u,f)}})

(window,document,“script”,“//cdn.sematext.com/experience.js”,“strum”);

</script>

قدم دوم به نوع برنامه تحت وب و فریمورک وب سایتی که استفاده میکنید، بستگی دارد. برای مثال در این برنامه برای قرار دادن چند صفحه وب استاندارد، قبل از بسته شدن تگ <head/> از چنین دستوری استفاده میکنیم. این دستور به مرورگر SDK می گوید که چطور خودش را پیکربندی کند:

<script type=“text/javascript”>

strum(‘config’, { token: ‘<token>’, ‘receiverUrl’: ‘https://rum-receiver.sematext.com’ });

</script>

در صورتی که در برنامه یا سایت خود از معماری تک صفحه ای جهت دار (single-page oriented) استفاده کرده اید، دستورالعمل های نصب Sematext Experience App در تمام مراحل مورد نیاز شما را برای ارسال معیارها یا metrics راهنمایی میکند.