دراسة الطرق المثمى لتحسين أداء تطبيقات الوب

Investigating the best practices to increase the performance of

web-based applications

**محمد القواص * باسل الخطيب الميندس الدكتور أسماء الباحثين:Dr. Bassel Alkhatib – Mouhamad Kawas

:الممخصجعل من غير المقبول التراجع أو التباطؤ في إلى حد شو البشرية في أيامنا ىذه، مخيفة ور التي تعيأصبحت سرعة التط

يمكن تجاىمو، عمى الرغم من ال حاضنا أساسيا يميز ىذه المرحمة ىو بروز شبكة الوب ىذا التطور. ولعل أبرز ما من حيث األداء. التحديات والمشكالت التي رافقت ظيوره، ومازالت ترافقو السيما

،البحث إلى عرض المشكالت الحالية التي تواجو األنظمة الحاسوبية العاممة عمى شبكة الوب من حيث األداءىذا ييدف ستخدمة في ات البرمجية المانعمى أنواع التق ويطرح قائمة التحديات التي تواجييا، وذلك من خالل تقسيم المشكالت بناء

.األمثلالمقترحة لرفع أداء ىذه النظم إلى الحد التوصياتمجموعة من النصائح و البحث رض عالوب. كما ي بناء صفحاتالنصائح ىذه وقد تم اختيار نظام المفاضمة في وزارة الصحة في الجميورية العربية السورية، بيئة لالختبار وتطبيق

والتوصيات. إخطاطات – وريقات األسموب المتشمشل – ير النص الترابطيلغة تأش –األداء –تطبيقات شبكة الوب لكممات المفتاحية:ا

جانب المخدم –أجاكس –جافا

In today’s world, the development aspects are growing very fast. We must acknowledge the fact

that we have to be as faster as this development. One of the major properties of today’s evolving is

the World Wide Web which has the focus as a main container for the remaining properties. Since

its beginning, the World Wide Web is facing a lot of difficulties and challenges such like the

performance issues.

This essay aims to state all of the current performance difficulties that are facing web-based

computer systems. This can be done through dividing those difficulties according to the technology

that was used in the web. Moreover, we demonstrate a number of suggestions and improvements

that may increase the web performance in order to reach its ideal usage.

In addition, those suggestions will be implemented in a real use case, and we chose the “Mofadalah”

web-based system at the ministry of health in Syrian Arab Republic as an environment for our use

case.

Keywords: Web-based applications – Performance – HTML – CSS – JavaScript – Ajax – Server Side

basselk@scs-net.org جامعة دمشق –أستاذ مساعد في كمية اليندسة المعموماتية *

الجامعدددة –أعدددد ىدددذا البحدددث فدددي سدددياق رسدددالة الماجسدددتير لممينددددس محمدددد القدددواص فدددي برندددام ماجسدددتير عمدددوم الدددوب ** mouhamadkawas@gmail.comاالفتراضية السورية

* professor assistant at faculty of information technology engineering – Damascus University.

Email: basselk@scs-net.org

** This paper was conducted in the context of the master thesis of Eng. Mouhamad Kawas in

the program of MWS – Syrian Virtual University. Email: mouhamadkawas@gmail.com

2/14

مقدمة-1من سيولة نقل المحتويات وتسريع عممية العرضعتبر تُ

حيث ،في صفحة الوب األمثمي األداء محدداتأبرز في ،موقعالنجاح أىم عوامل ن سرعة العرض ىي أ

.جذب المستخدمين وزيادة األرباح ،Broadband مع االنتشار الكبير لمحزمة العريضةو

غير السرعة الكبيرة ياالتصال ذ ومستخدم أصبح يتّم تحميلثوان كي 01إلى 8مدة النتظار ل ستعدينم

ال يممك ،لمبرم اليومإن اف لذلك. [1]صفحة الوبال فإنلتحقيق زمن االستجابة ثوان 4إلى 3 سوى ووا

. زوار الموقعخاطر بخسارة ي اً غرض 55تحمل أكثر من صفحة الوباليوم أصبحتيحًا تتطمب تصر و ، وسطياً External Objects اً خارجي

رؤوس عنيا في بداية صفحة الوب، باستخدام مايسمى ب ريبشكل كب التي تؤثر Object Overheads األغراض

. زمن االستجابةعمى ، يجب عمى الحصول عمى األداء األفضلبيدف و

المبرم اتباع مبدأ التقميل من طمبات بروتوكول نقل من أىم عدّ الذي يُ ، و HTTPالنصوص الترابطية

والميارات التي يجب عمى مبرمجي الوب الخطوات عمى جاذبية صفحة ، بنفس الوقت،اتباعيا، مع الحفاظ

الوب وجماليتيا.

القضايا األساسية حول مشاكل بطء الوب-2

عدم رضى الزبون -2-1عندما مكن لموقع الوب أن ينال رضى الزبونال يُ

دون ،ثوان 05ة أكثر من حصفالتستغرق عممية تحميل أقل الحزمة العريضة أن مستخدمي كما ذكر. أي رد ي

لمسألة البطء في تحميل الصفحة من مستخدمي الً تحم . Narrowband الحزمة الضيقة

JupiterResearchوفي استطالٍع أجري عمى موقع من مستخدمي شبكة الحزمة العريضة %33تبين أن

ثوان حتى 4غير راضين عن فكرة االنتظار ألكثر من من %43 فإنّ وبالمقابل ،ةتتم عممية تحميل الصفح

أكثر ارنتظلالمستخدمي الحزمة الضيقة غير مستعدين .[2]يثوان 6من عمى أرباح الشركات السمبيالتأثير -2-2

بسيطة في سرعة تحميل الصفحة التغييرات ال تنعكسعمى أرباح ،واستجابة المخدم لطمبات زائر الموقع

ث ن لمركز أبحا، حيث تبيّ بشكل ممموس اتالشركنتائ بحث 05وب ذات الأن صفحة Googleجوجل

بينما تستغرق ليتم تحميميا، من الثانية 5.4تستغرق فترة األمر ، من الثانية 5.9نتيجة بحث 35صفحة وب ذات

اإلعالنية األرباحسمبًا عمى الذي من شأنو التأثير . وتبين لمركز األبحاث أيضًا [3]%05التجارية بنسبة

حجم الصفحة الرئيسية لخرائط جوجل عند تقميلأنو Google Maps ك.ب 85-75ك.ب إلى 055من،

اإلعالنية التجارية بنسبة األرباح نعكس إيجابًا عمى افي األسابيع %05 وبنسبةخالل األسبوع األول 05%

.[4]الثالثة الالحقةمجموعة من االختبارات عمى موقع أعطتوقد

Amazon 055كل ت أنحيث أظير ،نتائ مماثمة قمل من جزء من الثانية من وقت تحميل صفحة الوب يُ

.[5]%0عممية البيع بنسبة عدد مستخدمي الموقع-2-3صفحات الوب البطيئة من المصداقية وجودة قملتُ

فكمما .نعكس عمى رأي مستخدم الموقعىذا يو .األداءذلك غير منطقي أثر بشكل استجابة الموقع مدة زادتعمى الشركة المالكة لمموقع من و ، الزائر ى رضاعمسمبًا

رادات المالية.يحيث الزيارات واإلىناك عالقة كبيرة بين عدد مستخدمي الموقع عمميًا، عتبر السرعة العامل األكثر أىمية بعد حيث تُ ،وسرعتو

وقدرتو عمى شد انتباه المستخدم ،جاذبية تصميم الموقع .[6]ن بيدف زيادة عدد المستخدمي

3/14

يجب إظيار ،تزداد سرعة التصفحمكي ف ،بالتاليو المحتويات األكثر أىمية في صفحة الوب بأقل من ثانية

بمجرد أن يتعدى الزمن اإلجمالي لتحميل و أو ثانيتين. ضيف عمى الموقع أن يُ ف ،ثوان 8إلى 6صفحة الوب

Linear كالتغذية الخمفية الخطية مؤشرات تحميل معينة

Feedback ُمريحًا ويجعمو طي لمزائر انطباعاً عحتى ي ينتظر فترًة أطول.يقبل أن

االنطباع األولي لمزبون-2-4

انطباع أولي سريع بأخذ يقوم زائر الموقع بشكل عام 1/20وسطيًا وىذا االنطباع الذي يستغرق ،الموقع نع

من الثانية سيستمر بشكل دائم بالنسبة ليذا الزائر. حيث أن Noam Tractinskyأجراىا يالت دراساتالمن تبين بعد عرضيا لمدة الوب الوسطي لجاذبية صفحة التقويم

تمّ الذي لمتقويم مطابقاً كان ،ال تتجاوز نصف الثانيةأصبح من الواضح أنو ليس ،ثوان. لذلك 01بعد أخذه

ضفي لدى صاحب الموقع سوى وقت قصير جدًا ليُ .[7]طابعًا أوليًا جمياًل عمى موقعو

مو حجم صفحة الوبن-2-5

بشكل حجم صفحة الوب خالل السنوات الماضية انممن بشكل وسطي صفحة الوب حجم فقد ازداد .ممحوظمرة، أي من 2.2أكثر من اليوم حتى 3112سنة ك.ب. وخالل الفترة 203ك.ب إلى أكثر من 72.9

واألدوات Objectsازداد عدد األغراض ،ذاتيا أيضاً ، صور ،لوب )كممفات إضافيةالمضافة إلى صفحة ا

، إخطاطات جافاCSS وريقات أسموب متشمِشلJavaScript إلى 9..3( بنسبة تقارب الضعف من

.[8] [9]في الصفحة الواحدة غرض 47.7من قميالً اً عدد تحوي وعندما كانت صفحة الوب

كان حجم صفحة الوب ىو العامل الرئيسي ،األغراضعدد األغراض زيادةمع و إال أنوستجابة. اال في مسألة

موضوع تأخير أصبح ،في صفحة الوب الواحدة الصفحة بحدرؤوس األغراض )وليس ب متعمقاً االستجابة

سبب األكبر لموضوع التأخير الاليوم عتبر ( والذي يُ اذاتي .[10]في االستجابة

وقت االستجابة األعظمي-2-6عانى مستخدمو الحزمة وبسبب نمو حجم صفحة الوب،

( من بطء ممحوظ في 56KB، ISDNضيقة )المستخدمي شبكات كان بمقدوربالمقابل و االستجابة.

الحزمة العريضة التصفح بسرعة أكبر.االزدياد في معدل السرعة لشبكات الحزمة كما أن

العريضة كان أسرع من االزدياد في الحجم والتعقيد وفإن وبالتاليالنات عن صفحة الوب متوسطة األداء.

سرعة امستخدمي الحزمة العريضة أن يتوقعو لحق ي .االستجابةأكبر في باستخدام النظرية التالية Keynoteشركة كينوت تنصح

االستجابة من أجل عمميات االتصال ذات زمنل سرعات متفاوتة:

3 ثوان لمشبكات الخاصة بالشركات 2إلى، أو المنازل التي لدييا سرعة وجودة عالية.

2 شبكات ن لثوا .إلىDSL.

31 ثانية لشبكات الياتف 21إلىDial Up .ثانية 31ك.ب كل 011أي بما يقابل

إن ىذه التوصيات قابمة لمتطبيق عمى صفحات الوب يتنقل حيث ،مواقعمالرئيسية أو الصفحات األولى ل

ىناك بعض ولكن . المستخدم عادًة بسرعة أكبرالمستخدم بالنسبة لمصفحات التي يودف ،ستثناءاتاال

إن ف مثاًل، كصفحة خبر معين ،أخذ وقتو في تصفحياكما ،لممستخدم قد يكون مزعجاً مثل ىذه الصفحة تقسيم

المستخدم اىتمامإن ،صعب عممية البحثي قديجعمو مستعدًا لتحمل المشاكل الموجودة قد بالموضوع

.الصفحة في

4/14

التحسينات المقترحة ألداء صفحات الوب-3مكن من اإلجراءات والتعديالت التي يُ ىنالك الكثير

. فمثاًل األداء تحسينتطبيقيا عمى صفحة الوب بيدف ع من عممية التصفح في الموقع سرّ مكن لممبرم أن يُ يُ

من خالل عرض محتويات الصفحة وتأخير عرض المحتويات الخارجية ورؤوس األغراض قدر اإلمكان،

كما يجب .Streamliningوىذا ما يسمى باإلنسيابية اعتماد بعض القواعد والمبادئ، كالتقميل من طمبات بروتوكول نقل النصوص الترابطية، واستخدام وريقات األسموب المتشمشل بشكل مناسب لعرض البيانيات

بشكل Graphics & Multimediaوالوسائط المتعددة أمثمي ومناسب لخصوصية صفحة الوب.لغة تأشير از رمإن إعادة بناء صفحة الوب وتعديل

في زيادة سرعة يسيملمصفحة HTMLالنص الترابطي األساليبالموقع، وذلك عن طريق حذف الواصفات و

، والتأكد من خمو الصفحة من Inline Styleالداخمية التقميل من سرعة تؤدي إلىأي عنصر مكتوب بطريقة

ات وريقات األسموب انالموقع. كما أن استخدام تقمثل ،بشكل كبير في تحقيق ىذا اليدف سيميُ المتشمشل

الخاصة بمغة لرمازااالستغناء عن بعض العناصر الخاصية تأشير النص الترابطي كالعناصر ذات

الرمازتجريد ، و Table-Based Elements الجدوليةعادة صياغتيا األسموب تحويل ، و من التصميم وا

إلى أساس قواعدي Embedded Style ضم نالمُ Rule-Based ُوريقات أسموب متشمشل خارجي. ف بعرّ م

يجب التصريح عن وريقات ،وكما ىو متعارف عميواألسموب المتشمشل المستخدمة أعمى صفحة لغة تأشير

، Body Codeالنص الترابطي أي قبل رماز المتن من األفضل وضعيا عمى عكس إخطاطات جافا التي

في نياية رماز المتن.لة التقميل من طمبات بروتوكول من الميم أيضًا محاو و

نقل النصوص الترابطية، ويتم ذلك باتباع بعض

في Spritesو Spacingالقواعد، كاستخدام تعميمات وريقات األسموب المتشمشل، لدم الممفات وتحويل

عال من يُ إلى نص Graphical Textالنص الصوري قبل وريقات األسموب المتشمشل، واستخدام الخرائط

تحسين صور أو لوان لمخمفية، ومحاولة األورية و الص التخبئة ثم تفعيل عممية الوسائط المتعددة،ممفات

Caching المستديمة األغراضمن أجل Persistent

Objects مختمفة لمتقميل من مخّدماتوتوزيعيم عمىبرتوكول نقل النصوص ضغط ًا،وأخير . مشاكل التأخير

% من حجم ممفات .9لمتخمص مما يقارب ،ةالترابطيووريقات األسموب لغة تأشير النص الترابطي،رماز

خطاطات جافاو المتشمشل، .ا اتباعيا لرفع أداء صفحات التي نرى وفيمايمي الخطوات

الوب:

التحسينات المقترحة عمى مستوى صفحة الوب-3-1التقميل من عدد الطمبات الصادرة عن -3-1-1

ل النصوص الترابطيةبرتوكول نق عتبر طمبات برتوكول نقل النصوص الترابطية عامالً تُ

في التأثير عمى سرعة صفحة الوب، لذلك يجب اً أساسيما يتطمب تقميل عدد م .التقميل منيا قدر اإلمكان

التي ىي عبارة و راض المميزة والفريدة في الصفحة األغعن طمب من نوع برتوكول نقل النصوص الترابطية،

ياب إلى يستمزم والذي وكمما زاد .المخّدمرحمة ذىاب وا عندما يكون عدد األغراض زاد التأخير في االستجابة، و

رؤوس األغراض فإن ،أكثر من أربعة غراضعدد األ عمى زمن تحميل الصفحة. سيطرتُ

في صفحة الوب غراضعدد األوبالتالي فإن تقميل من ن العمل عمى لدورا الالزمة الطمبات عددسيقمل من

رؤوس وىكذا سيقل الثقل الناجم عن ،الصفحةالذي ينعكس بدوره عمى سرعة عمل و غراض،األ

ىذه الطمبات.اعمية فويزيد من ،الصفحة

5/14

مكن اتباع مايمي لمتقميل من طمبات برتوكول نقل يُ النصوص الترابطية

تحويل النصوص الصورية إلى نصوص نمطية أو العناوينمن أجل عادًة ستخدم النصوص الصورية تُ

ال اليوم ولكن حتى ،القوائم لتخزين مظير معينة النص المدم بالصور. ءتستطيع محركات البحث قرا

طمبات إضافية غير ضرورية. لذلكمما يضطرنا إلى ق يلتنس وريقات األسموب المتشمشلم استخدا ينبغي

العناوين والقوائم. نصية تراكباتم ااستخدText Overlays

ر في بعض األحيان من استخدام صور تحوي نضط، وىذا ما يزيد من حجم الصور. لذلك يجب أن اً نصوص

نعزل الصورة عن النص المرتبط بيا باستخدام وريقات ع من فترة استجابة المخدم.سرّ األسموب المتشمشل، مما يُ

إلى ىوامش الفراغات الصورية بين الخاليا تحويلMargins حشوأو Padding

عمى استخدام صور صغيرة األبعاد وند اعتاد المبرمجلقبيدف وضع فراغات بيضاء داخل تصميم الموقع. يجب استبدال كل الفراغات البيضاء الخاصة بالتصميم، لتصبح عمى مستوى وريقات األسموب المتشمشل

باستخدام تعميمات اليوامش والحشو. استخدام تعميمةدمج الصور و Sprite طمبات التي تحتاجيا صفحة الوب العدد ل يمكن تقمي

من خالل دم الصور المتقاربة وجعميا صورة واحدة أو Image mapاستخدام خرائط الصور مركبة ثم

.كبديل عن عدة طمبات Spriteتعميمة وريقات األسموب المتشمشلدمج وتحسين خطاطات جافاو ا

بإنشاء أكثر يقومون الذين يوجد العديد من المبرمجين استخدام ومن ثم مختمفة من وريقة أسموب متشمشل

وتكمن حسب الحاجة. بفي صفحاتيم الوريقة المطموبة

تحتاج إلى طمبات بأن ىذه الطريقة المشكمة ىنا .إضافية

إخطاطات جافاأو وريقات األسموب المتشمشلربط

برتوكول نقل وىي طريقة مماثمة لعممية تقميل طمبات وريقات م من خالليا دم يتو النصوص الترابطية، ،الخارجية تمقائياً إخطاطات جافاأو األسموب المتشمشل

المخّدم وىذا ما وذلك عن طريق ربطيم ببعض عمى .Suturingيسمى بدتخييط األغراض

الخبءتخزين الممفات الديناميكية في صفحةالأعمى في رأسية عناوينإضافة ممبرم ل مكنيُ

مما يسمح بتخزين بية،تيدف إلى تفعيل عمل الخاالستخداميا الحقًا دون الحاجة لطمبيا من الممفات المخدم.

اإلطارات التخمص من (i)Frames

% من صفحات 3.أكثر من اإلطارات في ستخدم تُ تستخدم عادة من أجل عرض اإلعالنات ، و الوب

أداء صفحات الوب ألنيا في مما يسبب ُبطئاً التجارية تتطمب وفي بعض األحيان ،باتطمالتفرض المزيد من

.عمل صفحات وب بأكمميا بداخل صفحات أخرى

وتحسينو تغيير حجم الصور-3-1-2الكاميرات الرقمية اليوم لزيادة الدقة في يطمح مصنعو

، مما أدى إلى زيادة أحجام الصور بشكل جعل الصورةإعادة تعديل حجم يجب لذلك. لموبمنيا غير مناسبة

المناسبة لمعرض األبعاد المثالية الصور لتصل إلى عمى صفحات الوب.

الوسائط المتعددةتحسين -3-1-3قسمًا صغيرًا فقط من طمبات الوسائط المتعدةن كو تُ

لحركة التدفقية عمى ا تشغل حيزًا كبيرًا منالمخّدم ولكنيا القيام بالعمميات التالية من أجل تحسين ننصح ب، الشبكة

الوسائط المتعددة.

6/14

ين الفيديو من أجل الوبتحس

يجب ،الوب إلجراء التحسينات المناسبة لمفيديو عمىصغيرة من و ،ياعممزمن أن تكون قصيرة في ضمان

Codec كوِدك ومعدة من قبل مجموعة ،حيث األبعاد المناسبة.

معدالت وأبعاد إطار الفيديو إن زيادة معدل اإلطارات، أي زيادة عدد اإلطارات في

،يد من مرونة الحركة لمصورة. من ناحية أخرىز ي الثانيةبيانات أكثر ُينت إن زيادة إطار واحد لمعدل اإلطار

إطار بالثانية 07%، أي أن معدل اإلطار )1.بمعدل fps ) عن معدل اإلطار 1.بيانات أكثر بمعدل ُينت %أظيرت معدالت اإلطارات وقد . (fpsإطار بالثانية 08)

قد قممت من إدراك fps .0 إلى 03أن ما يقل عن ن أصغر األبعاد كما أ. [11]المستخدمين لجودة الفيديو

.Pixels بكسل x 341 231كن استخداميا ىي مالم التقميل من الضجيج والحركة التقميل من حركة الكاميرا باستخدام قاعدة لمكاميرا -

إذا أمكن.

التقميل من حركة اليدف المراد تصويره. -

ن الضوء.استخدام الكثير م -

استخدام خمفية بسيطة. -

ودوران Zoom التبعيدو التقريب تفادي استخدام - العدسة.

استخدام أدوات محترفة. -

استخدام صيغ وأشكال رقمية. -

باإلمكان استخدام أداة ف ،فر قاعدة كاميرااإذا لم يتو -( أو http://www.ken-lab.comلمتثبيت التوازني )

.عدسات لمصور الثابتة

تعديل الفيديو تقميل األبعاد لتقابل معايير الوب. -

أمكن. إناستخدام معدل اإلطار األقل -

واضحة من الصور.ال غيرتقطيع الحواف -

باستخدام Video Noiseتقميل ضجي الفيديو - .Filtersالمرشحات

.Contrastتعديل المباينة في المون -

تنوع )من أجل Gamma االغام تعديل مستوى - (.Cross-platformالمنصات

استعادة األسود واألبيض. -

.Deinterlaceالتشابك -

لتتماشى مع نوع العمل الكودكاختيار أفضل أنواع - المراد فعمو.

وريقات إلى إخطاطات جافا رمازتحويل -3-1-4 المتشمشل األسموب

مستعممة بشكل واسع إخطاطات جافاأصبحت نصوص إخطاطات تستخدم و %.84.8نسبة تقارب ب وبفي المحتوى التحقق من ل ، مثالحاالتفي العديد من جافا

القوائم وانسيابية مرور و ،Form validation االستماراتكشف معمومات المتصفح، و ،Rolloverالمؤشر

والمزيد من تطبيقات، حصاءاتوتستخدم أيضًا في اإلوريقات األسموب باستخدامو المعقدة. Ajax أجاكس

أن يحصل عمىاليوم المبرم المتشمشل أصبح بإمكان .بفعالية أكبرات انعدد من ىذه التق

من Sniffingاالشتمام استخدام طريقة -3-1-5 جانب المخدم

عممية من أجل بشكل ممحوظ إخطاطات جافا ُتستخدم، من Browser Sniffingمعمومات المتصفح اشتمام

صدار وقدرتو عمى دعم بعض حيث النوع ورقم اإل ،إخطاطات جافاولكي نقمل من حمل ،لذلك التعميمات.

جانب المخدم. من تعميماتاستخدام المبرم عمى فمن أجل سرعة إخطاطات جافاحسين ت-3-1-6

وحجم الممف ذالتنفي إخطاطات جافابعد استبدال أكبر عدد ممكن من

برمجية لتقانات الاواستخدام وريقات األسموب المتشمشل ب

7/14

كما سنرى الحقاً يتوجب تحسين من جانب المخدم، متبقية لمتقميل من حجم الممف. ال إخطاطات جافا

،ألغراضلمختصرة أسماءالمبرم استخدام يستطيع Function names والوظائف ،Variablesالمتحوالت و

مكن لممبرم أيضًا . يُ Bytes اتلمتقميل من عدد البايتليذه العممية عن طريق استخدام اً آلي اً تنظيم مأن يستخدكر بشكل لتقوم باختصار ما ذُ w3compilerأداة كد

ة.ينصوص البرمجالوتحسين ،آلي Table Layoutتحويل التخطيط الجدولي -3-1-7

بوريقات األسموب المتشمشلإلى التخطيط المتعمق لتخطيط صفحة وريقات األسموب المتشمشل إن استخدام

صل بنسبة ت الرماز،حفظ كمية كبيرة من يؤمن وب الأواًل أن المبرم عمى لذلك ينبغي %. 1.إلى .3من

استخدامكان باإلمكان إنيمقي نظرة إلى صفحتو ليرى لتحاكي divs وأوامروريقات األسموب المتشمشل قوائم

استخدام تطبق عن طريق التأثيرات التي عادة ما .لالجداو

بقواعد الداخمياألسموب رماز استبدال-3-1-8 وريقات األسموب المتشمشل

عرض حفظ نيا تإجدًا، حيث ميمةعتبر ىذه العممية تُ قمل منتُ كما ،المتعمقة بالشبكة Bandwidth الحزمة

الوب صفحة ن تجريد إمشاكل عمميات الصيانة. حيث داخميأسموب تمثل بالبنية التأسيسية فقط واستبدال أي تل

ن يتحس في ساعديُ وريقات األسموب المتشمشل،بقواعد بشكل كمي. لغة تأشير النص الترابطيصفحة

تقميل الوقت البدائي لمعرض-3-1-9أن يطور من سرعة الموقع الخاص بو المبرم بإمكان

فائدة لمفت االنتباه يمن خالل تحميل شيء سريع وذ Weatherصفحة تظير، مثال. في البدء

Underground الرئيسية نموذج البحث المتعمق بحالة الجو بسرعة في الزاوية العموية اليسرى من الشاشة.

بحكمة إخطاطات جافاتشغيل -3-1-11

عتبر النصوص البرمجية الخارجية المرتبطة بصفحة تُ ألنيا تؤخر ،مضرة Header الترويسةالوب عن طريق

ن ىذه أل. ةالصفح متنعممية عرض محتويات متنات التي تحصل قبل تحميل محتويات التأخير

من شأنيا أن تؤدي إلى ىروب المستخدم. ،الصفحة

تحسين وريقات األسموب المتشمشل-3-2مع التصاريح Selectorsتجميع المنتقيات -3-2-1

Declarations المشتركة يسمح استخدام وريقات األسموب المتشمشل، بجمع عدد

، حيث نفسيا ريحاتالتصبمن المنتقيات التي تتشارك تسمح ىذه التقنية التحسينية بتطبيق التنسيقات ذاتيا

باستخدام عن بعض عمى عدة منتقيات منفصمة بعضيا فواصل، لحفظ مساحة أكبر.

مثال:.sitehead {

font-weight: normal; font-size:12px;

}

.sitenav {

font-weight: normal; font-size:12px;

}

صبح:ت.sitehead, .sitenav {

font-weight: normal; font-size:12px;

}

تجميع التصاريح مع المنتقيات المشتركة -3-2-2

ممبرم بجمع عدة تسمح وريقات األسموب المتشمشل لجموعة قاعدية مشترك داخل م تصاريح ذات ُمنتقٍ

واحدة، منفصمة عن األخريات باستخدام فاصمة عمى تطبيق عدد من منقوطة. وتساعد ىذه العممية

واحد فقط لحفظ المساحة. التصاريح عمى منتق

ثال:مbody { font-size: 1em; }

body{ color: #000; }

صبح:تbody{ font-size: 1em; color: #000; }

8/14

دمج التنسيقات المتشابية داخل صفوف-3-2-3Classes مشتركة

تسمح وريقات األسموب المتشمشل لممبرم بتجميع مثل تنسيقًا معينًا داخل ت التي تُ مجموعة من التصريحا

صف معين وبالتالي يمكن لممبرم استخدام ىذا الصف أكثر من مرة.

Inheritanceاستخدام خاصية الوراثة -3-2-4 لمتخمص من التصاريح المتكررة

لمنتقيات تأخذ امكن استخدام خاصية الوراثة وجعل يُ د ىذه ذلك حسب ورو و التصاريح التي تسبقيا قيميا من

بيذه الطريقة يتم و ،شجرة الصفحة المنتقيات داخللمتكررة. حيث يقوم العنصر التخمص من التصاريح ا

بتوارث الخصائص من العنصر األب إال إذا ذكر شيء خالفًا لذلك.

استخدام صيغ وريقات األسموب المتشمشل -3-2-5 المختزلة

،فمثالً .مكن لممبرم اختزال العديد من قيم التصاريحيُ عوضًا عن تحديد قيمة المون باستخدام الترميز الست

. ىناك rgbتخدام االختصار يمكنو اس rrggbbعشري اً أيضًا العديد من التصاريح األخرى التي تأخذ قيم

مختزلة كالخطوط والحواف واليوامش والحشو.وأسماء الصفوف IDاختصار أسماء التعريف -3-2-6

الطويمةكون أكثر فيمًا من إن األسماء الطويمة لمصفوف قد ت

ية ىذا األسموب في التسمإال أن ، قبل المبرمجينيضطرنا في النياية إلى تحميل بايتات إضافية )عمى األقل عند أول عممية تشغيل لوريقات األسموب

المتشمشل(.حديثة الاالستفادة من ميزات اإلصدارات -3-2-7

لوريقات األسموب المتشمشلوريقات األسموب من 2واإلصدار 3قدم اإلصدار

تقنية تحديد التصريحات التي ليا واصفات المتشمشل

متصفحات االنترنت الحديثة، معظم محددة، حيث إنالتي تسمح لمصممي الوب بأن تدعم ىذه التقنية

يستيدفوا عنصرًا لو صفة معينة، ويتم ذلك باستخدام الطرق األربعة التالية:

- [att]

- [att=val]

- [att~=val]

- [att |=val]

تحسين إخطاطات جافا-3-3 حذف تعميقات إخطاطات جافا-3-3-1

إخطاطات جافا المتعارف يمكننا حذف كل تعميقات ال تعطي أي قيم فيي. /* */أو //عمييا بالرموز

لممستخدم النيائي وتقوم فقط بزيادة حجم الممف. التعميقات الظرفية-3-3-2

يجب عمى المبرم أن يكون حذرًا اتجاه نظام التعميق والذي غالبًا ما Internet Explorerالظرفي الخاص بد

مدعومة من الص البرمجية غير يستخدم من أجل النصو قبل متصفح معين ألنيا ستزيد من حجم الممف

من األفضل استخدام تعميمات برمجية ومن َثمّ البرمجي، مدعومة من جميع المتصفحات.

في:التعميق الظر نظام عمى مثال <!--[if lt IE 7]> <script src="patch.js"

type="text/javascript" > </script> <![endif]-->

تقميل المساحات البيضاء-3-3-3عتبر إخطاطات جافا منصفة لقضية المساحات تُ

ىذه البيضاء إلى حد ما، وبإمكان المبرم أن يقمل المساحات بسيولة دون أن يؤثر عمى عمل الموقع.

استخدام التعميمات البرمجية المختصرة قدر -3-3-4 اإلمكان

بإمكان المبرم أن يستخدم عددًا من التعميمات الخاصة بإخطاطات جافا التي تكون مختصرة عن تعميمات

عوضًا عن ++xأخرى. مثاًل يمكن لممبرم استخدام x=x+1 العديد من التعميمات األخرى المختصرة.وىناك

9/14

ثابتة Strings سالسلاستخدام -3-3-5ستخدم تحوي قيمة نصية تُ سالسل مكن لممبرم تعريف يُ

بكثرة داخل الرماز، وبيذه الطريقة يستطيع استخدام اسم دون الحاجة إلى إعادة سالسل المتحول الذي يحوي

قمل كتابة القيمة النصية كمما احتاج إلييا، وىذا بالطبع يُ من حجم الممف.

تجنب كتابة تعميمات مستحيمة التنفيذ -3-3-6يجب عمى المبرم أن يكون حذرًا عند كتابة الرماز، من الوقوع في أخطاء منطقية. مثل كتابة تعميمات داخل

قطعة برمجية شرطية أو حمقة مستحيمة التحقق.فة عر تقصير أسماء المتحوالت والوظائف الم -3-3-7

لمستخدممن قبل امن أجل القدرة عمى القيام بقراءة جيدة، يقوم المبرم بتعريف متحوالت ليا أسماء تحمل دالالت واضحة، مما يقودنا إلى زيادة كبيرة في عدد من البايتات العديمة

عمى المبرم اختصار األسماء قدر اإلمكان.و األىمية. القيم االفتراضية-3-3-8

وظائف التي تأخذ قيمًا ىناك العديد من األنماط والافتراضية دون الحاجة إلى التصريح عنيا. وبالتالي عمى المبرم االستفادة من ىذه الميزة ليقمل من حجم الممف

.االمكانقدر كحل بديل Ajahجا أالنظر في استخدام -3-3-9

ولغات JSONو الجيسون RSSعن الـ أر إس إس الحاجة ليا عند XMLالتأشير الموسعة

متزامنة الغير من إخطاطات جافا ا ىو نمط مؤلف أجولغة تأشير النص الترابطي، بحيث يقوم المبرم بدفع الردود من المخدم بشكل مترجم عمى شكل لغة تأشير نص ترابطي عوضًا عن الجيسون ولغات التأشير

من ممايسرع ، رًة عمى الموقعوسعة، لعرضيا مباشالمعممية عرض المعمومات المطموبة من المخدم عمى

أجيزة المستخدمين.

تحسين أجاكس-3-4

ابل المشكمة تماما تطبيق أجاكس بما يق-3-4-1يقودنا إلى مجموعة من قد إن استخدام أجاكس

السمبيات، فبالرغم من صغر حجم الطمبات، فإن الذىاب إلى المخدم والعودة إلى الزبون قد يستغرق مدة طويمة.

من األفضل استخدام أجاكس عند الحاجة فقط، فلذلك .مدروسووبطريقة

وذات تصميم استخدام مكتبة أجاكس مدعَّمة -3-4-2 جيد

يجب عمى المبرم استخدام مكتبة تدعم الميزات التالية، :مثاليوذلك ليستفيد من ميزات أجاكس بشكل

اتصاالت أجاكس -

تسييالت في الوصول إلى العقد المطموبة في ممف - لغات التأشير الموسعة

تنظيم األحداث -

التأثيرات المرئية -من متطمبات طمب بروتوكول نقل التقميل -3-4-3

النصوص الترابطيةتبعًا لمواصفات بروتوكول نقل النصوص الترابطية، ال

مكن إرسال أكثر من طمبين إلى المخدم بآن معًا من يُ ، وعمى المبرم أخذ ىذه المشكمة نفسو المتصفح

بالحسبان عن طريق التقميل من متطمبات الطمب قدر اإلمكان لتسريع العمل.

اختيار أنماط البيانات بشكل صحيح قبل -3-4-4 اإلرسال

قد تكون طمبات أجاكس صغيرة، ولكن ىناك بكل تأكيد اختالفات في الحجم بين أنواع األنماط التي تمثل بيا البيانات. فعمى المبرم أخذ الحذر من أنواع االنماط

المستخدمة عند اإلرسال.

10/14

توظيف ذاكرة وسطية خاصة بإخطاطات-3-4-5 جافا

مكن لممبرم تعريف مصفوفة تحوي الطمبات التي يُ ف عرّ تحتاجيا صفحتو من األجاكس، وبالمقابل يُ

مصفوفة لحفظ الردود الواردة من المخدم وبيذه الطريقة مكنو أن يسترجع الردود عند الحاجة إلييا. يُ التأكد من معالجة مشاكل أداء الشبكة-3-4-6

بقات السبع الخاصة يجب بناء طبقة ثامنة فوق الطالتي تيدف ، [12]ببروتوكول نقل النصوص الترابطية

إلى معالجة األخطاء الناجمة عن عدم االستجابة المتوقعة من برمجية أجاكس.

Server Side من جانب المخدم تحسينال-3-5 Parallelتحسين طرق التحميل المتوازية -3-5-1

Downloads ل النصوص من بروتوكول نق1.1 ينصح اإلصدار

الترابطية بأن تقوم المتصفحات بتحديد كميات الطمبات يجب عمى فعمى األكثر. مبين بنفس الوقت طإلى

المبرم في بعض األحيان وخاصة عندما تكون يالطمبات مخصصة لمصور باستخدام البروتوكول ذ

الذي يسمح بالتحميل المتوازي ألي عدد 0.1اإلصدار كان من الطمبات.

DNSنظام اسم النطاق تقميل مقابالت-3-5-2

Lookups يقوم نظام اسم النطاق بمقابمة األسماء بعناوين

، كما يعطي ميزة قابمية النقل IPبروتوكول اإلنترنت لتحول إلى المجال من خالل السماح لممواقع با ألسماء

مخدمات جديدة مع عناوين بروتكول إنترنت مختمفة، تغرق نظام اسم بدون تغيير أسماء المخدم التابع ليا. يس

من الثانية لمبحث عن اً جزء 031-31النطاق عادة كول إنترنت لكل اسم مخدم، ويتوجب عمى و عنوان بروت

المتصفح أن ينتظر نظام اسم النطاق لكي يقوم بإيجاد كول إنترنت قبل الشروع بتحميل و العنوان المقابل لبروت

عناصر الصفحة. لذلك، فإن تقميل عدد أسماء المخدم صفحة سيقوم بتقميل الضغط الناجم عن عمميات لكل

مقابمة نظام اسم النطاق. ضغط بروتوكول نقل النصوص الترابطية -3-5-3

إن ضغط بروتوكول نقل النصوص الترابطية ىي طريقة معرفة بشكل عمني لضغط المحتويات النصية المنقولة

. تستخدم عممية ضغط بروتوكول من مخدمات الوبقل النصوص الترابطية خوارزميات ضغط ذات ن

ضغط تل، Compressو GZipمجاالت عمنية، كد .يفات ذات األساس النصع أنواع الممجمي Deltaعممية تشفير دلتا -3-5-4عتبر عممية تشفير دلتا كطريقة لتحديث صفحات الوب تُ

من خالل إرسال االختالفات بين إصدارات صفحة في الصفحة منذ وم المخدم بإرسال االختالفات الوب. يق

اًل بذلك كمية البيانات المرسمة في الوصول األخير، مقم بروتوكوالت النقل.

إعادة كتابة عناوين المصادر عمى اإلنترنت -3-5-5URIs باستخدام تقنيةmod_rewrite

مكن لممبرم استخدام ىذه التقنية ليختزل من عناوين يُ نترنت، وبيذه الطريقة سيوفر عددًا المصادر عمى اإل

من البايتات، كما أنو سيجعل من عناوينو صديقة لمحركات البحث.

كترونية في وزارة الصحةإللمفاضمة االنظام -4وىو نظام متكامل خاص بمفاضمة وزارة الصحة في الجميورية العربية السورية، يسمح بإجراء جميع عمميات

ت المفاضمة وانتياًء المفاضمة بدءًا من إدخال بطاقاتسمح حيث ديناميكيًا اً عد نظامبإصدار النتائ . ويُ

إعدادات النظام ضمنو بتعريف حقول جديدة ُيمكن أن تضاف كالوثائق المرفقة و تعديالت العالمات المختمفة.

عديدالاستخدامو في تركيب النظام في الوزارة وتمّ وقد تمّ

11/14

تطبيق الخطوات من المفاضالت وخالل فترة عممو تمّ السابقة في عممية تحسين أدائو وقياس نسب األداء.

نظام المفاضمة االلكترونية في وزارة الصحة -0الشكل

تطبيق التحسينات عمى النظام-5خالل العمل عمى بناء النظام، تطبيق التحسينات تّم،

والنصائح المذكورة أعاله، ونبين فيما يمي ما توصمنا إليو:

قبل القيام بالتحسينات -0الشكل

طمبيا ممفات الصفحة الرئيسية التي تمّ 3ُيظير الشكل مراعاة قبل مع حجم كل ممف والوقت الالزم لتحميمو.

قواعد تحسين األداء. من المالحظ أن عدد إخطاطات ، وعدد 8ووريقات األسموب المتشمشل ىو 01الجافا ىو

ميغا 0.3مف ، والحجم الكمي لمماً طمب 4.الطمبات ىو ثانية. 14..0بايت، والزمن الكمي المستغرق

تحسينات عمى مستوى األغراض الخارجية -2الشكل

التي تقوم الخطوة األولى من التحسين 2شكل يظير العمى حذف المساحات البيضاء من إخطاطات جافا عادة كتابة المتحوالت ووريقات األسموب المتشمشل وا

حارف المستخدمة، مع حذف بشكل يقمل من عدد المالتعميقات المساعدة في مرحمة التطوير، كل ىذه المساحات ىي عبء إضافي عمى التحميل يجب التخمص منو وبذلك تصبح أحجام الممفات أصغر من

ميغا بايت 0الحجم األصمي وأصبح الحجم الكمي ثانية. 04.7والزمن الكمي المستغرق

تبعد إجراء التحسينا -4الشكل

ضم إخطاطات جافا في ممف واحد وضم وريقات وبعد األسموب المتشمشل بممف واحد نالحظ أن الممف المطموب يمكن أن يتم تحميمو بطمب واحد لممخدم وال نرىق المخدم بطمبات يمكن تجنبيا. كما أن أىم العمميات الالزم إتباعيا لتحسين أداء صفحة الوب ىي

افا إال عندما يكون عدم طمب األجاكس أو إخطاطات جىناك حاجة لمطمب ألن ذلك من شأنو تقميل عمميات

، طويالً اً الطمب واإلستجابة التي عادة ماتأخذ زمنوالزمن الكمي المستغرق اً طمب 28وأصبح عدد الطمبات

.4كما ُيبين الشكل ثانية .7.1نظام نسب التأثير عمى أداء .يبين الشكل تالي وبال

في حال قمنا بالتركيز عمى لصحةي وزارة افالمفاضمة حيث ساىمت عممية ور من النصائح السابقة،ربع محاأ

أما عممية ،%48تصغير حجم ممفات الرأس بنسبة % وعمميات .0ضم الممفات الرماز فقد ساىم بنسبة

عادة ىيكمة %39معالجة الوسائط المتعددة بنسبة وا %.01الرماز بنسبة

12/14

10%

15%

27%

48%

النسب المؤثرة في تسريع الموقع

تصغير حجم ممفات الرأس

ضم ممفات الجافا سكربت والستايل في ممفين

تصغير الصور وضغط لوسائط المتعددة

إعادة سياق الجافا سكربت ومراعاة الطمب عند الحاجة

مختارة من قائمة ات تحسين ةنسب االستفادة من أربع -.الشكل التحسينات

النتيجة-6المشاكل التي تواجو ا البحثخالل ىذ فيعرضنا

، وعرضنا األنظمة البرمجية التي تعمل عمى بيئة الوبمجموعة من التوصيات والتحسينات الواجب اتباعيا في

وقمنا بتطبيق ىذه التوصيات عمى نظام ، مرحمة البرمجةفي الجميورية العربية المفاضمة الخاص بوزارة الصحة

بيدف رفع أداء عممو عمى شبكة الوب. السورية

المراجع-7[1] Bouch, A. et al. 2008. ―Quality is in the

Eye of the Beholder: Meeting Users’

Requirements for Internet Quality of Service.‖

In CHI 2008 (The Hague, the Netherlands:

April 1–6, 2008)

[2] Akamai. June 2006. ―Retail Web Site

Performance: Consumer Reaction to a Poor

Online Shopping Experience.‖ Akamai

Technologies, http://www.akamai.com

[3] Linden, G. November 6, 2011. ―Marissa

Mayer at Web 3.0.

[4] Farber, D. November 9, 2011. ―Google’s

Marissa Mayer: Speed Wins.‖

[5] Kohavi, R., and R. Longbotham. 2007.

―Online Experiments: Lessons Learned.‖

[6] Skadberg, Y., and J. Kimmel. 2009.

Computers in Human Behavior

[7] Tractinsky, N. et al. 2006. International

Journal of Human-Computer Studies

[8] Domenech, J. et al. 2007. "A user-focused

evaluation of web prefetching algorithms."

[9] Flinn, D., and B.Betcher.

http://www.websiteoptimization.com/secrets/p

erformance/survey.zip

[10] Yuan, J. et al. 2005. ―A More Precise

Model for Web Retrieval.‖

[11] Gulliver, S., and G. Ghinea. 2006.

―Defining User Perception of Distributed

Multimedia Quality.‖ ACM Transactions on

Multimedia Computing, Communications and

Applications

[12] Zimmerman, H. 1980. ―OSI Reference

Model—the IS0 Model of Architecture for

Open Systems Interconnection.‖ IEEE

Transactions on Communications

13/14

مسرد المصطمحات-8

Sniffing شتماماال

Browser Sniffing اشتمام معمومات المتصفح

JavaScript إخطاطات جافا

Frames طاراتاإل

Streamlining نسيابيةاإل

Ajah أجا

Ajax أجاكس

RSS أر إس إس

Rule-Based أساس قواعدي

Function names أسماء الوظائف

Objects غراضاأل

Persistent Objects أغراض مستديمة

Bytes بايتات

IP بروتوكول اإلنترنت

HTTP بروتوكول نقل النصوص الترابطية

Pixels بكسل

Graphics بيانيات

Parallel Downloads تحميل متوازية

Caching تخبئة

Table Layout تخطيط جدولي

Suturing دتخييط األغراض

Text Overlays تراكبات نصية

Header ترويسة

Deinterlace تشابك

Declarations تصاريح

Form validation صحيح محتوى االستمارات االلكترونيةت

ID تعريف

Linear Feedback تغذية خمفية خطية

Cross-platform تنوع المنصات

Server Side جانب المخدم

JSON جيسون

Narrowband حزمة ضيقة

Broadband حزمة عريضة

Padding حشو

Image map خرائط الصور

Delta دلتا

14/14

Body code رماز المتن

Object Overheads رؤوس األغراض

Zoom زوم

Classes صفوف

Video Noise ضجي الفيديو

Embedded Style طراز مضم ن

Inline Style طرازات داخمية

Bandwidth عرض الحزمة

Table-Based Elements عناصر ذات خاصية جدولية

URIs عناوين المصادر عمى اإلنترنت

Gamma غاما

External Objects غرض خارجي

Codec كوِدك

XML لغات التأشير الموسعة

HTML لغة تأشير النص الترابطي

Contrast مباينة في المون

Variables متحوالت

Strings متواليات

Filters مرشحات

Rollover مرور المؤشر

Selectors منتقيات

Graphical Text نص صوري

DNS lookups نظام اسم النطاق

Margins ىوامش

Inheritance وراثة

CSS وريقات أسموب متشمِشل

Multimedia وسائط المتعددة