SlideShare una empresa de Scribd logo

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

•
•
Mouhamad Kawas
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.

Educación
1 de 14
Descargar para leer sin conexión
‫د اسة الطرق المثمى لتحسين أداء تطبيقات الوب‬ ‫ر‬ 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
‫غير اضين عن فك ة االنتظار ألكثر من 4 ثوان حتى‬ ‫ر‬ ‫ر‬ ‫1-مقدمة‬ ‫تتم عممية تحميل الصفحة، وبالمقابل فإن 34% من‬ ‫ّ‬ ‫تُعتبر سيولة نقل المحتويات وتسريع عممية العرض من‬ ‫مستخدمي الحزمة الضيقة غير مستعدين لالنتظار أكثر‬ ‫أبرز محددات األداء األمثمي في صفحة الوب، حيث‬ ‫من 6 ثواني]2[.‬ ‫أن عة العرض ىي أىم عوامل نجاح الموقع، في‬ ‫سر‬ ‫2-2-التأثير السمبي عمى أرباح الشركات‬ ‫جذب المستخدمين وزيادة األرباح.‬ ‫تنعكس التغيي ات البسيطة في عة تحميل الصفحة‬ ‫سر‬ ‫ر‬ ‫ومع االنتشار الكبير لمحزمة العريضة ‪،Broadband‬‬ ‫واستجابة المخدم لطمبات ائر الموقع، عمى أرباح‬ ‫ز‬ ‫عة الكبي ة غير‬ ‫ر‬ ‫أصبح مستخدمو االتصال ذي السر‬ ‫الشركات بشكل ممموس، حيث تبين لمركز أبحاث‬ ‫ّ‬ ‫مستعدين لالنتظار مدة 8 إلى 10 ثوان كي يتم تحميل‬ ‫ّ‬ ‫جوجل ‪ Google‬أن صفحة الوب ذات 50 نتائ بحث‬ ‫صفحة الوب]1[. لذلك فإن المبرم اليوم، ال يممك‬ ‫تستغرق فت ة 4.5 من الثانية ليتم تحميميا، بينما تستغرق‬ ‫ر‬ ‫سوى 3 إلى 4 ثوان لتحقيق زمن االستجابة واال فإنو‬ ‫صفحة وب ذات 53 نتيجة بحث 9.5 من الثانية، األمر‬ ‫يخاطر بخسا ة زوار الموقع.‬ ‫ر‬ ‫الذي من شأنو التأثير سمباً عمى األرباح اإلعالنية‬ ‫أصبحت اليوم صفحة الوب تحمل أكثر من 55 غرضاً‬ ‫التجارية بنسبة 50%]3[. وتبين لمركز األبحاث أيضاً‬ ‫ا‬ ‫خارجياً ‪ External Objects‬وسطياً، وتتطمب تصريح ً‬ ‫أنو عند تقميل حجم الصفحة الرئيسية لخ ائط جوجل‬ ‫ر‬ ‫عنيا في بداية صفحة الوب، باستخدام مايسمى برؤوس‬ ‫‪ Google Maps‬من 550 ك.ب إلى 57-58 ك.ب،‬ ‫األغ اض ‪ Object Overheads‬التي تؤثر بشكل كبير‬ ‫ر‬ ‫انعكس إيجاباً عمى األرباح اإلعالنية التجارية بنسبة‬ ‫عمى زمن االستجابة.‬ ‫ع األول وبنسبة 50% في األسابيع‬‫50% خالل األسبو‬ ‫وبيدف الحصول عمى األداء األفضل، يجب عمى‬ ‫الثالثة الالحقة]4[.‬ ‫اتباع مبدأ التقميل من طمبات بروتوكول نقل‬ ‫المبرم‬ ‫وقد أعطت مجموعة من االختبا ات عمى موقع‬ ‫ر‬ ‫النصوص الت ابطية ‪ ،HTTP‬والذي يعد من أىم‬ ‫ُ ّ‬ ‫ر‬ ‫مماثمة، حيث أظيرت أن كل 550‬ ‫‪ Amazon‬نتائ‬ ‫الخطوات والميا ات التي يجب عمى مبرمجي الوب‬ ‫ر‬ ‫ء من الثانية من وقت تحميل صفحة الوب يقمل من‬ ‫ُ‬ ‫جز‬ ‫اتباعيا، مع الحفاظ، بنفس الوقت، عمى جاذبية صفحة‬ ‫عممية البيع بنسبة 0%]5[.‬ ‫الوب وجماليتيا.‬ ‫2-3-عدد مستخدمي الموقع‬ ‫2-القضايا األساسية حول مشاكل بطء الوب‬ ‫تُقمل صفحات الوب البطيئة من المصداقية وجودة‬ ‫2-1-عدم رضى الزبون‬ ‫األداء. وىذا ينعكس عمى أي مستخدم الموقع. فكمما‬ ‫ر‬ ‫ال يمكن لموقع الوب أن ينال رضى الزبون عندما‬ ‫ُ‬ ‫ادت مدة استجابة الموقع بشكل غير منطقي أثر ذلك‬ ‫ز‬ ‫تستغرق عممية تحميل الصفحة أكثر من 50 ثوان، دون‬ ‫سمباً عمى رضا ال ائر، وعمى الشركة المالكة لمموقع من‬ ‫ز‬ ‫أي رد يذكر. كما أن مستخدمي الحزمة العريضة أقل‬ ‫حيث الزيا ات واإلي ادات المالية.‬ ‫ر‬ ‫ر‬ ‫تحمالً لمسألة البطء في تحميل الصفحة من مستخدمي‬ ‫عممياً، ىناك عالقة كبي ة بين عدد مستخدمي الموقع‬ ‫ر‬ ‫الحزمة الضيقة ‪.Narrowband‬‬ ‫عة العامل األكثر أىمية بعد‬‫عتو، حيث تُعتبر السر‬‫وسر‬ ‫ي عمى موقع ‪JupiterResearch‬‬‫وفي استطالع أجر‬ ‫ٍ‬ ‫جاذبية تصميم الموقع، وقدرتو عمى شد انتباه المستخدم‬ ‫تبين أن 33% من مستخدمي شبكة الحزمة العريضة‬ ‫بيدف زيادة عدد المستخدمين ]6[.‬ ‫41/2‬
‫ع التأخير‬‫ذاتيا) والذي يعتبر اليوم السبب األكبر لموضو‬ ‫ُ‬ ‫وبالتالي، فمكي تزداد عة التصفح، يجب إظيار‬ ‫سر‬ ‫في االستجابة]01[.‬ ‫المحتويات األكثر أىمية في صفحة الوب بأقل من ثانية‬ ‫2-6-وقت االستجابة األعظمي‬ ‫أو ثانيتين. وبمجرد أن يتعدى الزمن اإلجمالي لتحميل‬ ‫وبسبب نمو حجم صفحة الوب، عانى مستخدمو الحزمة‬ ‫صفحة الوب 6 إلى 8 ثوان، فعمى الموقع أن يضيف‬ ‫ُ‬ ‫الضيقة (65‪ )ISDN ،KB‬من بطء ممحوظ في‬ ‫مؤش ات تحميل معينة كالتغذية الخمفية الخطية ‪Linear‬‬ ‫ر‬ ‫االستجابة. وبالمقابل كان بمقدور مستخدمي شبكات‬ ‫‪ Feedback‬حتى يعطي لم ائر انطباعاً مريحاً ويجعمو‬ ‫ز‬ ‫ُ‬ ‫الحزمة العريضة التصفح عة أكبر.‬ ‫بسر‬ ‫يقبل أن ينتظر فت ةً أطول.‬ ‫ر‬ ‫عة لشبكات الحزمة‬‫كما أن االزدياد في معدل السر‬ ‫2-4-االنطباع األولي لمزبون‬ ‫العريضة كان ع من االزدياد في الحجم والتعقيد‬ ‫أسر‬ ‫يقوم ائر الموقع بشكل عام بأخذ انطباع أولي سريع‬ ‫ز‬ ‫النات عن صفحة الوب متوسطة األداء. وبالتالي فإنو‬ ‫عن الموقع، وىذا االنطباع الذي يستغرق وسطياً 02/1‬ ‫يحق لمستخدمي الحزمة العريضة أن يتوقعوا عة‬ ‫سر‬ ‫من الثانية سيستمر بشكل دائم بالنسبة ليذا ال ائر. حيث‬ ‫ز‬ ‫أكبر في االستجابة.‬ ‫تبين من الد اسات التي أج اىا ‪ Noam Tractinsky‬أن‬ ‫ر‬ ‫ر‬ ‫تنصح شركة كينوت ‪ Keynote‬باستخدام النظرية التالية‬ ‫التقويم الوسطي لجاذبية صفحة الوب بعد عرضيا لمدة‬ ‫لزمن االستجابة من أجل عمميات االتصال ذات‬ ‫ال تتجاوز نصف الثانية، كان مطابقاً لمتقويم الذي تم‬ ‫ّ‬ ‫عات متفاوتة:‬‫سر‬ ‫أخذه بعد 10 ثوان. لذلك، أصبح من الواضح أنو ليس‬ ‫3 إلى 2 ثوان لمشبكات الخاصة بالشركات،‬ ‫‪‬‬ ‫لدى صاحب الموقع سوى وقت قصير جداً ليضفي‬ ‫ُ‬ ‫أو المنازل التي لدييا عة وجودة عالية.‬ ‫سر‬ ‫طابعاً أولياً جميالً عمى موقعو]7[.‬ ‫2 إلى . ثوان لشبكات ‪.DSL‬‬ ‫‪‬‬ ‫2-5-نمو حجم صفحة الوب‬ ‫نما حجم صفحة الوب خالل السنوات الماضية بشكل‬ ‫13 إلى 12 ثانية لشبكات الياتف ‪Dial Up‬‬ ‫‪‬‬ ‫ممحوظ. فقد ازداد حجم صفحة الوب بشكل وسطي من‬ ‫أي بما يقابل 110 ك.ب كل 13 ثانية.‬ ‫سنة 2113 حتى اليوم أكثر من 2.2 م ة، أي من‬ ‫ر‬ ‫إن ىذه التوصيات قابمة لمتطبيق عمى صفحات الوب‬ ‫9.27 ك.ب إلى أكثر من 302 ك.ب. وخالل الفت ة‬ ‫ر‬ ‫الرئيسية أو الصفحات األولى لممواقع، حيث يتنقل‬ ‫ذاتيا أيضاً، ازداد عدد األغ اض ‪ Objects‬واألدوات‬ ‫ر‬ ‫عة أكبر. ولكن ىناك بعض‬ ‫المستخدم عادةً بسر‬ ‫المضافة إلى صفحة الوب (كممفات إضافية، صور،‬ ‫ِ‬ ‫وريقات أسموب متشمشل ‪ ،CSS‬إخطاطات جافا‬ ‫االستثناءات، فبالنسبة لمصفحات التي يود المستخدم‬ ‫أخذ وقتو في تصفحيا، كصفحة خبر معين مثالً، فإن‬ ‫‪ )JavaScript‬بنسبة تقارب الضعف من 9..3 إلى‬ ‫تقسيم مثل ىذه الصفحة قد يكون عجاً لممستخدم، كما‬ ‫مز‬ ‫7.74 غرض في الصفحة الواحدة]8[ ]9[.‬ ‫قد يصعب عممية البحث، إن اىتمام المستخدم‬ ‫وعندما كانت صفحة الوب تحوي عدداً قميالً من‬ ‫ع قد يجعمو مستعداً لتحمل المشاكل الموجودة‬‫بالموضو‬ ‫األغ اض، كان حجم صفحة الوب ىو العامل الرئيسي‬ ‫ر‬ ‫في الصفحة.‬ ‫في مسألة االستجابة. إال أنو ومع زيادة عدد األغ اض‬ ‫ر‬ ‫ع تأخير‬‫في صفحة الوب الواحدة، أصبح موضو‬ ‫االستجابة متعمقاً برؤوس األغ اض (وليس الصفحة بحد‬ ‫ر‬ ‫41/3‬
‫القواعد، كاستخدام تعميمات ‪ Spacing‬و ‪ Sprites‬في‬ ‫3-التحسينات المقترحة ألداء صفحات الوب‬ ‫الممفات وتحويل‬ ‫وريقات األسموب المتشمشل، لدم‬ ‫ىنالك الكثير من اإلج اءات والتعديالت التي يمكن‬ ‫ُ‬ ‫ر‬ ‫ي ‪ Graphical Text‬إلى نص يعال من‬ ‫ُ‬ ‫النص الصور‬ ‫تطبيقيا عمى صفحة الوب بيدف تحسين األداء. فمثال‬ ‫ً‬ ‫قبل وريقات األسموب المتشمشل، واستخدام الخ ائط‬ ‫ر‬ ‫يمكن لممبرم أن ي ّع من عممية التصفح في الموقع‬ ‫ُسر‬ ‫ُ‬ ‫الصورية واأللوان لمخمفية، ومحاولة تحسين صور أو‬ ‫من خالل عرض محتويات الصفحة وتأخير عرض‬ ‫ممفات الوسائط المتعددة، ثم تفعيل عممية التخبئة‬ ‫المحتويات الخارجية ورؤوس األغ اض قدر اإلمكان،‬ ‫ر‬ ‫‪ Caching‬من أجل األغ اض المستديمة ‪Persistent‬‬ ‫ر‬ ‫وىذا ما يسمى باإلنسيابية ‪ .Streamlining‬كما يجب‬ ‫‪ Objects‬وتوزيعيم عمى مخدمات مختمفة لمتقميل من‬ ‫ّ‬ ‫اعتماد بعض القواعد والمبادئ، كالتقميل من طمبات‬ ‫مشاكل التأخير. وأخير، ضغط برتوكول نقل النصوص‬ ‫اً‬ ‫بروتوكول نقل النصوص الت ابطية، واستخدام وريقات‬ ‫ر‬ ‫الت ابطية، لمتخمص مما يقارب .9% من حجم ممفات‬ ‫ر‬ ‫األسموب المتشمشل بشكل مناسب لعرض البيانيات‬ ‫رماز لغة تأشير النص الت ابطي، ووريقات األسموب‬ ‫ر‬ ‫والوسائط المتعددة ‪ Graphics & Multimedia‬بشكل‬ ‫المتشمشل، واخطاطات جافا.‬ ‫أمثمي ومناسب لخصوصية صفحة الوب.‬ ‫وفيمايمي الخطوات التي ى اتباعيا لرفع أداء صفحات‬ ‫نر‬ ‫إن إعادة بناء صفحة الوب وتعديل رماز لغة تأشير‬ ‫الوب:‬ ‫النص الت ابطي ‪ HTML‬لمصفحة يسيم في زيادة عة‬ ‫سر‬ ‫ر‬ ‫الموقع، وذلك عن طريق حذف الواصفات واألساليب‬ ‫3-1-التحسينات المقترحة عمى مستوى صفحة الوب‬ ‫الداخمية ‪ ،Inline Style‬والتأكد من خمو الصفحة من‬ ‫ة عن‬ ‫3-1-1-التقميل من عدد الطمبات الصادر‬ ‫أي عنصر مكتوب بطريقة تؤدي إلى التقميل من عة‬ ‫سر‬ ‫برتوكول نقل النصوص الت ابطية‬ ‫ر‬ ‫الموقع. كما أن استخدام تقانات وريقات األسموب‬ ‫تُعتبر طمبات برتوكول نقل النصوص الت ابطية عامالً‬ ‫ر‬ ‫المتشمشل يسيم بشكل كبير في تحقيق ىذا اليدف، مثل‬ ‫ُ‬ ‫أساسياً في التأثير عمى عة صفحة الوب، لذلك يجب‬ ‫سر‬ ‫االستغناء عن بعض العناصر الرماز الخاصة بمغة‬ ‫التقميل منيا قدر اإلمكان. مما يتطمب تقميل عدد‬ ‫تأشير النص الت ابطي كالعناصر ذات الخاصية‬ ‫ر‬ ‫األغ اض الممي ة والفريدة في الصفحة والتي ىي عبا ة‬ ‫ر‬ ‫ز‬ ‫ر‬ ‫الجدولية ‪ ،Table-Based Elements‬وتجريد الرماز‬ ‫عن طمب من ع برتوكول نقل النصوص الت ابطية،‬ ‫ر‬ ‫نو‬ ‫من التصميم واعادة صياغتيا، وتحويل األسموب‬ ‫والذي يستمزم حمة ذىاب واياب إلى المخدم. وكمما اد‬ ‫ز‬ ‫ّ‬ ‫ر‬ ‫المضمن ‪ Embedded Style‬إلى أساس قواعدي‬ ‫ُ‬ ‫عدد األغ اض اد التأخير في االستجابة، وعندما يكون‬ ‫ر ز‬ ‫‪ Rule-Based‬معرف بوريقات أسموب متشمشل خارجي.‬ ‫ُ ّ‬ ‫عدد األغ اض أكثر من أربعة، فإن رؤوس األغ اض‬ ‫ر‬ ‫ر‬ ‫وكما ىو متعارف عميو، يجب التصريح عن وريقات‬ ‫تُسيطر عمى زمن تحميل الصفحة.‬ ‫األسموب المتشمشل المستخدمة أعمى صفحة لغة تأشير‬ ‫وبالتالي فإن تقميل من عدد األغ اض في صفحة الوب‬ ‫ر‬ ‫النص الت ابطي أي قبل رماز المتن ‪،Body Code‬‬ ‫ر‬ ‫سيقمل من عدد الطمبات الالزمة لدورن العمل عمى‬ ‫ا‬ ‫عمى عكس إخطاطات جافا التي من األفضل وضعيا‬ ‫الصفحة، وىكذا سيقل الثقل الناجم عن رؤوس‬ ‫في نياية رماز المتن.‬ ‫عة عمل‬‫األغ اض، والذي ينعكس بدو ه عمى سر‬ ‫ر‬ ‫ر‬ ‫ومن الميم أيضاً محاولة التقميل من طمبات بروتوكول‬ ‫الصفحة، ويزيد من فاعمية ىذه الطمبات.‬ ‫نقل النصوص الت ابطية، ويتم ذلك باتباع بعض‬ ‫ر‬ ‫41/4‬
‫المشكمة ىنا بأن ىذه الطريقة تحتاج إلى طمبات‬ ‫يمكن اتباع مايمي لمتقميل من طمبات برتوكول نقل‬ ‫ُ‬ ‫إضافية.‬ ‫النصوص الت ابطية‬ ‫ر‬ ‫‪ ‬ربط وريقات األسموب المتشمشل أو إخطاطات جافا‬ ‫‪ ‬تحويل النصوص الصورية إلى نصوص نمطية‬ ‫وىي طريقة مماثمة لعممية تقميل طمبات برتوكول نقل‬ ‫تُستخدم النصوص الصورية عادةً من أجل العناوين أو‬ ‫وريقات‬ ‫النصوص الت ابطية، ويتم من خالليا دم‬ ‫ر‬ ‫القوائم لتخزين مظير معين، ولكن حتى اليوم ال‬ ‫جية تمقائياً،‬‫األسموب المتشمشل أو إخطاطات جافا الخار‬ ‫تستطيع محركات البحث قرءة النص المدم بالصور.‬ ‫ا‬ ‫وذلك عن طريق ربطيم ببعض عمى المخدم وىذا ما‬ ‫ّ‬ ‫مما يضطرنا إلى طمبات إضافية غير ضرورية. لذلك‬ ‫يسمى بدتخييط األغ اض ‪.Suturing‬‬ ‫ر‬ ‫ينبغي استخدام وريقات األسموب المتشمشل لتنسيق‬ ‫‪ ‬تخزين الممفات الديناميكية في الخبء‬ ‫العناوين والقوائم.‬ ‫يمكن لممبرم إضافة عناوين أسية في أعمى الصفحة‬ ‫ر‬ ‫ُ‬ ‫‪ ‬استخدام ت اكبات نصية ‪Text Overlays‬‬ ‫ر‬ ‫تيدف إلى تفعيل عمل الخابية، مما يسمح بتخزين‬ ‫نضطر في بعض األحيان من استخدام صور تحوي‬ ‫الممفات الستخداميا الحقاً دون الحاجة لطمبيا من‬ ‫نصوصاً، وىذا ما يزيد من حجم الصور. لذلك يجب أن‬ ‫المخدم.‬ ‫نعزل الصو ة عن النص المرتبط بيا باستخدام وريقات‬ ‫ر‬ ‫‪ ‬التخمص من اإلطا ات ‪(i)Frames‬‬ ‫ر‬ ‫األسموب المتشمشل، مما ي ّع من فت ة استجابة المخدم.‬ ‫ر‬ ‫ُسر‬ ‫تُستخدم اإلطا ات في أكثر من 3.% من صفحات‬ ‫ر‬ ‫‪ ‬تحويل الف اغات الصورية بين الخاليا إلى ىوامش‬ ‫ر‬ ‫الوب، وتستخدم عادة من أجل عرض اإلعالنات‬ ‫‪ Margins‬أو حشو ‪Padding‬‬ ‫التجارية مما يسبب بطئ ً في أداء صفحات الوب ألنيا‬ ‫ُ ا‬ ‫لقد اعتاد المبرمجون عمى استخدام صور صغي ة األبعاد‬ ‫ر‬ ‫تفرض المزيد من الطمبات، وفي بعض األحيان تتطمب‬ ‫بيدف وضع ف اغات بيضاء داخل تصميم الموقع.‬ ‫ر‬ ‫عمل صفحات وب بأكمميا بداخل صفحات ى.‬ ‫أخر‬ ‫يجب استبدال كل الف اغات البيضاء الخاصة بالتصميم،‬ ‫ر‬ ‫3-1-2-تغيير حجم الصور وتحسينو‬ ‫لتصبح عمى مستوى وريقات األسموب المتشمشل‬ ‫يطمح مصنعو الكامي ات الرقمية اليوم لزيادة الدقة في‬ ‫ر‬ ‫باستخدام تعميمات اليوامش والحشو.‬ ‫الصو ة، مما أدى إلى زيادة أحجام الصور بشكل جعل‬ ‫ر‬ ‫‪ ‬دمج الصور و استخدام تعميمة ‪Sprite‬‬ ‫منيا غير مناسبة لموب. لذلك يجب إعادة تعديل حجم‬ ‫يمكن تقميل عدد الطمبات التي تحتاجيا صفحة الوب‬ ‫الصور لتصل إلى األبعاد المثالية المناسبة لمعرض‬ ‫الصور المتقاربة وجعميا صو ة واحدة‬ ‫ر‬ ‫من خالل دم‬ ‫عمى صفحات الوب.‬ ‫مركبة ثم استخدام خ ائط الصور ‪ Image map‬أو‬ ‫ر‬ ‫3-1-3-تحسين الوسائط المتعددة‬ ‫تعميمة ‪ Sprite‬كبديل عن عدة طمبات.‬ ‫تُكون الوسائط المتعدة قسماً صغير فقط من طمبات‬ ‫اً‬ ‫المتشمشل‬ ‫األسموب‬ ‫وريقات‬ ‫وتحسين‬ ‫‪ ‬دمج‬ ‫المخدم ولكنيا تشغل حيز كبير من الحركة التدفقية عمى‬ ‫اً اً‬ ‫ّ‬ ‫واخطاطات جافا‬ ‫الشبكة، ننصح بالقيام بالعمميات التالية من أجل تحسين‬ ‫يوجد العديد من المبرمجين الذين يقومون بإنشاء أكثر‬ ‫الوسائط المتعددة.‬ ‫من وريقة أسموب متشمشل مختمفة ومن ثم استخدام‬ ‫الوريقة المطموبة في صفحاتيم بحسب الحاجة. وتكمن‬ ‫41/5‬
‫الفيديو ‪ Video Noise‬باستخدام‬ ‫تقميل ضجي‬ ‫-‬ ‫‪ ‬تحسين الفيديو من أجل الوب‬ ‫المرشحات ‪.Filters‬‬ ‫إلج اء التحسينات المناسبة لمفيديو عمى الوب، يجب‬ ‫ر‬ ‫تعديل المباينة في المون ‪.Contrast‬‬ ‫-‬ ‫ضمان أن تكون قصي ة في زمن عمميا، وصغي ة من‬ ‫ر‬ ‫ر‬ ‫‪( Gamma‬من أجل ع‬ ‫تنو‬ ‫تعديل مستوى الغاما‬ ‫-‬ ‫ِ‬ ‫حيث األبعاد، ومعدة من قبل مجموعة كودك ‪Codec‬‬ ‫المنصات ‪.)Cross-platform‬‬ ‫المناسبة.‬ ‫استعادة األسود واألبيض.‬ ‫-‬ ‫‪ ‬معدالت وأبعاد إطار الفيديو‬ ‫التشابك ‪.Deinterlace‬‬ ‫-‬ ‫إن زيادة معدل اإلطا ات، أي زيادة عدد اإلطا ات في‬ ‫ر‬ ‫ر‬ ‫اختيار أفضل أنواع الكودك لتتماشى مع ع العمل‬ ‫نو‬ ‫-‬ ‫الثانية يزيد من مرونة الحركة لمصو ة. من ناحية ى،‬ ‫أخر‬ ‫ر‬ ‫الم اد فعمو.‬ ‫ر‬ ‫إن زيادة إطار واحد لمعدل اإلطار ينت بيانات أكثر‬ ‫ُ‬ ‫3-1-4-تحويل رماز إخطاطات جافا إلى وريقات‬ ‫بمعدل 1.%، أي أن معدل اإلطار (70 إطار بالثانية‬ ‫األسموب المتشمشل‬ ‫‪ )fps‬ينت بيانات أكثر بمعدل 1.% عن معدل اإلطار‬ ‫ُ‬ ‫(80 إطار بالثانية ‪ .)fps‬وقد أظيرت معدالت اإلطا ات‬ ‫ر‬ ‫أصبحت نصوص إخطاطات جافا مستعممة بشكل واسع‬ ‫أن ما يقل عن 30 إلى .0 ‪ fps‬قد قممت من إد اك‬ ‫ر‬ ‫في الوب بنسبة تقارب 8.48%. وتستخدم إخطاطات‬ ‫المستخدمين لجودة الفيديو]11[. كما أن أصغر األبعاد‬ ‫جافا في العديد من الحاالت، مثل التحقق من محتوى‬ ‫االستما ات ‪ ،Form validation‬والقوائم وانسيابية مرور‬ ‫ر‬ ‫الممكن استخداميا ىي 132 ‪ 341 x‬بكسل ‪.Pixels‬‬ ‫المؤشر ‪ ،Rollover‬وكشف معمومات المتصفح،‬ ‫‪ ‬التقميل من الضجيج والحركة‬ ‫وتستخدم أيضاً في اإلحصاءات، والمزيد من تطبيقات‬ ‫التقميل من حركة الكامير باستخدام قاعدة لمكامير‬ ‫ا‬ ‫ا‬ ‫-‬ ‫إذا أمكن.‬ ‫أجاكس ‪ Ajax‬المعقدة. وباستخدام وريقات األسموب‬ ‫المتشمشل أصبح بإمكان المبرم اليوم أن يحصل عمى‬ ‫التقميل من حركة اليدف الم اد تصوي ه.‬ ‫ر‬ ‫ر‬ ‫-‬ ‫عدد من ىذه التقانات بفعالية أكبر.‬ ‫استخدام الكثير من الضوء.‬ ‫-‬ ‫استخدام خمفية بسيطة.‬ ‫-‬ ‫3-1-5-استخدام طريقة االشتمام ‪ Sniffing‬من‬ ‫تفادي استخدام التقريب والتبعيد ‪ Zoom‬ودو ان‬ ‫ر‬ ‫-‬ ‫جانب المخدم‬ ‫العدسة.‬ ‫تُستخدم إخطاطات جافا بشكل ممحوظ من أجل عممية‬ ‫استخدام أدوات محترفة.‬ ‫-‬ ‫اشتمام معمومات المتصفح ‪ ،Browser Sniffing‬من‬ ‫استخدام صيغ وأشكال رقمية.‬ ‫-‬ ‫حيث ع ورقم اإلصدار وقدرتو عمى دعم بعض‬ ‫النو‬ ‫إذا لم يتوافر قاعدة كامير، فباإلمكان استخدام أداة‬ ‫ا‬ ‫-‬ ‫التعميمات. لذلك، ولكي نقمل من حمل إخطاطات جافا،‬ ‫لمتثبيت التوازني (‪ )http://www.ken-lab.com‬أو‬ ‫فعمى المبرم استخدام تعميمات من جانب المخدم.‬ ‫عدسات لمصور الثابتة.‬ ‫عة‬‫3-1-6-تحسين إخطاطات جافا من أجل سر‬ ‫‪ ‬تعديل الفيديو‬ ‫التنفيذ وحجم الممف‬ ‫تقميل األبعاد لتقابل معايير الوب.‬ ‫-‬ ‫بعد استبدال أكبر عدد ممكن من إخطاطات جافا‬ ‫استخدام معدل اإلطار األقل إن أمكن.‬ ‫-‬ ‫بوريقات األسموب المتشمشل واستخدام التقانات البرمجية‬ ‫تقطيع الحواف غير الواضحة من الصور.‬ ‫-‬ ‫41/6‬
‫3-1-11-تشغيل إخطاطات جافا بحكمة‬ ‫ى الحقا‬ ‫ً‬ ‫من جانب المخدم، يتوجب تحسين كما سنر‬ ‫جية المرتبطة بصفحة‬‫تُعتبر النصوص البرمجية الخار‬ ‫إخطاطات جافا المتبقية لمتقميل من حجم الممف.‬ ‫الوب عن طريق الترويسة ‪ Header‬مض ة، ألنيا تؤخر‬ ‫ر‬ ‫استخدام أسماء مختص ة لألغ اض،‬ ‫ر‬ ‫ر‬ ‫يستطيع المبرم‬ ‫عممية عرض محتويات متن الصفحة. ألن ىذه‬ ‫والمتح الت ‪ ،Variables‬والوظائف ‪Function names‬‬ ‫و‬ ‫ات التي تحصل قبل تحميل محتويات متن‬ ‫التأخير‬ ‫لمتقميل من عدد البايتات ‪ .Bytes‬يمكن لممبرم أيضا‬ ‫ً‬ ‫ُ‬ ‫الصفحة، من شأنيا أن تؤدي إلى ىروب المستخدم.‬ ‫أن يستخدم تنظيماً آلياً ليذه العممية عن طريق استخدام‬ ‫أداة كد ‪ w3compiler‬لتقوم باختصار ما ذكر بشكل‬ ‫ُ‬ ‫3-2-تحسين وريقات األسموب المتشمشل‬ ‫آلي، وتحسين النصوص البرمجية.‬ ‫3-2-1-تجميع المنتقيات ‪ Selectors‬مع التصاريح‬ ‫3-1-7- تحويل التخطيط الجدولي ‪Table Layout‬‬ ‫‪ Declarations‬المشتركة‬ ‫يسمح استخدام وريقات األسموب المتشمشل، بجمع عدد‬ ‫إلى التخطيط المتعمق بوريقات األسموب المتشمشل‬ ‫إن استخدام وريقات األسموب المتشمشل لتخطيط صفحة‬ ‫من المنتقيات التي تتشارك بالتصريحات نفسيا، حيث‬ ‫الوب يؤمن حفظ كمية كبي ة من الرماز، بنسبة تصل‬ ‫ر‬ ‫تسمح ىذه التقنية التحسينية بتطبيق التنسيقات ذاتيا‬ ‫من .3 إلى 1.%. لذلك ينبغي عمى المبرم أ الً أن‬ ‫و‬ ‫عمى عدة منتقيات منفصمة بعضيا عن بعض باستخدام‬ ‫فواصل، لحفظ مساحة أكبر.‬ ‫يمقي نظ ة إلى صفحتو ى إن كان باإلمكان استخدام‬ ‫لير‬ ‫ر‬ ‫مثال:‬ ‫قوائم وريقات األسموب المتشمشل وأوامر ‪ divs‬لتحاكي‬ ‫{ ‪.sitehead‬‬ ‫التأثي ات التي عادة ما تطبق عن طريق استخدام‬ ‫ر‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫الجداول.‬ ‫}‬ ‫{ ‪.sitenav‬‬ ‫3-1-8-استبدال رماز األسموب الداخمي بقواعد‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫}‬ ‫وريقات األسموب المتشمشل‬ ‫تصبح:‬ ‫تُعتبر ىذه العممية ميمة جداً، حيث إنيا تحفظ عرض‬ ‫{ ‪.sitehead, .sitenav‬‬ ‫الحزمة ‪ Bandwidth‬المتعمقة بالشبكة، كما تُقمل من‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫}‬ ‫مشاكل عمميات الصيانة. حيث إن تجريد صفحة الوب‬ ‫3-2-2- تجميع التصاريح مع المنتقيات المشتركة‬ ‫لتتمثل بالبنية التأسيسية فقط واستبدال أي أسموب داخمي‬ ‫بجمع عدة‬ ‫تسمح وريقات األسموب المتشمشل لممبرم‬ ‫بقواعد وريقات األسموب المتشمشل، يساعد في تحسين‬ ‫ُ‬ ‫ُ ٍ‬ ‫تصاريح ذات منتق مشترك داخل مجموعة قاعدية‬ ‫صفحة لغة تأشير النص الت ابطي بشكل كمي.‬ ‫ر‬ ‫واحدة، منفصمة عن األخريات باستخدام فاصمة‬ ‫3-1-9-تقميل الوقت البدائي لمعرض‬ ‫منقوطة. وتساعد ىذه العممية عمى تطبيق عدد من‬ ‫بإمكان المبرم أن يطور من عة الموقع الخاص بو‬ ‫سر‬ ‫التصاريح عمى منتق واحد فقط لحفظ المساحة.‬ ‫من خالل تحميل شيء سريع وذي فائدة لمفت االنتباه‬ ‫مثال:‬ ‫‪Weather‬‬ ‫صفحة‬ ‫تظير‬ ‫مثال،‬ ‫البدء.‬ ‫في‬ ‫} ;‪body { font-size: 1em‬‬ ‫‪ Underground‬الرئيسية نموذج البحث المتعمق بحالة‬ ‫} ;000# :‪body{ color‬‬ ‫تصبح:‬ ‫ى من الشاشة.‬‫الجو عة في ال اوية العموية اليسر‬ ‫ز‬ ‫بسر‬ ‫} ;000# :‪body{ font-size: 1em; color‬‬ ‫41/7‬
‫محددة، حيث إن معظم متصفحات االنترنت الحديثة،‬ ‫3-2-3-دمج التنسيقات المتشابية داخل صفوف‬ ‫تدعم ىذه التقنية التي تسمح لمصممي الوب بأن‬ ‫‪ Classes‬مشتركة‬ ‫يستيدفوا عنصر لو صفة معينة، ويتم ذلك باستخدام‬ ‫اً‬ ‫بتجميع‬ ‫تسمح وريقات األسموب المتشمشل لممبرم‬ ‫الطرق األربعة التالية:‬ ‫مجموعة من التصريحات التي تُمثل تنسيقاً معيناً داخل‬ ‫]‪[att‬‬ ‫-‬ ‫صف معين وبالتالي يمكن لممبرم استخدام ىذا الصف‬ ‫]‪[att=val‬‬ ‫-‬ ‫]‪[att~=val‬‬ ‫-‬ ‫أكثر من م ة.‬ ‫ر‬ ‫-‬ ‫3-2-4-استخدام خاصية الو اثة ‪Inheritance‬‬ ‫ر‬ ‫]‪[att |=val‬‬ ‫3-3-تحسين إخطاطات جافا‬ ‫ة‬ ‫لمتخمص من التصاريح المتكرر‬ ‫3-3-1-حذف تعميقات إخطاطات جافا‬ ‫يمكن استخدام خاصية الو اثة وجعل المنتقيات تأخذ‬ ‫ر‬ ‫ُ‬ ‫يمكننا حذف كل تعميقات إخطاطات جافا المتعارف‬ ‫قيميا من التصاريح التي تسبقيا وذلك حسب ورود ىذه‬ ‫عمييا بالرموز // أو /* */. فيي ال تعطي أي قيم‬ ‫المنتقيات داخل شج ة الصفحة، وبيذه الطريقة يتم‬ ‫ر‬ ‫لممستخدم النيائي وتقوم فقط بزيادة حجم الممف.‬ ‫التخمص من التصاريح المتكر ة. حيث يقوم العنصر‬ ‫ر‬ ‫3-3-2-التعميقات الظرفية‬ ‫بتوارث الخصائص من العنصر األب إال إذا ذكر شيء‬ ‫يجب عمى المبرم أن يكون حذر اتجاه نظام التعميق‬ ‫اً‬ ‫خالفاً لذلك.‬ ‫الظرفي الخاص بد ‪ Internet Explorer‬والذي غالباً ما‬ ‫3-2-5-استخدام صيغ وريقات األسموب المتشمشل‬ ‫يستخدم من أجل النصوص البرمجية غير المدعومة من‬ ‫المختزلة‬ ‫قبل متصفح معين ألنيا ستزيد من حجم الممف‬ ‫يمكن لممبرم اخت ال العديد من قيم التصاريح. فمثالً،‬ ‫ز‬ ‫ُ‬ ‫البرمجي، ومن ثَم من األفضل استخدام تعميمات برمجية‬ ‫عوضاً عن تحديد قيمة المون باستخدام الترميز الست‬ ‫ّ‬ ‫مدعومة من جميع المتصفحات.‬ ‫ي ‪ rrggbb‬يمكنو استخدام االختصار ‪ .rgb‬ىناك‬‫عشر‬ ‫مثال عمى نظام التعميق الظرفي:‬ ‫ى التي تأخذ قيماً‬‫أيضاً العديد من التصاريح األخر‬ ‫"‪<!--[if lt IE 7]> <script src="patch.js‬‬ ‫مختزلة كالخطوط والحواف واليوامش والحشو.‬ ‫>--]‪type="text/javascript" > </script> <![endif‬‬ ‫3-2-6-اختصار أسماء التعريف ‪ ID‬وأسماء الصفوف‬ ‫3-3-3-تقميل المساحات البيضاء‬ ‫الطويمة‬ ‫تُعتبر إخطاطات جافا منصفة لقضية المساحات‬ ‫إن األسماء الطويمة لمصفوف قد تكون أكثر فيماً من‬ ‫البيضاء إلى حد ما، وبإمكان المبرم أن يقمل ىذه‬ ‫قبل المبرمجين، إال أن ىذا األسموب في التسمية‬ ‫المساحات بسيولة دون أن يؤثر عمى عمل الموقع.‬ ‫يضطرنا في النياية إلى تحميل بايتات إضافية (عمى‬ ‫ة قدر‬ ‫3-3-4-استخدام التعميمات البرمجية المختصر‬ ‫األقل عند أول عممية تشغيل لوريقات األسموب‬ ‫اإلمكان‬ ‫المتشمشل).‬ ‫بإمكان المبرم أن يستخدم عدداً من التعميمات الخاصة‬ ‫3-2-7-االستفادة من مي ات اإلصدا ات الحديثة‬ ‫ر‬ ‫ز‬ ‫بإخطاطات جافا التي تكون مختص ة عن تعميمات‬ ‫ر‬ ‫لوريقات األسموب المتشمشل‬ ‫ى. مثالً يمكن لممبرم استخدام ++‪ x‬عوضاً عن‬‫أخر‬ ‫قدم اإلصدار 3 واإلصدار 2 من وريقات األسموب‬ ‫ى المختص ة.‬ ‫ر‬ ‫1+‪ x=x‬وىناك العديد من التعميمات األخر‬ ‫المتشمشل تقنية تحديد التصريحات التي ليا واصفات‬ ‫41/8‬
‫3-4-تحسين أجاكس‬ ‫3-3-5-استخدام سالسل ‪ Strings‬ثابتة‬ ‫3-4-1-تطبيق أجاكس بما يقابل المشكمة تماما‬ ‫يمكن لممبرم تعريف سالسل تحوي قيمة نصية تُستخدم‬ ‫ُ‬ ‫إن استخدام أجاكس قد يقودنا إلى مجموعة من‬ ‫بكث ة داخل الرماز، وبيذه الطريقة يستطيع استخدام اسم‬ ‫ر‬ ‫غم من صغر حجم الطمبات، فإن الذىاب‬‫السمبيات، فبالر‬ ‫المتحول الذي يحوي سالسل دون الحاجة إلى إعادة‬ ‫إلى المخدم والعودة إلى الزبون قد يستغرق مدة طويمة.‬ ‫كتابة القيمة النصية كمما احتاج إلييا، وىذا بالطبع يقمل‬ ‫ُ‬ ‫لذلك فمن األفضل استخدام أجاكس عند الحاجة فقط،‬ ‫من حجم الممف.‬ ‫وبطريقة مدروسو.‬ ‫3-3-6-تجنب كتابة تعميمات مستحيمة التنفيذ‬ ‫3-4-2-استخدام مكتبة أجاكس َّمة وذات تصميم‬ ‫مدع‬ ‫يجب عمى المبرم أن يكون حذر عند كتابة الرماز،‬ ‫اً‬ ‫جيد‬ ‫ع في أخطاء منطقية. مثل كتابة تعميمات داخل‬‫من الوقو‬ ‫يجب عمى المبرم استخدام مكتبة تدعم المي ات التالية،‬ ‫ز‬ ‫قطعة برمجية شرطية أو حمقة مستحيمة التحقق.‬ ‫وذلك ليستفيد من مي ات أجاكس بشكل مثالي:‬ ‫ز‬ ‫3-3-7-تقصير أسماء المتحوالت والوظائف المعرفة‬ ‫اتصاالت أجاكس‬ ‫-‬ ‫من قبل المستخدم‬ ‫تسييالت في الوصول إلى العقد المطموبة في ممف‬ ‫-‬ ‫من أجل القد ة عمى القيام بق اءة جيدة، يقوم المبرم‬ ‫ر‬ ‫ر‬ ‫لغات التأشير الموسعة‬ ‫بتعريف متح الت ليا أسماء تحمل دالالت واضحة، مما‬ ‫و‬ ‫تنظيم األحداث‬ ‫-‬ ‫يقودنا إلى زيادة كبي ة في عدد من البايتات العديمة‬ ‫ر‬ ‫التأثي ات المرئية‬ ‫ر‬ ‫-‬ ‫األىمية. وعمى المبرم اختصار األسماء قدر اإلمكان.‬ ‫3-4-3-التقميل من متطمبات طمب بروتوكول نقل‬ ‫3-3-8-القيم االفت اضية‬ ‫ر‬ ‫النصوص الت ابطية‬ ‫ر‬ ‫ا‬ ‫ىناك العديد من األنماط والوظائف التي تأخذ قيم ً‬ ‫تبعاً لمواصفات بروتوكول نقل النصوص الت ابطية، ال‬ ‫ر‬ ‫افت اضية دون الحاجة إلى التصريح عنيا. وبالتالي عمى‬ ‫ر‬ ‫يمكن إرسال أكثر من طمبين إلى المخدم بآن معاً من‬ ‫ُ‬ ‫المبرم االستفادة من ىذه المي ة ليقمل من حجم الممف‬ ‫ز‬ ‫المتصفح نفسو، وعمى المبرم أخذ ىذه المشكمة‬ ‫قدر االمكان.‬ ‫بالحسبان عن طريق التقميل من متطمبات الطمب قدر‬ ‫3-3-9-النظر في استخدام أجا ‪ Ajah‬كحل بديل‬ ‫اإلمكان لتسريع العمل.‬ ‫عن الـ أر إس إس ‪ RSS‬و الجيسون ‪ JSON‬ولغات‬ ‫3-4-4-اختيار أنماط البيانات بشكل صحيح قبل‬ ‫التأشير الموسعة ‪ XML‬عند الحاجة ليا‬ ‫اإلرسال‬ ‫أجا ىو نمط مؤلف من إخطاطات جافا غير المت امنة‬ ‫ز‬ ‫قد تكون طمبات أجاكس صغي ة، ولكن ىناك بكل تأكيد‬ ‫ر‬ ‫ولغة تأشير النص الت ابطي، بحيث يقوم المبرم بدفع‬ ‫ر‬ ‫اختالفات في الحجم بين أنواع األنماط التي تمثل بيا‬ ‫الردود من المخدم بشكل مترجم عمى شكل لغة تأشير‬ ‫أخذ الحذر من أنواع االنماط‬ ‫البيانات. فعمى المبرم‬ ‫نص ت ابطي عوضاً عن الجيسون ولغات التأشير‬ ‫ر‬ ‫المستخدمة عند اإلرسال.‬ ‫ع من‬‫الموسعة، لعرضيا مباش ةً عمى الموقع، ممايسر‬ ‫ر‬ ‫عممية عرض المعمومات المطموبة من المخدم عمى‬ ‫أجي ة المستخدمين.‬ ‫ز‬ ‫41/9‬
‫عناصر الصفحة. لذلك، فإن تقميل عدد أسماء المخدم‬ ‫ة وسطية خاصة بإخطاطات‬ ‫3-4-5-توظيف ذاكر‬ ‫لكل صفحة سيقوم بتقميل الضغط الناجم عن عمميات‬ ‫جافا‬ ‫مقابمة نظام اسم النطاق.‬ ‫تعريف مصفوفة تحوي الطمبات التي‬ ‫يمكن لممبرم‬ ‫ُ‬ ‫3-5-3- ضغط بروتوكول نقل النصوص الت ابطية‬ ‫ر‬ ‫تحتاجيا صفحتو من األجاكس، وبالمقابل يعرف‬ ‫ُ ّ‬ ‫إن ضغط بروتوكول نقل النصوص الت ابطية ىي طريقة‬ ‫ر‬ ‫مصفوفة لحفظ الردود الواردة من المخدم وبيذه الطريقة‬ ‫معرفة بشكل عمني لضغط المحتويات النصية المنقولة‬ ‫يمكنو أن يسترجع الردود عند الحاجة إلييا.‬ ‫ُ‬ ‫من مخدمات الوب. تستخدم عممية ضغط بروتوكول‬ ‫3-4-6-التأكد من معالجة مشاكل أداء الشبكة‬ ‫نقل النصوص الت ابطية خوارزميات ضغط ذات‬ ‫ر‬ ‫يجب بناء طبقة ثامنة فوق الطبقات السبع الخاصة‬ ‫مجاالت عمنية، كد ‪ GZip‬و ‪ ،Compress‬لتضغط‬ ‫ببروتوكول نقل النصوص الت ابطية]21[، التي تيدف‬ ‫ر‬ ‫جميع أنواع الممفات ذات األساس النصي.‬ ‫إلى معالجة األخطاء الناجمة عن عدم االستجابة‬ ‫3-5-4-عممية تشفير دلتا ‪Delta‬‬ ‫المتوقعة من برمجية أجاكس.‬ ‫تُعتبر عممية تشفير دلتا كطريقة لتحديث صفحات الوب‬ ‫3-5-التحسين من جانب المخدم ‪Server Side‬‬ ‫من خالل إرسال االختالفات بين إصدا ات صفحة‬ ‫ر‬ ‫3-5-1-تحسين طرق التحميل المتوازية ‪Parallel‬‬ ‫الوب. يقوم المخدم بإرسال االختالفات في الصفحة منذ‬ ‫‪Downloads‬‬ ‫الوصول األخير، مقمالً بذلك كمية البيانات المرسمة في‬ ‫ينصح اإلصدار1.1 من بروتوكول نقل النصوص‬ ‫بروتوك الت النقل.‬ ‫و‬ ‫الت ابطية بأن تقوم المتصفحات بتحديد كميات الطمبات‬ ‫ر‬ ‫3-5-5-إعادة كتابة عناوين المصادر عمى اإلنترنت‬ ‫إلى طمبين بنفس الوقت عمى األكثر. فيجب عمى‬ ‫‪ URIs‬باستخدام تقنية ‪mod_rewrite‬‬ ‫في بعض األحيان وخاصة عندما تكون‬ ‫المبرم‬ ‫يمكن لممبرم استخدام ىذه التقنية ليختزل من عناوين‬ ‫ُ‬ ‫الطمبات مخصصة لمصور باستخدام البروتوكول ذي‬ ‫المصادر عمى اإلنترنت، وبيذه الطريقة سيوفر عدداً‬ ‫اإلصدار 1.0 الذي يسمح بالتحميل المتو ي ألي عدد‬ ‫از‬ ‫من البايتات، كما أنو سيجعل من عناوينو صديقة‬ ‫كان من الطمبات.‬ ‫لمحركات البحث.‬ ‫3-5-2-تقميل مقابالت نظام اسم النطاق ‪DNS‬‬ ‫‪Lookups‬‬ ‫4-نظام المفاضمة اإللكترونية في وز ة الصحة‬ ‫ار‬ ‫يقوم نظام اسم النطاق بمقابمة األسماء بعناوين‬ ‫وىو نظام متكامل خاص بمفاضمة وز ة الصحة في‬ ‫ار‬ ‫بروتوكول اإلنترنت ‪ ،IP‬كما يعطي مي ة قابمية النقل‬ ‫ز‬ ‫الجميورية العربية السورية، يسمح بإج اء جميع عمميات‬ ‫ر‬ ‫ألسماء المجال من خالل السماح لممواقع بالتحول إلى‬ ‫المفاضمة بدءاً من إدخال بطاقات المفاضمة وانتياء‬ ‫ً‬ ‫مخدمات جديدة مع عناوين بروتكول إنترنت مختمفة،‬ ‫بإصدار النتائ . ويعد نظاماً ديناميكياً حيث تسمح‬ ‫ُ‬ ‫بدون تغيير أسماء المخدم التابع ليا. يستغرق نظام اسم‬ ‫إعدادات النظام ضمنو بتعريف حقول جديدة يمكن أن‬ ‫ُ‬ ‫النطاق عادة 13-130 ءاً من الثانية لمبحث عن‬ ‫جز‬ ‫تضاف كالوثائق المرفقة و تعديالت العالمات المختمفة.‬ ‫عنوان بروتوكول إنترنت لكل اسم مخدم، ويتوجب عمى‬ ‫وقد تم تركيب النظام في الوز ة وتم استخدامو في العديد‬ ‫ار ّ‬ ‫ّ‬ ‫المتصفح أن ينتظر نظام اسم النطاق لكي يقوم بإيجاد‬ ‫ع بتحميل‬‫العنوان المقابل لبروتوكول إنترنت قبل الشرو‬ ‫41/01‬
‫يظير الشكل 2 الخطوة األولى من التحسين التي تقوم‬ ‫من المفاضالت وخالل فت ة عممو تم تطبيق الخطوات‬ ‫ّ‬ ‫ر‬ ‫عمى حذف المساحات البيضاء من إخطاطات جافا‬ ‫السابقة في عممية تحسين أدائو وقياس نسب األداء.‬ ‫ووريقات األسموب المتشمشل واعادة كتابة المتح الت‬ ‫و‬ ‫بشكل يقمل من عدد المحارف المستخدمة، مع حذف‬ ‫التعميقات المساعدة في مرحمة التطوير، كل ىذه‬ ‫المساحات ىي عبء إضافي عمى التحميل يجب‬ ‫التخمص منو وبذلك تصبح أحجام الممفات أصغر من‬ ‫الحجم األصمي وأصبح الحجم الكمي 0 ميغا بايت‬ ‫والزمن الكمي المستغرق 7.40 ثانية.‬ ‫الشكل 0- نظام المفاضمة االلكترونية في وز ة الصحة‬ ‫ار‬ ‫5-تطبيق التحسينات عمى النظام‬ ‫تم، خالل العمل عمى بناء النظام، تطبيق التحسينات‬‫ّ‬ ‫والنصائح المذكو ة أعاله، ونبين فيما يمي ما توصمنا‬ ‫ر‬ ‫إليو:‬ ‫الشكل 4- بعد إج اء التحسينات‬ ‫ر‬ ‫وبعد ضم إخطاطات جافا في ممف واحد وضم وريقات‬ ‫األسموب المتشمشل بممف واحد نالحظ أن الممف‬ ‫المطموب يمكن أن يتم تحميمو بطمب واحد لممخدم ال‬ ‫و‬ ‫ىق المخدم بطمبات يمكن تجنبيا. كما أن أىم‬ ‫نر‬ ‫الشكل 0- قبل القيام بالتحسينات‬ ‫العمميات الالزم إتباعيا لتحسين أداء صفحة الوب ىي‬ ‫عدم طمب األجاكس أو إخطاطات جافا إال عندما يكون‬ ‫يظير الشكل 3 ممفات الصفحة الرئيسية التي تم طمبيا‬ ‫ّ‬ ‫ُ‬ ‫ىناك حاجة لمطمب ألن ذلك من شأنو تقميل عمميات‬ ‫مع حجم كل ممف والوقت الالزم لتحميمو. قبل م اعاة‬ ‫ر‬ ‫الطمب واإلستجابة التي عادة ماتأخذ زمناً طويالً،‬ ‫قواعد تحسين األداء. من المالحظ أن عدد إخطاطات‬ ‫وأصبح عدد الطمبات 82 طمباً والزمن الكمي المستغرق‬ ‫الجافا ىو 10 ووريقات األسموب المتشمشل ىو 8، وعدد‬ ‫.1.7 ثانية كما يبين الشكل 4.‬ ‫الطمبات ىو 4. طمباً، والحجم الكمي لمممف 3.0 ميغا‬ ‫ُ‬ ‫وبالتالي يبين الشكل . نسب التأثير عمى أداء نظام‬ ‫بايت، والزمن الكمي المستغرق 41..0 ثانية.‬ ‫المفاضمة في وز ة الصحة في حال قمنا بالتركيز عمى‬ ‫ار‬ ‫أربع محاور من النصائح السابقة، حيث ساىمت عممية‬ ‫تصغير حجم ممفات ال أس بنسبة 84%، أما عممية‬ ‫ر‬ ‫ضم الممفات الرماز فقد ساىم بنسبة .0% وعمميات‬ ‫معالجة الوسائط المتعددة بنسبة 93% واعادة ىيكمة‬ ‫الشكل 2- تحسينات عمى مستوى األغ اض الخارجية‬ ‫ر‬ ‫الرماز بنسبة 10%.‬ ‫41/11‬
[3] Linden, G. November 6, 2011. ―Marissa Mayer at Web 3.0. ‫ة في تسريع الموقع‬ ‫النسب المؤثر‬ [4] Farber, D. November 9, 2011. ―Google’s ‫تصغير حجم ممفات ال أس‬ ‫ر‬ Marissa Mayer: Speed Wins.‖ 10% ‫ضم ممفات الجافا سكربت‬ [5] Kohavi, R., and R. Longbotham. 2007. ‫والستايل في ممفين‬ 48% 15% ―Online Experiments: Lessons Learned.‖ ‫تصغير الصور وضغط‬ ‫لوسائط المتعددة‬ [6] Skadberg, Y., and J. Kimmel. 2009. 27% ‫إعادة سياق الجافا سكربت‬ 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." ‫6-النتيجة‬ [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 ‫7-الم اجع‬ ‫ر‬ Multimedia Computing, Communications and [1] Bouch, A. et al. 2008. ―Quality is in the Applications Eye of the Beholder: Meeting Users’ [12] Zimmerman, H. 1980. ―OSI Reference Requirements for Internet Quality of Service.‖ Model—the IS0 Model of Architecture for In CHI 2008 (The Hague, the Netherlands: Open Systems Interconnection.‖ IEEE April 1–6, 2008) Transactions on Communications [2] Akamai. June 2006. ―Retail Web Site Performance: Consumer Reaction to a Poor Online Shopping Experience.‖ Akamai Technologies, http://www.akamai.com 12/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‬‬ ‫دلتا‬ ‫41/31‬
‫‪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‬‬ ‫وسائط المتعددة‬ ‫41/41‬

Recomendados

Testing web apps اختبار تطبيقات الويب
Testing web apps اختبار تطبيقات الويبTesting web apps اختبار تطبيقات الويب
Testing web apps اختبار تطبيقات الويبEhab Saad Ahmad
 
Best practices to increase the performance of web-based applications
Best practices to increase the performance of web-based applicationsBest practices to increase the performance of web-based applications
Best practices to increase the performance of web-based applicationsMouhamad Kawas
 
دراسة الطرق المثلى لتحسين أداء تطبيقات الوب
دراسة الطرق المثلى لتحسين أداء تطبيقات الوبدراسة الطرق المثلى لتحسين أداء تطبيقات الوب
دراسة الطرق المثلى لتحسين أداء تطبيقات الوبMouhamad Kawas
 
OBSC Framework
OBSC FrameworkOBSC Framework
OBSC FrameworkMouhamad Kawas
 
Paralegal Rainmakers Digest Dec 2012
Paralegal Rainmakers Digest Dec 2012Paralegal Rainmakers Digest Dec 2012
Paralegal Rainmakers Digest Dec 2012Paralegal Rainmakers
 
الفصل الثامن
الفصل الثامنالفصل الثامن
الفصل الثامنguestb0490b3d
 
الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةmonmohammeds
 
الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةSalmaalghamdi5
 

Recomendados

Testing web apps اختبار تطبيقات الويب
Testing web apps اختبار تطبيقات الويبTesting web apps اختبار تطبيقات الويب
Testing web apps اختبار تطبيقات الويبEhab Saad Ahmad
 
Best practices to increase the performance of web-based applications
Best practices to increase the performance of web-based applicationsBest practices to increase the performance of web-based applications
Best practices to increase the performance of web-based applicationsMouhamad Kawas
 
دراسة الطرق المثلى لتحسين أداء تطبيقات الوب
دراسة الطرق المثلى لتحسين أداء تطبيقات الوبدراسة الطرق المثلى لتحسين أداء تطبيقات الوب
دراسة الطرق المثلى لتحسين أداء تطبيقات الوبMouhamad Kawas
 
OBSC Framework
OBSC FrameworkOBSC Framework
OBSC FrameworkMouhamad Kawas
 
Paralegal Rainmakers Digest Dec 2012
Paralegal Rainmakers Digest Dec 2012Paralegal Rainmakers Digest Dec 2012
Paralegal Rainmakers Digest Dec 2012Paralegal Rainmakers
 
الفصل الثامن
الفصل الثامنالفصل الثامن
الفصل الثامنguestb0490b3d
 
الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةmonmohammeds
 
الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةSalmaalghamdi5
 
الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةSalmaalghamdi5
 
التقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابيةالتقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابيةmaalifaisal
 
نظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In Educationنظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In EducationEt3lum.com
 
2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed amin2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed aminpromediakw
 
Cloud Computing workshop
Cloud Computing workshopCloud Computing workshop
Cloud Computing workshopAbbas Badran
 
الصف الثانى الاعدادى
الصف الثانى الاعدادىالصف الثانى الاعدادى
الصف الثانى الاعدادىfocuspublish
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهnawal2233
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهnawal2921
 
أنظمة إدارة المحتوى
أنظمة إدارة المحتوىأنظمة إدارة المحتوى
أنظمة إدارة المحتوىEhab Saad Ahmad
 
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأولكتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأولأمنية وجدى
 
بيئات التعلم الإلكتروني
بيئات التعلم الإلكترونيبيئات التعلم الإلكتروني
بيئات التعلم الإلكترونيmnaeer
 
sultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of Educationsultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of EducationThuraya Alghaithi
 
Web2 - ويب٢
Web2 - ويب٢Web2 - ويب٢
Web2 - ويب٢Shahdina
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14Omar Selim
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14Omar Selim
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14Omar Selim
 
BIMarabia14
BIMarabia14BIMarabia14
BIMarabia14Omar Selim
 
BIMarabia14.pdf
BIMarabia14.pdfBIMarabia14.pdf
BIMarabia14.pdfOmar Selim
 
تطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdfتطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdfBahaa Al Zubaidi
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهdhoom000
 
إسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptxإسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptxssusere01cf5
 
في قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماءفي قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماءneamam383
 

Más contenido relacionado

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

الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابيةSalmaalghamdi5
 
التقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابيةالتقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابيةmaalifaisal
 
نظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In Educationنظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In EducationEt3lum.com
 
2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed amin2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed aminpromediakw
 
Cloud Computing workshop
Cloud Computing workshopCloud Computing workshop
Cloud Computing workshopAbbas Badran
 
الصف الثانى الاعدادى
الصف الثانى الاعدادىالصف الثانى الاعدادى
الصف الثانى الاعدادىfocuspublish
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهnawal2233
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهnawal2921
 
أنظمة إدارة المحتوى
أنظمة إدارة المحتوىأنظمة إدارة المحتوى
أنظمة إدارة المحتوىEhab Saad Ahmad
 
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأولكتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأولأمنية وجدى
 
بيئات التعلم الإلكتروني
بيئات التعلم الإلكترونيبيئات التعلم الإلكتروني
بيئات التعلم الإلكترونيmnaeer
 
sultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of Educationsultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of EducationThuraya Alghaithi
 
Web2 - ويب٢
Web2 - ويب٢Web2 - ويب٢
Web2 - ويب٢Shahdina
 
BIMarabia14.pdf
BIMarabia14.pdfBIMarabia14.pdf
BIMarabia14.pdfOmar Selim
 
تطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdfتطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdfBahaa Al Zubaidi
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيهdhoom000
 

Similar a ‫ دراسة الطرق المثلى لتحسين أداء تطبيقات الوب‬ (20)

الحوسبة السحابية
الحوسبة السحابيةالحوسبة السحابية
الحوسبة السحابية
 
التقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابيةالتقرير النهائي للحوسبة السحابية
التقرير النهائي للحوسبة السحابية
 
نظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In Educationنظام دروبال في التعليم - Drupal In Education
نظام دروبال في التعليم - Drupal In Education
 
2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed amin2014الحوسبة السحابية والبيانات الهائلة ahmed amin
2014الحوسبة السحابية والبيانات الهائلة ahmed amin
 
Cloud Computing workshop
Cloud Computing workshopCloud Computing workshop
Cloud Computing workshop
 
الصف الثانى الاعدادى
الصف الثانى الاعدادىالصف الثانى الاعدادى
الصف الثانى الاعدادى
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيه
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيه
 
أنظمة إدارة المحتوى
أنظمة إدارة المحتوىأنظمة إدارة المحتوى
أنظمة إدارة المحتوى
 
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأولكتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
كتاب الأنشطة للحاسب الآلى للصف الثانى الثانوى للترم الأول
 
بيئات التعلم الإلكتروني
بيئات التعلم الإلكترونيبيئات التعلم الإلكتروني
بيئات التعلم الإلكتروني
 
sultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of Educationsultante Of Oman , Ministry of Education
sultante Of Oman , Ministry of Education
 
Web2 - ويب٢
Web2 - ويب٢Web2 - ويب٢
Web2 - ويب٢
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14
 
Bi marabia14
Bi marabia14Bi marabia14
Bi marabia14
 
BIMarabia14
BIMarabia14BIMarabia14
BIMarabia14
 
BIMarabia14.pdf
BIMarabia14.pdfBIMarabia14.pdf
BIMarabia14.pdf
 
تطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdfتطوير تطبيقات الويب التدريجي.pdf
تطوير تطبيقات الويب التدريجي.pdf
 
الحوسبه السحابيه
الحوسبه السحابيهالحوسبه السحابيه
الحوسبه السحابيه
 

Último

إسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptxإسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptxssusere01cf5
 
في قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماءفي قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماءneamam383
 
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...belalabdelmoniem1
 
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...MaymonSalim
 
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .ppt
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .pptالفعل الصحيح والفعل المعتل ونواعه لفيف نقص .ppt
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .pptNaeema18
 
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...MaymonSalim
 
أنواع الحياة والاغراض الشعرية في العصر الجاهلي
أنواع الحياة والاغراض الشعرية في العصر الجاهليأنواع الحياة والاغراض الشعرية في العصر الجاهلي
أنواع الحياة والاغراض الشعرية في العصر الجاهليneamam383
 

Último (7)

إسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptxإسنــــاد الأفعال. إلى الضمائر.pptx
إسنــــاد الأفعال. إلى الضمائر.pptx
 
في قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماءفي قضية اللفظ والمعني والبعض من آراء العلماء
في قضية اللفظ والمعني والبعض من آراء العلماء
 
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...
(بلال عبد المنعم شفيق-الفرقة الثالثة - شعبة عام لغة عربية - كلية التربية بقنا...
 
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...
الكامل في اتفاق الصحابة والأئمة أن من لم يؤمن بمحمد رسول الله فهو كافر مشرك و...
 
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .ppt
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .pptالفعل الصحيح والفعل المعتل ونواعه لفيف نقص .ppt
الفعل الصحيح والفعل المعتل ونواعه لفيف نقص .ppt
 
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...
الكامل في إثبات أن حديث اذهبوا فأنتم الطلقاء حديث آحاد مختلف فيه بين ضعيف ومت...
 
أنواع الحياة والاغراض الشعرية في العصر الجاهلي
أنواع الحياة والاغراض الشعرية في العصر الجاهليأنواع الحياة والاغراض الشعرية في العصر الجاهلي
أنواع الحياة والاغراض الشعرية في العصر الجاهلي
 

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

  • 1. ‫د اسة الطرق المثمى لتحسين أداء تطبيقات الوب‬ ‫ر‬ 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. ‫غير اضين عن فك ة االنتظار ألكثر من 4 ثوان حتى‬ ‫ر‬ ‫ر‬ ‫1-مقدمة‬ ‫تتم عممية تحميل الصفحة، وبالمقابل فإن 34% من‬ ‫ّ‬ ‫تُعتبر سيولة نقل المحتويات وتسريع عممية العرض من‬ ‫مستخدمي الحزمة الضيقة غير مستعدين لالنتظار أكثر‬ ‫أبرز محددات األداء األمثمي في صفحة الوب، حيث‬ ‫من 6 ثواني]2[.‬ ‫أن عة العرض ىي أىم عوامل نجاح الموقع، في‬ ‫سر‬ ‫2-2-التأثير السمبي عمى أرباح الشركات‬ ‫جذب المستخدمين وزيادة األرباح.‬ ‫تنعكس التغيي ات البسيطة في عة تحميل الصفحة‬ ‫سر‬ ‫ر‬ ‫ومع االنتشار الكبير لمحزمة العريضة ‪،Broadband‬‬ ‫واستجابة المخدم لطمبات ائر الموقع، عمى أرباح‬ ‫ز‬ ‫عة الكبي ة غير‬ ‫ر‬ ‫أصبح مستخدمو االتصال ذي السر‬ ‫الشركات بشكل ممموس، حيث تبين لمركز أبحاث‬ ‫ّ‬ ‫مستعدين لالنتظار مدة 8 إلى 10 ثوان كي يتم تحميل‬ ‫ّ‬ ‫جوجل ‪ Google‬أن صفحة الوب ذات 50 نتائ بحث‬ ‫صفحة الوب]1[. لذلك فإن المبرم اليوم، ال يممك‬ ‫تستغرق فت ة 4.5 من الثانية ليتم تحميميا، بينما تستغرق‬ ‫ر‬ ‫سوى 3 إلى 4 ثوان لتحقيق زمن االستجابة واال فإنو‬ ‫صفحة وب ذات 53 نتيجة بحث 9.5 من الثانية، األمر‬ ‫يخاطر بخسا ة زوار الموقع.‬ ‫ر‬ ‫الذي من شأنو التأثير سمباً عمى األرباح اإلعالنية‬ ‫أصبحت اليوم صفحة الوب تحمل أكثر من 55 غرضاً‬ ‫التجارية بنسبة 50%]3[. وتبين لمركز األبحاث أيضاً‬ ‫ا‬ ‫خارجياً ‪ External Objects‬وسطياً، وتتطمب تصريح ً‬ ‫أنو عند تقميل حجم الصفحة الرئيسية لخ ائط جوجل‬ ‫ر‬ ‫عنيا في بداية صفحة الوب، باستخدام مايسمى برؤوس‬ ‫‪ Google Maps‬من 550 ك.ب إلى 57-58 ك.ب،‬ ‫األغ اض ‪ Object Overheads‬التي تؤثر بشكل كبير‬ ‫ر‬ ‫انعكس إيجاباً عمى األرباح اإلعالنية التجارية بنسبة‬ ‫عمى زمن االستجابة.‬ ‫ع األول وبنسبة 50% في األسابيع‬‫50% خالل األسبو‬ ‫وبيدف الحصول عمى األداء األفضل، يجب عمى‬ ‫الثالثة الالحقة]4[.‬ ‫اتباع مبدأ التقميل من طمبات بروتوكول نقل‬ ‫المبرم‬ ‫وقد أعطت مجموعة من االختبا ات عمى موقع‬ ‫ر‬ ‫النصوص الت ابطية ‪ ،HTTP‬والذي يعد من أىم‬ ‫ُ ّ‬ ‫ر‬ ‫مماثمة، حيث أظيرت أن كل 550‬ ‫‪ Amazon‬نتائ‬ ‫الخطوات والميا ات التي يجب عمى مبرمجي الوب‬ ‫ر‬ ‫ء من الثانية من وقت تحميل صفحة الوب يقمل من‬ ‫ُ‬ ‫جز‬ ‫اتباعيا، مع الحفاظ، بنفس الوقت، عمى جاذبية صفحة‬ ‫عممية البيع بنسبة 0%]5[.‬ ‫الوب وجماليتيا.‬ ‫2-3-عدد مستخدمي الموقع‬ ‫2-القضايا األساسية حول مشاكل بطء الوب‬ ‫تُقمل صفحات الوب البطيئة من المصداقية وجودة‬ ‫2-1-عدم رضى الزبون‬ ‫األداء. وىذا ينعكس عمى أي مستخدم الموقع. فكمما‬ ‫ر‬ ‫ال يمكن لموقع الوب أن ينال رضى الزبون عندما‬ ‫ُ‬ ‫ادت مدة استجابة الموقع بشكل غير منطقي أثر ذلك‬ ‫ز‬ ‫تستغرق عممية تحميل الصفحة أكثر من 50 ثوان، دون‬ ‫سمباً عمى رضا ال ائر، وعمى الشركة المالكة لمموقع من‬ ‫ز‬ ‫أي رد يذكر. كما أن مستخدمي الحزمة العريضة أقل‬ ‫حيث الزيا ات واإلي ادات المالية.‬ ‫ر‬ ‫ر‬ ‫تحمالً لمسألة البطء في تحميل الصفحة من مستخدمي‬ ‫عممياً، ىناك عالقة كبي ة بين عدد مستخدمي الموقع‬ ‫ر‬ ‫الحزمة الضيقة ‪.Narrowband‬‬ ‫عة العامل األكثر أىمية بعد‬‫عتو، حيث تُعتبر السر‬‫وسر‬ ‫ي عمى موقع ‪JupiterResearch‬‬‫وفي استطالع أجر‬ ‫ٍ‬ ‫جاذبية تصميم الموقع، وقدرتو عمى شد انتباه المستخدم‬ ‫تبين أن 33% من مستخدمي شبكة الحزمة العريضة‬ ‫بيدف زيادة عدد المستخدمين ]6[.‬ ‫41/2‬
  • 3. ‫ع التأخير‬‫ذاتيا) والذي يعتبر اليوم السبب األكبر لموضو‬ ‫ُ‬ ‫وبالتالي، فمكي تزداد عة التصفح، يجب إظيار‬ ‫سر‬ ‫في االستجابة]01[.‬ ‫المحتويات األكثر أىمية في صفحة الوب بأقل من ثانية‬ ‫2-6-وقت االستجابة األعظمي‬ ‫أو ثانيتين. وبمجرد أن يتعدى الزمن اإلجمالي لتحميل‬ ‫وبسبب نمو حجم صفحة الوب، عانى مستخدمو الحزمة‬ ‫صفحة الوب 6 إلى 8 ثوان، فعمى الموقع أن يضيف‬ ‫ُ‬ ‫الضيقة (65‪ )ISDN ،KB‬من بطء ممحوظ في‬ ‫مؤش ات تحميل معينة كالتغذية الخمفية الخطية ‪Linear‬‬ ‫ر‬ ‫االستجابة. وبالمقابل كان بمقدور مستخدمي شبكات‬ ‫‪ Feedback‬حتى يعطي لم ائر انطباعاً مريحاً ويجعمو‬ ‫ز‬ ‫ُ‬ ‫الحزمة العريضة التصفح عة أكبر.‬ ‫بسر‬ ‫يقبل أن ينتظر فت ةً أطول.‬ ‫ر‬ ‫عة لشبكات الحزمة‬‫كما أن االزدياد في معدل السر‬ ‫2-4-االنطباع األولي لمزبون‬ ‫العريضة كان ع من االزدياد في الحجم والتعقيد‬ ‫أسر‬ ‫يقوم ائر الموقع بشكل عام بأخذ انطباع أولي سريع‬ ‫ز‬ ‫النات عن صفحة الوب متوسطة األداء. وبالتالي فإنو‬ ‫عن الموقع، وىذا االنطباع الذي يستغرق وسطياً 02/1‬ ‫يحق لمستخدمي الحزمة العريضة أن يتوقعوا عة‬ ‫سر‬ ‫من الثانية سيستمر بشكل دائم بالنسبة ليذا ال ائر. حيث‬ ‫ز‬ ‫أكبر في االستجابة.‬ ‫تبين من الد اسات التي أج اىا ‪ Noam Tractinsky‬أن‬ ‫ر‬ ‫ر‬ ‫تنصح شركة كينوت ‪ Keynote‬باستخدام النظرية التالية‬ ‫التقويم الوسطي لجاذبية صفحة الوب بعد عرضيا لمدة‬ ‫لزمن االستجابة من أجل عمميات االتصال ذات‬ ‫ال تتجاوز نصف الثانية، كان مطابقاً لمتقويم الذي تم‬ ‫ّ‬ ‫عات متفاوتة:‬‫سر‬ ‫أخذه بعد 10 ثوان. لذلك، أصبح من الواضح أنو ليس‬ ‫3 إلى 2 ثوان لمشبكات الخاصة بالشركات،‬ ‫‪‬‬ ‫لدى صاحب الموقع سوى وقت قصير جداً ليضفي‬ ‫ُ‬ ‫أو المنازل التي لدييا عة وجودة عالية.‬ ‫سر‬ ‫طابعاً أولياً جميالً عمى موقعو]7[.‬ ‫2 إلى . ثوان لشبكات ‪.DSL‬‬ ‫‪‬‬ ‫2-5-نمو حجم صفحة الوب‬ ‫نما حجم صفحة الوب خالل السنوات الماضية بشكل‬ ‫13 إلى 12 ثانية لشبكات الياتف ‪Dial Up‬‬ ‫‪‬‬ ‫ممحوظ. فقد ازداد حجم صفحة الوب بشكل وسطي من‬ ‫أي بما يقابل 110 ك.ب كل 13 ثانية.‬ ‫سنة 2113 حتى اليوم أكثر من 2.2 م ة، أي من‬ ‫ر‬ ‫إن ىذه التوصيات قابمة لمتطبيق عمى صفحات الوب‬ ‫9.27 ك.ب إلى أكثر من 302 ك.ب. وخالل الفت ة‬ ‫ر‬ ‫الرئيسية أو الصفحات األولى لممواقع، حيث يتنقل‬ ‫ذاتيا أيضاً، ازداد عدد األغ اض ‪ Objects‬واألدوات‬ ‫ر‬ ‫عة أكبر. ولكن ىناك بعض‬ ‫المستخدم عادةً بسر‬ ‫المضافة إلى صفحة الوب (كممفات إضافية، صور،‬ ‫ِ‬ ‫وريقات أسموب متشمشل ‪ ،CSS‬إخطاطات جافا‬ ‫االستثناءات، فبالنسبة لمصفحات التي يود المستخدم‬ ‫أخذ وقتو في تصفحيا، كصفحة خبر معين مثالً، فإن‬ ‫‪ )JavaScript‬بنسبة تقارب الضعف من 9..3 إلى‬ ‫تقسيم مثل ىذه الصفحة قد يكون عجاً لممستخدم، كما‬ ‫مز‬ ‫7.74 غرض في الصفحة الواحدة]8[ ]9[.‬ ‫قد يصعب عممية البحث، إن اىتمام المستخدم‬ ‫وعندما كانت صفحة الوب تحوي عدداً قميالً من‬ ‫ع قد يجعمو مستعداً لتحمل المشاكل الموجودة‬‫بالموضو‬ ‫األغ اض، كان حجم صفحة الوب ىو العامل الرئيسي‬ ‫ر‬ ‫في الصفحة.‬ ‫في مسألة االستجابة. إال أنو ومع زيادة عدد األغ اض‬ ‫ر‬ ‫ع تأخير‬‫في صفحة الوب الواحدة، أصبح موضو‬ ‫االستجابة متعمقاً برؤوس األغ اض (وليس الصفحة بحد‬ ‫ر‬ ‫41/3‬
  • 4. ‫القواعد، كاستخدام تعميمات ‪ Spacing‬و ‪ Sprites‬في‬ ‫3-التحسينات المقترحة ألداء صفحات الوب‬ ‫الممفات وتحويل‬ ‫وريقات األسموب المتشمشل، لدم‬ ‫ىنالك الكثير من اإلج اءات والتعديالت التي يمكن‬ ‫ُ‬ ‫ر‬ ‫ي ‪ Graphical Text‬إلى نص يعال من‬ ‫ُ‬ ‫النص الصور‬ ‫تطبيقيا عمى صفحة الوب بيدف تحسين األداء. فمثال‬ ‫ً‬ ‫قبل وريقات األسموب المتشمشل، واستخدام الخ ائط‬ ‫ر‬ ‫يمكن لممبرم أن ي ّع من عممية التصفح في الموقع‬ ‫ُسر‬ ‫ُ‬ ‫الصورية واأللوان لمخمفية، ومحاولة تحسين صور أو‬ ‫من خالل عرض محتويات الصفحة وتأخير عرض‬ ‫ممفات الوسائط المتعددة، ثم تفعيل عممية التخبئة‬ ‫المحتويات الخارجية ورؤوس األغ اض قدر اإلمكان،‬ ‫ر‬ ‫‪ Caching‬من أجل األغ اض المستديمة ‪Persistent‬‬ ‫ر‬ ‫وىذا ما يسمى باإلنسيابية ‪ .Streamlining‬كما يجب‬ ‫‪ Objects‬وتوزيعيم عمى مخدمات مختمفة لمتقميل من‬ ‫ّ‬ ‫اعتماد بعض القواعد والمبادئ، كالتقميل من طمبات‬ ‫مشاكل التأخير. وأخير، ضغط برتوكول نقل النصوص‬ ‫اً‬ ‫بروتوكول نقل النصوص الت ابطية، واستخدام وريقات‬ ‫ر‬ ‫الت ابطية، لمتخمص مما يقارب .9% من حجم ممفات‬ ‫ر‬ ‫األسموب المتشمشل بشكل مناسب لعرض البيانيات‬ ‫رماز لغة تأشير النص الت ابطي، ووريقات األسموب‬ ‫ر‬ ‫والوسائط المتعددة ‪ Graphics & Multimedia‬بشكل‬ ‫المتشمشل، واخطاطات جافا.‬ ‫أمثمي ومناسب لخصوصية صفحة الوب.‬ ‫وفيمايمي الخطوات التي ى اتباعيا لرفع أداء صفحات‬ ‫نر‬ ‫إن إعادة بناء صفحة الوب وتعديل رماز لغة تأشير‬ ‫الوب:‬ ‫النص الت ابطي ‪ HTML‬لمصفحة يسيم في زيادة عة‬ ‫سر‬ ‫ر‬ ‫الموقع، وذلك عن طريق حذف الواصفات واألساليب‬ ‫3-1-التحسينات المقترحة عمى مستوى صفحة الوب‬ ‫الداخمية ‪ ،Inline Style‬والتأكد من خمو الصفحة من‬ ‫ة عن‬ ‫3-1-1-التقميل من عدد الطمبات الصادر‬ ‫أي عنصر مكتوب بطريقة تؤدي إلى التقميل من عة‬ ‫سر‬ ‫برتوكول نقل النصوص الت ابطية‬ ‫ر‬ ‫الموقع. كما أن استخدام تقانات وريقات األسموب‬ ‫تُعتبر طمبات برتوكول نقل النصوص الت ابطية عامالً‬ ‫ر‬ ‫المتشمشل يسيم بشكل كبير في تحقيق ىذا اليدف، مثل‬ ‫ُ‬ ‫أساسياً في التأثير عمى عة صفحة الوب، لذلك يجب‬ ‫سر‬ ‫االستغناء عن بعض العناصر الرماز الخاصة بمغة‬ ‫التقميل منيا قدر اإلمكان. مما يتطمب تقميل عدد‬ ‫تأشير النص الت ابطي كالعناصر ذات الخاصية‬ ‫ر‬ ‫األغ اض الممي ة والفريدة في الصفحة والتي ىي عبا ة‬ ‫ر‬ ‫ز‬ ‫ر‬ ‫الجدولية ‪ ،Table-Based Elements‬وتجريد الرماز‬ ‫عن طمب من ع برتوكول نقل النصوص الت ابطية،‬ ‫ر‬ ‫نو‬ ‫من التصميم واعادة صياغتيا، وتحويل األسموب‬ ‫والذي يستمزم حمة ذىاب واياب إلى المخدم. وكمما اد‬ ‫ز‬ ‫ّ‬ ‫ر‬ ‫المضمن ‪ Embedded Style‬إلى أساس قواعدي‬ ‫ُ‬ ‫عدد األغ اض اد التأخير في االستجابة، وعندما يكون‬ ‫ر ز‬ ‫‪ Rule-Based‬معرف بوريقات أسموب متشمشل خارجي.‬ ‫ُ ّ‬ ‫عدد األغ اض أكثر من أربعة، فإن رؤوس األغ اض‬ ‫ر‬ ‫ر‬ ‫وكما ىو متعارف عميو، يجب التصريح عن وريقات‬ ‫تُسيطر عمى زمن تحميل الصفحة.‬ ‫األسموب المتشمشل المستخدمة أعمى صفحة لغة تأشير‬ ‫وبالتالي فإن تقميل من عدد األغ اض في صفحة الوب‬ ‫ر‬ ‫النص الت ابطي أي قبل رماز المتن ‪،Body Code‬‬ ‫ر‬ ‫سيقمل من عدد الطمبات الالزمة لدورن العمل عمى‬ ‫ا‬ ‫عمى عكس إخطاطات جافا التي من األفضل وضعيا‬ ‫الصفحة، وىكذا سيقل الثقل الناجم عن رؤوس‬ ‫في نياية رماز المتن.‬ ‫عة عمل‬‫األغ اض، والذي ينعكس بدو ه عمى سر‬ ‫ر‬ ‫ر‬ ‫ومن الميم أيضاً محاولة التقميل من طمبات بروتوكول‬ ‫الصفحة، ويزيد من فاعمية ىذه الطمبات.‬ ‫نقل النصوص الت ابطية، ويتم ذلك باتباع بعض‬ ‫ر‬ ‫41/4‬
  • 5. ‫المشكمة ىنا بأن ىذه الطريقة تحتاج إلى طمبات‬ ‫يمكن اتباع مايمي لمتقميل من طمبات برتوكول نقل‬ ‫ُ‬ ‫إضافية.‬ ‫النصوص الت ابطية‬ ‫ر‬ ‫‪ ‬ربط وريقات األسموب المتشمشل أو إخطاطات جافا‬ ‫‪ ‬تحويل النصوص الصورية إلى نصوص نمطية‬ ‫وىي طريقة مماثمة لعممية تقميل طمبات برتوكول نقل‬ ‫تُستخدم النصوص الصورية عادةً من أجل العناوين أو‬ ‫وريقات‬ ‫النصوص الت ابطية، ويتم من خالليا دم‬ ‫ر‬ ‫القوائم لتخزين مظير معين، ولكن حتى اليوم ال‬ ‫جية تمقائياً،‬‫األسموب المتشمشل أو إخطاطات جافا الخار‬ ‫تستطيع محركات البحث قرءة النص المدم بالصور.‬ ‫ا‬ ‫وذلك عن طريق ربطيم ببعض عمى المخدم وىذا ما‬ ‫ّ‬ ‫مما يضطرنا إلى طمبات إضافية غير ضرورية. لذلك‬ ‫يسمى بدتخييط األغ اض ‪.Suturing‬‬ ‫ر‬ ‫ينبغي استخدام وريقات األسموب المتشمشل لتنسيق‬ ‫‪ ‬تخزين الممفات الديناميكية في الخبء‬ ‫العناوين والقوائم.‬ ‫يمكن لممبرم إضافة عناوين أسية في أعمى الصفحة‬ ‫ر‬ ‫ُ‬ ‫‪ ‬استخدام ت اكبات نصية ‪Text Overlays‬‬ ‫ر‬ ‫تيدف إلى تفعيل عمل الخابية، مما يسمح بتخزين‬ ‫نضطر في بعض األحيان من استخدام صور تحوي‬ ‫الممفات الستخداميا الحقاً دون الحاجة لطمبيا من‬ ‫نصوصاً، وىذا ما يزيد من حجم الصور. لذلك يجب أن‬ ‫المخدم.‬ ‫نعزل الصو ة عن النص المرتبط بيا باستخدام وريقات‬ ‫ر‬ ‫‪ ‬التخمص من اإلطا ات ‪(i)Frames‬‬ ‫ر‬ ‫األسموب المتشمشل، مما ي ّع من فت ة استجابة المخدم.‬ ‫ر‬ ‫ُسر‬ ‫تُستخدم اإلطا ات في أكثر من 3.% من صفحات‬ ‫ر‬ ‫‪ ‬تحويل الف اغات الصورية بين الخاليا إلى ىوامش‬ ‫ر‬ ‫الوب، وتستخدم عادة من أجل عرض اإلعالنات‬ ‫‪ Margins‬أو حشو ‪Padding‬‬ ‫التجارية مما يسبب بطئ ً في أداء صفحات الوب ألنيا‬ ‫ُ ا‬ ‫لقد اعتاد المبرمجون عمى استخدام صور صغي ة األبعاد‬ ‫ر‬ ‫تفرض المزيد من الطمبات، وفي بعض األحيان تتطمب‬ ‫بيدف وضع ف اغات بيضاء داخل تصميم الموقع.‬ ‫ر‬ ‫عمل صفحات وب بأكمميا بداخل صفحات ى.‬ ‫أخر‬ ‫يجب استبدال كل الف اغات البيضاء الخاصة بالتصميم،‬ ‫ر‬ ‫3-1-2-تغيير حجم الصور وتحسينو‬ ‫لتصبح عمى مستوى وريقات األسموب المتشمشل‬ ‫يطمح مصنعو الكامي ات الرقمية اليوم لزيادة الدقة في‬ ‫ر‬ ‫باستخدام تعميمات اليوامش والحشو.‬ ‫الصو ة، مما أدى إلى زيادة أحجام الصور بشكل جعل‬ ‫ر‬ ‫‪ ‬دمج الصور و استخدام تعميمة ‪Sprite‬‬ ‫منيا غير مناسبة لموب. لذلك يجب إعادة تعديل حجم‬ ‫يمكن تقميل عدد الطمبات التي تحتاجيا صفحة الوب‬ ‫الصور لتصل إلى األبعاد المثالية المناسبة لمعرض‬ ‫الصور المتقاربة وجعميا صو ة واحدة‬ ‫ر‬ ‫من خالل دم‬ ‫عمى صفحات الوب.‬ ‫مركبة ثم استخدام خ ائط الصور ‪ Image map‬أو‬ ‫ر‬ ‫3-1-3-تحسين الوسائط المتعددة‬ ‫تعميمة ‪ Sprite‬كبديل عن عدة طمبات.‬ ‫تُكون الوسائط المتعدة قسماً صغير فقط من طمبات‬ ‫اً‬ ‫المتشمشل‬ ‫األسموب‬ ‫وريقات‬ ‫وتحسين‬ ‫‪ ‬دمج‬ ‫المخدم ولكنيا تشغل حيز كبير من الحركة التدفقية عمى‬ ‫اً اً‬ ‫ّ‬ ‫واخطاطات جافا‬ ‫الشبكة، ننصح بالقيام بالعمميات التالية من أجل تحسين‬ ‫يوجد العديد من المبرمجين الذين يقومون بإنشاء أكثر‬ ‫الوسائط المتعددة.‬ ‫من وريقة أسموب متشمشل مختمفة ومن ثم استخدام‬ ‫الوريقة المطموبة في صفحاتيم بحسب الحاجة. وتكمن‬ ‫41/5‬
  • 6. ‫الفيديو ‪ Video Noise‬باستخدام‬ ‫تقميل ضجي‬ ‫-‬ ‫‪ ‬تحسين الفيديو من أجل الوب‬ ‫المرشحات ‪.Filters‬‬ ‫إلج اء التحسينات المناسبة لمفيديو عمى الوب، يجب‬ ‫ر‬ ‫تعديل المباينة في المون ‪.Contrast‬‬ ‫-‬ ‫ضمان أن تكون قصي ة في زمن عمميا، وصغي ة من‬ ‫ر‬ ‫ر‬ ‫‪( Gamma‬من أجل ع‬ ‫تنو‬ ‫تعديل مستوى الغاما‬ ‫-‬ ‫ِ‬ ‫حيث األبعاد، ومعدة من قبل مجموعة كودك ‪Codec‬‬ ‫المنصات ‪.)Cross-platform‬‬ ‫المناسبة.‬ ‫استعادة األسود واألبيض.‬ ‫-‬ ‫‪ ‬معدالت وأبعاد إطار الفيديو‬ ‫التشابك ‪.Deinterlace‬‬ ‫-‬ ‫إن زيادة معدل اإلطا ات، أي زيادة عدد اإلطا ات في‬ ‫ر‬ ‫ر‬ ‫اختيار أفضل أنواع الكودك لتتماشى مع ع العمل‬ ‫نو‬ ‫-‬ ‫الثانية يزيد من مرونة الحركة لمصو ة. من ناحية ى،‬ ‫أخر‬ ‫ر‬ ‫الم اد فعمو.‬ ‫ر‬ ‫إن زيادة إطار واحد لمعدل اإلطار ينت بيانات أكثر‬ ‫ُ‬ ‫3-1-4-تحويل رماز إخطاطات جافا إلى وريقات‬ ‫بمعدل 1.%، أي أن معدل اإلطار (70 إطار بالثانية‬ ‫األسموب المتشمشل‬ ‫‪ )fps‬ينت بيانات أكثر بمعدل 1.% عن معدل اإلطار‬ ‫ُ‬ ‫(80 إطار بالثانية ‪ .)fps‬وقد أظيرت معدالت اإلطا ات‬ ‫ر‬ ‫أصبحت نصوص إخطاطات جافا مستعممة بشكل واسع‬ ‫أن ما يقل عن 30 إلى .0 ‪ fps‬قد قممت من إد اك‬ ‫ر‬ ‫في الوب بنسبة تقارب 8.48%. وتستخدم إخطاطات‬ ‫المستخدمين لجودة الفيديو]11[. كما أن أصغر األبعاد‬ ‫جافا في العديد من الحاالت، مثل التحقق من محتوى‬ ‫االستما ات ‪ ،Form validation‬والقوائم وانسيابية مرور‬ ‫ر‬ ‫الممكن استخداميا ىي 132 ‪ 341 x‬بكسل ‪.Pixels‬‬ ‫المؤشر ‪ ،Rollover‬وكشف معمومات المتصفح،‬ ‫‪ ‬التقميل من الضجيج والحركة‬ ‫وتستخدم أيضاً في اإلحصاءات، والمزيد من تطبيقات‬ ‫التقميل من حركة الكامير باستخدام قاعدة لمكامير‬ ‫ا‬ ‫ا‬ ‫-‬ ‫إذا أمكن.‬ ‫أجاكس ‪ Ajax‬المعقدة. وباستخدام وريقات األسموب‬ ‫المتشمشل أصبح بإمكان المبرم اليوم أن يحصل عمى‬ ‫التقميل من حركة اليدف الم اد تصوي ه.‬ ‫ر‬ ‫ر‬ ‫-‬ ‫عدد من ىذه التقانات بفعالية أكبر.‬ ‫استخدام الكثير من الضوء.‬ ‫-‬ ‫استخدام خمفية بسيطة.‬ ‫-‬ ‫3-1-5-استخدام طريقة االشتمام ‪ Sniffing‬من‬ ‫تفادي استخدام التقريب والتبعيد ‪ Zoom‬ودو ان‬ ‫ر‬ ‫-‬ ‫جانب المخدم‬ ‫العدسة.‬ ‫تُستخدم إخطاطات جافا بشكل ممحوظ من أجل عممية‬ ‫استخدام أدوات محترفة.‬ ‫-‬ ‫اشتمام معمومات المتصفح ‪ ،Browser Sniffing‬من‬ ‫استخدام صيغ وأشكال رقمية.‬ ‫-‬ ‫حيث ع ورقم اإلصدار وقدرتو عمى دعم بعض‬ ‫النو‬ ‫إذا لم يتوافر قاعدة كامير، فباإلمكان استخدام أداة‬ ‫ا‬ ‫-‬ ‫التعميمات. لذلك، ولكي نقمل من حمل إخطاطات جافا،‬ ‫لمتثبيت التوازني (‪ )http://www.ken-lab.com‬أو‬ ‫فعمى المبرم استخدام تعميمات من جانب المخدم.‬ ‫عدسات لمصور الثابتة.‬ ‫عة‬‫3-1-6-تحسين إخطاطات جافا من أجل سر‬ ‫‪ ‬تعديل الفيديو‬ ‫التنفيذ وحجم الممف‬ ‫تقميل األبعاد لتقابل معايير الوب.‬ ‫-‬ ‫بعد استبدال أكبر عدد ممكن من إخطاطات جافا‬ ‫استخدام معدل اإلطار األقل إن أمكن.‬ ‫-‬ ‫بوريقات األسموب المتشمشل واستخدام التقانات البرمجية‬ ‫تقطيع الحواف غير الواضحة من الصور.‬ ‫-‬ ‫41/6‬
  • 7. ‫3-1-11-تشغيل إخطاطات جافا بحكمة‬ ‫ى الحقا‬ ‫ً‬ ‫من جانب المخدم، يتوجب تحسين كما سنر‬ ‫جية المرتبطة بصفحة‬‫تُعتبر النصوص البرمجية الخار‬ ‫إخطاطات جافا المتبقية لمتقميل من حجم الممف.‬ ‫الوب عن طريق الترويسة ‪ Header‬مض ة، ألنيا تؤخر‬ ‫ر‬ ‫استخدام أسماء مختص ة لألغ اض،‬ ‫ر‬ ‫ر‬ ‫يستطيع المبرم‬ ‫عممية عرض محتويات متن الصفحة. ألن ىذه‬ ‫والمتح الت ‪ ،Variables‬والوظائف ‪Function names‬‬ ‫و‬ ‫ات التي تحصل قبل تحميل محتويات متن‬ ‫التأخير‬ ‫لمتقميل من عدد البايتات ‪ .Bytes‬يمكن لممبرم أيضا‬ ‫ً‬ ‫ُ‬ ‫الصفحة، من شأنيا أن تؤدي إلى ىروب المستخدم.‬ ‫أن يستخدم تنظيماً آلياً ليذه العممية عن طريق استخدام‬ ‫أداة كد ‪ w3compiler‬لتقوم باختصار ما ذكر بشكل‬ ‫ُ‬ ‫3-2-تحسين وريقات األسموب المتشمشل‬ ‫آلي، وتحسين النصوص البرمجية.‬ ‫3-2-1-تجميع المنتقيات ‪ Selectors‬مع التصاريح‬ ‫3-1-7- تحويل التخطيط الجدولي ‪Table Layout‬‬ ‫‪ Declarations‬المشتركة‬ ‫يسمح استخدام وريقات األسموب المتشمشل، بجمع عدد‬ ‫إلى التخطيط المتعمق بوريقات األسموب المتشمشل‬ ‫إن استخدام وريقات األسموب المتشمشل لتخطيط صفحة‬ ‫من المنتقيات التي تتشارك بالتصريحات نفسيا، حيث‬ ‫الوب يؤمن حفظ كمية كبي ة من الرماز، بنسبة تصل‬ ‫ر‬ ‫تسمح ىذه التقنية التحسينية بتطبيق التنسيقات ذاتيا‬ ‫من .3 إلى 1.%. لذلك ينبغي عمى المبرم أ الً أن‬ ‫و‬ ‫عمى عدة منتقيات منفصمة بعضيا عن بعض باستخدام‬ ‫فواصل، لحفظ مساحة أكبر.‬ ‫يمقي نظ ة إلى صفحتو ى إن كان باإلمكان استخدام‬ ‫لير‬ ‫ر‬ ‫مثال:‬ ‫قوائم وريقات األسموب المتشمشل وأوامر ‪ divs‬لتحاكي‬ ‫{ ‪.sitehead‬‬ ‫التأثي ات التي عادة ما تطبق عن طريق استخدام‬ ‫ر‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫الجداول.‬ ‫}‬ ‫{ ‪.sitenav‬‬ ‫3-1-8-استبدال رماز األسموب الداخمي بقواعد‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫}‬ ‫وريقات األسموب المتشمشل‬ ‫تصبح:‬ ‫تُعتبر ىذه العممية ميمة جداً، حيث إنيا تحفظ عرض‬ ‫{ ‪.sitehead, .sitenav‬‬ ‫الحزمة ‪ Bandwidth‬المتعمقة بالشبكة، كما تُقمل من‬ ‫;‪font-weight: normal; font-size:12px‬‬ ‫}‬ ‫مشاكل عمميات الصيانة. حيث إن تجريد صفحة الوب‬ ‫3-2-2- تجميع التصاريح مع المنتقيات المشتركة‬ ‫لتتمثل بالبنية التأسيسية فقط واستبدال أي أسموب داخمي‬ ‫بجمع عدة‬ ‫تسمح وريقات األسموب المتشمشل لممبرم‬ ‫بقواعد وريقات األسموب المتشمشل، يساعد في تحسين‬ ‫ُ‬ ‫ُ ٍ‬ ‫تصاريح ذات منتق مشترك داخل مجموعة قاعدية‬ ‫صفحة لغة تأشير النص الت ابطي بشكل كمي.‬ ‫ر‬ ‫واحدة، منفصمة عن األخريات باستخدام فاصمة‬ ‫3-1-9-تقميل الوقت البدائي لمعرض‬ ‫منقوطة. وتساعد ىذه العممية عمى تطبيق عدد من‬ ‫بإمكان المبرم أن يطور من عة الموقع الخاص بو‬ ‫سر‬ ‫التصاريح عمى منتق واحد فقط لحفظ المساحة.‬ ‫من خالل تحميل شيء سريع وذي فائدة لمفت االنتباه‬ ‫مثال:‬ ‫‪Weather‬‬ ‫صفحة‬ ‫تظير‬ ‫مثال،‬ ‫البدء.‬ ‫في‬ ‫} ;‪body { font-size: 1em‬‬ ‫‪ Underground‬الرئيسية نموذج البحث المتعمق بحالة‬ ‫} ;000# :‪body{ color‬‬ ‫تصبح:‬ ‫ى من الشاشة.‬‫الجو عة في ال اوية العموية اليسر‬ ‫ز‬ ‫بسر‬ ‫} ;000# :‪body{ font-size: 1em; color‬‬ ‫41/7‬
  • 8. ‫محددة، حيث إن معظم متصفحات االنترنت الحديثة،‬ ‫3-2-3-دمج التنسيقات المتشابية داخل صفوف‬ ‫تدعم ىذه التقنية التي تسمح لمصممي الوب بأن‬ ‫‪ Classes‬مشتركة‬ ‫يستيدفوا عنصر لو صفة معينة، ويتم ذلك باستخدام‬ ‫اً‬ ‫بتجميع‬ ‫تسمح وريقات األسموب المتشمشل لممبرم‬ ‫الطرق األربعة التالية:‬ ‫مجموعة من التصريحات التي تُمثل تنسيقاً معيناً داخل‬ ‫]‪[att‬‬ ‫-‬ ‫صف معين وبالتالي يمكن لممبرم استخدام ىذا الصف‬ ‫]‪[att=val‬‬ ‫-‬ ‫]‪[att~=val‬‬ ‫-‬ ‫أكثر من م ة.‬ ‫ر‬ ‫-‬ ‫3-2-4-استخدام خاصية الو اثة ‪Inheritance‬‬ ‫ر‬ ‫]‪[att |=val‬‬ ‫3-3-تحسين إخطاطات جافا‬ ‫ة‬ ‫لمتخمص من التصاريح المتكرر‬ ‫3-3-1-حذف تعميقات إخطاطات جافا‬ ‫يمكن استخدام خاصية الو اثة وجعل المنتقيات تأخذ‬ ‫ر‬ ‫ُ‬ ‫يمكننا حذف كل تعميقات إخطاطات جافا المتعارف‬ ‫قيميا من التصاريح التي تسبقيا وذلك حسب ورود ىذه‬ ‫عمييا بالرموز // أو /* */. فيي ال تعطي أي قيم‬ ‫المنتقيات داخل شج ة الصفحة، وبيذه الطريقة يتم‬ ‫ر‬ ‫لممستخدم النيائي وتقوم فقط بزيادة حجم الممف.‬ ‫التخمص من التصاريح المتكر ة. حيث يقوم العنصر‬ ‫ر‬ ‫3-3-2-التعميقات الظرفية‬ ‫بتوارث الخصائص من العنصر األب إال إذا ذكر شيء‬ ‫يجب عمى المبرم أن يكون حذر اتجاه نظام التعميق‬ ‫اً‬ ‫خالفاً لذلك.‬ ‫الظرفي الخاص بد ‪ Internet Explorer‬والذي غالباً ما‬ ‫3-2-5-استخدام صيغ وريقات األسموب المتشمشل‬ ‫يستخدم من أجل النصوص البرمجية غير المدعومة من‬ ‫المختزلة‬ ‫قبل متصفح معين ألنيا ستزيد من حجم الممف‬ ‫يمكن لممبرم اخت ال العديد من قيم التصاريح. فمثالً،‬ ‫ز‬ ‫ُ‬ ‫البرمجي، ومن ثَم من األفضل استخدام تعميمات برمجية‬ ‫عوضاً عن تحديد قيمة المون باستخدام الترميز الست‬ ‫ّ‬ ‫مدعومة من جميع المتصفحات.‬ ‫ي ‪ rrggbb‬يمكنو استخدام االختصار ‪ .rgb‬ىناك‬‫عشر‬ ‫مثال عمى نظام التعميق الظرفي:‬ ‫ى التي تأخذ قيماً‬‫أيضاً العديد من التصاريح األخر‬ ‫"‪<!--[if lt IE 7]> <script src="patch.js‬‬ ‫مختزلة كالخطوط والحواف واليوامش والحشو.‬ ‫>--]‪type="text/javascript" > </script> <![endif‬‬ ‫3-2-6-اختصار أسماء التعريف ‪ ID‬وأسماء الصفوف‬ ‫3-3-3-تقميل المساحات البيضاء‬ ‫الطويمة‬ ‫تُعتبر إخطاطات جافا منصفة لقضية المساحات‬ ‫إن األسماء الطويمة لمصفوف قد تكون أكثر فيماً من‬ ‫البيضاء إلى حد ما، وبإمكان المبرم أن يقمل ىذه‬ ‫قبل المبرمجين، إال أن ىذا األسموب في التسمية‬ ‫المساحات بسيولة دون أن يؤثر عمى عمل الموقع.‬ ‫يضطرنا في النياية إلى تحميل بايتات إضافية (عمى‬ ‫ة قدر‬ ‫3-3-4-استخدام التعميمات البرمجية المختصر‬ ‫األقل عند أول عممية تشغيل لوريقات األسموب‬ ‫اإلمكان‬ ‫المتشمشل).‬ ‫بإمكان المبرم أن يستخدم عدداً من التعميمات الخاصة‬ ‫3-2-7-االستفادة من مي ات اإلصدا ات الحديثة‬ ‫ر‬ ‫ز‬ ‫بإخطاطات جافا التي تكون مختص ة عن تعميمات‬ ‫ر‬ ‫لوريقات األسموب المتشمشل‬ ‫ى. مثالً يمكن لممبرم استخدام ++‪ x‬عوضاً عن‬‫أخر‬ ‫قدم اإلصدار 3 واإلصدار 2 من وريقات األسموب‬ ‫ى المختص ة.‬ ‫ر‬ ‫1+‪ x=x‬وىناك العديد من التعميمات األخر‬ ‫المتشمشل تقنية تحديد التصريحات التي ليا واصفات‬ ‫41/8‬
  • 9. ‫3-4-تحسين أجاكس‬ ‫3-3-5-استخدام سالسل ‪ Strings‬ثابتة‬ ‫3-4-1-تطبيق أجاكس بما يقابل المشكمة تماما‬ ‫يمكن لممبرم تعريف سالسل تحوي قيمة نصية تُستخدم‬ ‫ُ‬ ‫إن استخدام أجاكس قد يقودنا إلى مجموعة من‬ ‫بكث ة داخل الرماز، وبيذه الطريقة يستطيع استخدام اسم‬ ‫ر‬ ‫غم من صغر حجم الطمبات، فإن الذىاب‬‫السمبيات، فبالر‬ ‫المتحول الذي يحوي سالسل دون الحاجة إلى إعادة‬ ‫إلى المخدم والعودة إلى الزبون قد يستغرق مدة طويمة.‬ ‫كتابة القيمة النصية كمما احتاج إلييا، وىذا بالطبع يقمل‬ ‫ُ‬ ‫لذلك فمن األفضل استخدام أجاكس عند الحاجة فقط،‬ ‫من حجم الممف.‬ ‫وبطريقة مدروسو.‬ ‫3-3-6-تجنب كتابة تعميمات مستحيمة التنفيذ‬ ‫3-4-2-استخدام مكتبة أجاكس َّمة وذات تصميم‬ ‫مدع‬ ‫يجب عمى المبرم أن يكون حذر عند كتابة الرماز،‬ ‫اً‬ ‫جيد‬ ‫ع في أخطاء منطقية. مثل كتابة تعميمات داخل‬‫من الوقو‬ ‫يجب عمى المبرم استخدام مكتبة تدعم المي ات التالية،‬ ‫ز‬ ‫قطعة برمجية شرطية أو حمقة مستحيمة التحقق.‬ ‫وذلك ليستفيد من مي ات أجاكس بشكل مثالي:‬ ‫ز‬ ‫3-3-7-تقصير أسماء المتحوالت والوظائف المعرفة‬ ‫اتصاالت أجاكس‬ ‫-‬ ‫من قبل المستخدم‬ ‫تسييالت في الوصول إلى العقد المطموبة في ممف‬ ‫-‬ ‫من أجل القد ة عمى القيام بق اءة جيدة، يقوم المبرم‬ ‫ر‬ ‫ر‬ ‫لغات التأشير الموسعة‬ ‫بتعريف متح الت ليا أسماء تحمل دالالت واضحة، مما‬ ‫و‬ ‫تنظيم األحداث‬ ‫-‬ ‫يقودنا إلى زيادة كبي ة في عدد من البايتات العديمة‬ ‫ر‬ ‫التأثي ات المرئية‬ ‫ر‬ ‫-‬ ‫األىمية. وعمى المبرم اختصار األسماء قدر اإلمكان.‬ ‫3-4-3-التقميل من متطمبات طمب بروتوكول نقل‬ ‫3-3-8-القيم االفت اضية‬ ‫ر‬ ‫النصوص الت ابطية‬ ‫ر‬ ‫ا‬ ‫ىناك العديد من األنماط والوظائف التي تأخذ قيم ً‬ ‫تبعاً لمواصفات بروتوكول نقل النصوص الت ابطية، ال‬ ‫ر‬ ‫افت اضية دون الحاجة إلى التصريح عنيا. وبالتالي عمى‬ ‫ر‬ ‫يمكن إرسال أكثر من طمبين إلى المخدم بآن معاً من‬ ‫ُ‬ ‫المبرم االستفادة من ىذه المي ة ليقمل من حجم الممف‬ ‫ز‬ ‫المتصفح نفسو، وعمى المبرم أخذ ىذه المشكمة‬ ‫قدر االمكان.‬ ‫بالحسبان عن طريق التقميل من متطمبات الطمب قدر‬ ‫3-3-9-النظر في استخدام أجا ‪ Ajah‬كحل بديل‬ ‫اإلمكان لتسريع العمل.‬ ‫عن الـ أر إس إس ‪ RSS‬و الجيسون ‪ JSON‬ولغات‬ ‫3-4-4-اختيار أنماط البيانات بشكل صحيح قبل‬ ‫التأشير الموسعة ‪ XML‬عند الحاجة ليا‬ ‫اإلرسال‬ ‫أجا ىو نمط مؤلف من إخطاطات جافا غير المت امنة‬ ‫ز‬ ‫قد تكون طمبات أجاكس صغي ة، ولكن ىناك بكل تأكيد‬ ‫ر‬ ‫ولغة تأشير النص الت ابطي، بحيث يقوم المبرم بدفع‬ ‫ر‬ ‫اختالفات في الحجم بين أنواع األنماط التي تمثل بيا‬ ‫الردود من المخدم بشكل مترجم عمى شكل لغة تأشير‬ ‫أخذ الحذر من أنواع االنماط‬ ‫البيانات. فعمى المبرم‬ ‫نص ت ابطي عوضاً عن الجيسون ولغات التأشير‬ ‫ر‬ ‫المستخدمة عند اإلرسال.‬ ‫ع من‬‫الموسعة، لعرضيا مباش ةً عمى الموقع، ممايسر‬ ‫ر‬ ‫عممية عرض المعمومات المطموبة من المخدم عمى‬ ‫أجي ة المستخدمين.‬ ‫ز‬ ‫41/9‬
  • 10. ‫عناصر الصفحة. لذلك، فإن تقميل عدد أسماء المخدم‬ ‫ة وسطية خاصة بإخطاطات‬ ‫3-4-5-توظيف ذاكر‬ ‫لكل صفحة سيقوم بتقميل الضغط الناجم عن عمميات‬ ‫جافا‬ ‫مقابمة نظام اسم النطاق.‬ ‫تعريف مصفوفة تحوي الطمبات التي‬ ‫يمكن لممبرم‬ ‫ُ‬ ‫3-5-3- ضغط بروتوكول نقل النصوص الت ابطية‬ ‫ر‬ ‫تحتاجيا صفحتو من األجاكس، وبالمقابل يعرف‬ ‫ُ ّ‬ ‫إن ضغط بروتوكول نقل النصوص الت ابطية ىي طريقة‬ ‫ر‬ ‫مصفوفة لحفظ الردود الواردة من المخدم وبيذه الطريقة‬ ‫معرفة بشكل عمني لضغط المحتويات النصية المنقولة‬ ‫يمكنو أن يسترجع الردود عند الحاجة إلييا.‬ ‫ُ‬ ‫من مخدمات الوب. تستخدم عممية ضغط بروتوكول‬ ‫3-4-6-التأكد من معالجة مشاكل أداء الشبكة‬ ‫نقل النصوص الت ابطية خوارزميات ضغط ذات‬ ‫ر‬ ‫يجب بناء طبقة ثامنة فوق الطبقات السبع الخاصة‬ ‫مجاالت عمنية، كد ‪ GZip‬و ‪ ،Compress‬لتضغط‬ ‫ببروتوكول نقل النصوص الت ابطية]21[، التي تيدف‬ ‫ر‬ ‫جميع أنواع الممفات ذات األساس النصي.‬ ‫إلى معالجة األخطاء الناجمة عن عدم االستجابة‬ ‫3-5-4-عممية تشفير دلتا ‪Delta‬‬ ‫المتوقعة من برمجية أجاكس.‬ ‫تُعتبر عممية تشفير دلتا كطريقة لتحديث صفحات الوب‬ ‫3-5-التحسين من جانب المخدم ‪Server Side‬‬ ‫من خالل إرسال االختالفات بين إصدا ات صفحة‬ ‫ر‬ ‫3-5-1-تحسين طرق التحميل المتوازية ‪Parallel‬‬ ‫الوب. يقوم المخدم بإرسال االختالفات في الصفحة منذ‬ ‫‪Downloads‬‬ ‫الوصول األخير، مقمالً بذلك كمية البيانات المرسمة في‬ ‫ينصح اإلصدار1.1 من بروتوكول نقل النصوص‬ ‫بروتوك الت النقل.‬ ‫و‬ ‫الت ابطية بأن تقوم المتصفحات بتحديد كميات الطمبات‬ ‫ر‬ ‫3-5-5-إعادة كتابة عناوين المصادر عمى اإلنترنت‬ ‫إلى طمبين بنفس الوقت عمى األكثر. فيجب عمى‬ ‫‪ URIs‬باستخدام تقنية ‪mod_rewrite‬‬ ‫في بعض األحيان وخاصة عندما تكون‬ ‫المبرم‬ ‫يمكن لممبرم استخدام ىذه التقنية ليختزل من عناوين‬ ‫ُ‬ ‫الطمبات مخصصة لمصور باستخدام البروتوكول ذي‬ ‫المصادر عمى اإلنترنت، وبيذه الطريقة سيوفر عدداً‬ ‫اإلصدار 1.0 الذي يسمح بالتحميل المتو ي ألي عدد‬ ‫از‬ ‫من البايتات، كما أنو سيجعل من عناوينو صديقة‬ ‫كان من الطمبات.‬ ‫لمحركات البحث.‬ ‫3-5-2-تقميل مقابالت نظام اسم النطاق ‪DNS‬‬ ‫‪Lookups‬‬ ‫4-نظام المفاضمة اإللكترونية في وز ة الصحة‬ ‫ار‬ ‫يقوم نظام اسم النطاق بمقابمة األسماء بعناوين‬ ‫وىو نظام متكامل خاص بمفاضمة وز ة الصحة في‬ ‫ار‬ ‫بروتوكول اإلنترنت ‪ ،IP‬كما يعطي مي ة قابمية النقل‬ ‫ز‬ ‫الجميورية العربية السورية، يسمح بإج اء جميع عمميات‬ ‫ر‬ ‫ألسماء المجال من خالل السماح لممواقع بالتحول إلى‬ ‫المفاضمة بدءاً من إدخال بطاقات المفاضمة وانتياء‬ ‫ً‬ ‫مخدمات جديدة مع عناوين بروتكول إنترنت مختمفة،‬ ‫بإصدار النتائ . ويعد نظاماً ديناميكياً حيث تسمح‬ ‫ُ‬ ‫بدون تغيير أسماء المخدم التابع ليا. يستغرق نظام اسم‬ ‫إعدادات النظام ضمنو بتعريف حقول جديدة يمكن أن‬ ‫ُ‬ ‫النطاق عادة 13-130 ءاً من الثانية لمبحث عن‬ ‫جز‬ ‫تضاف كالوثائق المرفقة و تعديالت العالمات المختمفة.‬ ‫عنوان بروتوكول إنترنت لكل اسم مخدم، ويتوجب عمى‬ ‫وقد تم تركيب النظام في الوز ة وتم استخدامو في العديد‬ ‫ار ّ‬ ‫ّ‬ ‫المتصفح أن ينتظر نظام اسم النطاق لكي يقوم بإيجاد‬ ‫ع بتحميل‬‫العنوان المقابل لبروتوكول إنترنت قبل الشرو‬ ‫41/01‬
  • 11. ‫يظير الشكل 2 الخطوة األولى من التحسين التي تقوم‬ ‫من المفاضالت وخالل فت ة عممو تم تطبيق الخطوات‬ ‫ّ‬ ‫ر‬ ‫عمى حذف المساحات البيضاء من إخطاطات جافا‬ ‫السابقة في عممية تحسين أدائو وقياس نسب األداء.‬ ‫ووريقات األسموب المتشمشل واعادة كتابة المتح الت‬ ‫و‬ ‫بشكل يقمل من عدد المحارف المستخدمة، مع حذف‬ ‫التعميقات المساعدة في مرحمة التطوير، كل ىذه‬ ‫المساحات ىي عبء إضافي عمى التحميل يجب‬ ‫التخمص منو وبذلك تصبح أحجام الممفات أصغر من‬ ‫الحجم األصمي وأصبح الحجم الكمي 0 ميغا بايت‬ ‫والزمن الكمي المستغرق 7.40 ثانية.‬ ‫الشكل 0- نظام المفاضمة االلكترونية في وز ة الصحة‬ ‫ار‬ ‫5-تطبيق التحسينات عمى النظام‬ ‫تم، خالل العمل عمى بناء النظام، تطبيق التحسينات‬‫ّ‬ ‫والنصائح المذكو ة أعاله، ونبين فيما يمي ما توصمنا‬ ‫ر‬ ‫إليو:‬ ‫الشكل 4- بعد إج اء التحسينات‬ ‫ر‬ ‫وبعد ضم إخطاطات جافا في ممف واحد وضم وريقات‬ ‫األسموب المتشمشل بممف واحد نالحظ أن الممف‬ ‫المطموب يمكن أن يتم تحميمو بطمب واحد لممخدم ال‬ ‫و‬ ‫ىق المخدم بطمبات يمكن تجنبيا. كما أن أىم‬ ‫نر‬ ‫الشكل 0- قبل القيام بالتحسينات‬ ‫العمميات الالزم إتباعيا لتحسين أداء صفحة الوب ىي‬ ‫عدم طمب األجاكس أو إخطاطات جافا إال عندما يكون‬ ‫يظير الشكل 3 ممفات الصفحة الرئيسية التي تم طمبيا‬ ‫ّ‬ ‫ُ‬ ‫ىناك حاجة لمطمب ألن ذلك من شأنو تقميل عمميات‬ ‫مع حجم كل ممف والوقت الالزم لتحميمو. قبل م اعاة‬ ‫ر‬ ‫الطمب واإلستجابة التي عادة ماتأخذ زمناً طويالً،‬ ‫قواعد تحسين األداء. من المالحظ أن عدد إخطاطات‬ ‫وأصبح عدد الطمبات 82 طمباً والزمن الكمي المستغرق‬ ‫الجافا ىو 10 ووريقات األسموب المتشمشل ىو 8، وعدد‬ ‫.1.7 ثانية كما يبين الشكل 4.‬ ‫الطمبات ىو 4. طمباً، والحجم الكمي لمممف 3.0 ميغا‬ ‫ُ‬ ‫وبالتالي يبين الشكل . نسب التأثير عمى أداء نظام‬ ‫بايت، والزمن الكمي المستغرق 41..0 ثانية.‬ ‫المفاضمة في وز ة الصحة في حال قمنا بالتركيز عمى‬ ‫ار‬ ‫أربع محاور من النصائح السابقة، حيث ساىمت عممية‬ ‫تصغير حجم ممفات ال أس بنسبة 84%، أما عممية‬ ‫ر‬ ‫ضم الممفات الرماز فقد ساىم بنسبة .0% وعمميات‬ ‫معالجة الوسائط المتعددة بنسبة 93% واعادة ىيكمة‬ ‫الشكل 2- تحسينات عمى مستوى األغ اض الخارجية‬ ‫ر‬ ‫الرماز بنسبة 10%.‬ ‫41/11‬
  • 12. [3] Linden, G. November 6, 2011. ―Marissa Mayer at Web 3.0. ‫ة في تسريع الموقع‬ ‫النسب المؤثر‬ [4] Farber, D. November 9, 2011. ―Google’s ‫تصغير حجم ممفات ال أس‬ ‫ر‬ Marissa Mayer: Speed Wins.‖ 10% ‫ضم ممفات الجافا سكربت‬ [5] Kohavi, R., and R. Longbotham. 2007. ‫والستايل في ممفين‬ 48% 15% ―Online Experiments: Lessons Learned.‖ ‫تصغير الصور وضغط‬ ‫لوسائط المتعددة‬ [6] Skadberg, Y., and J. Kimmel. 2009. 27% ‫إعادة سياق الجافا سكربت‬ 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." ‫6-النتيجة‬ [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 ‫7-الم اجع‬ ‫ر‬ Multimedia Computing, Communications and [1] Bouch, A. et al. 2008. ―Quality is in the Applications Eye of the Beholder: Meeting Users’ [12] Zimmerman, H. 1980. ―OSI Reference Requirements for Internet Quality of Service.‖ Model—the IS0 Model of Architecture for In CHI 2008 (The Hague, the Netherlands: Open Systems Interconnection.‖ IEEE April 1–6, 2008) Transactions on Communications [2] Akamai. June 2006. ―Retail Web Site Performance: Consumer Reaction to a Poor Online Shopping Experience.‖ Akamai Technologies, http://www.akamai.com 12/14
  • 13. ‫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‬‬ ‫دلتا‬ ‫41/31‬
  • 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‬‬ ‫وسائط المتعددة‬ ‫41/41‬