ما يحتاج المطورون لمعرفته حول تحليل أداء HTML5

التعليق: تم كتابة المقالة التالية من قبل فني تكنولوجيا المعلومات يدعى Zhang Liming ، وتم نشره على صفحة الويب InfoQ. هذه المرة ، قام بتحليل أداء HTML5 من 9 جوانب مختلفة في النص الكامل ، والذي لا يزال يستحق القراءة من قبل المطورين المقابلين.

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

ثانياً ، يكون إعلان ترميز المستند بسيط للغاية إذا كان في HTML5. كثير من الناس يسألون ما هو HTML5؟ نقول أن الطريقة التي يمكننا من خلالها استخدام HTML5 أولاً هي تغيير Doctype أولاً ، لأن العديد من الصفحات لا تزال بالطريقة التقليدية. تتوافق طريقة HTML5 مع متصفح IE ، ويمكن استخدامها من IE6 إلى IE10 ، ويمكن دعمها بواسطة المتصفحات المتقدمة. لذا فإن أسهل طريقة لاحتضان HTML5 هي تغيير Doctype.

قد لا يكون الشيء التالي أمرًا شائعًا جدًا ، لكنه شيء أفضل ، باستخدام طريقة تسمية أبسط. كما يمكنك أن تقول من هذا الاسم ، يتم توريث HTML5 من HTML4. HTML4 لديه وضع صارم ووضع الانتقال. يدعم HTML5 وضع الانتقال هذا ، مما يعني أنه لا يمكنك إغلاق بعض العلامات. ومع ذلك ، لا أوصي بجميع العلامات ، على سبيل المثال ، لم يتم إغلاق علامة الجسم ، والتي لا نوصي بها. ولكن أكثر ما استخدام p-label هو أيضا قائمة LI. لماذا تقول هذا؟ بادئ ذي بدء ، من منظور بصري ، هذه الطريقة أبسط قليلاً. ثم المفتاح هو أنه خلال عملية نقل المستندات ، سيكون هناك محتوى أقل.

يدعم إعلان سمات علامة HTML5 ثلاث طرق: قوسين فرديين وأقواس مزدوجة وأقواس غير متجانسة. لتقليل حجم المستند ، اخترت الطريقة بدون عروض أسعار مزدوجة أو عروض أسعار واحدة. ومع ذلك ، تجدر الإشارة إلى أنه على افتراض أنه إعلان عن سمات الفصل ، لأن السمات قد تتضمن فئات متعددة ، وعندما تكون فئات متعددة ، يجب أن تكون محاطة بأقواس. في هذا الصدد ، اسمحوا لي أن أريكم ممارسة من Google. لدى Google نفسها صفحة تمارس ما سبق تمامًا ، مما يقلل من حجم المستند بنسبة 20 ٪ ، مما يقلل من نقل مستندات HTML بنسبة 20 ٪. إذا تم ممارسة كل شيء ، فيمكنه تحقيق انخفاض يتراوح بين 5 ٪ و 20 ٪. هذه هي الخطوة الأولى ، مما يقلل من حجم وثيقة HTML.

التالي يدور حول تحسين الصور ، والتي هي دائمًا عناصر تحبها والكراهية. لأنه عندما يكون هناك الكثير من الصور ، فإنه سوف يسحب بشكل خطير سرعة التحميل للصفحة بأكملها. فيما يتعلق بطرق التحسين للصور ، هناك العديد من المقدمات في كتاب "موقع الويب عالي الأداء". لتلخيص ، هناك ثلاث نقاط رئيسية: استخدام الجان ، وتحسين حجم الصور ، واستخدام Data URI. لن أخوض في التفاصيل هنا.

فكرة أخرى عن تحسين الصورة هي: لا صورة. التخلي عن الصور واحتضان CSS3. في الأصل ، كنت بحاجة إلى ضبط صورة ذات تأثير زاوية مستديرة ، لكنني الآن استخدمت حدود الحدود في CSS3 ؛ لقد استخدمت الصورة مع تأثير الظل ، لكنني الآن أستخدم box-shadow في CSS3 ؛ اعتدت على ضبط صورة خلفية متدرجة ، لكنني الآن أستخدم التدرج في CSS3.

3

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

هناك جزأين للتذوق المسبق: أحدهما مسبقًا للموارد ، والآخر هو حل DNS مسبقًا.

هناك عدة نقاط يجب ملاحظتها عند التحميل المسبق للموارد:

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

لا يدعم Chrome التحميل المسبق لموارد HTTPS. على سبيل المثال ، ALIPAY هي صفحة HTTPS ، ولن يقوم Chrome بالتسجيل المسبق.

على الرغم من أن الصفحة التي يتم تمييزها مسبقًا غير مرئية بعد وجودها ، إلا أنها في الواقع يتم تحليلها بشكل طبيعي. إذا قمت بتسليم صفحة تسجيل الدخول مسبقًا ، فإن صفحة تسجيل الدخول لديها العديد من الموارد ، مثل الصور وملفات CSS وملفات JS. سيتم تحليله من أعلى إلى أسفل بشكل طبيعي. أثناء عملية التحليل ، لا تظهر هذه الصفحة ، لكنها موجودة بالفعل. في HTML5 ، يمكنك الحصول على حالة الصفحة الحالية من خلال document.vibilityState. عادةً ما يكون للصفحة ولايتين ، مرئيين وغير مرئيين ، ولكن الآن هناك دولة جديدة تسمى حالة ما قبل الإعادة. يمكنك تحديد ما إذا كانت الصفحة موجودة في حالة Prerender من خلال ما إذا كان المستند.

4.DNS قرار

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

فيما يلي حالة من خلفية Q+. Q+ خلفية هو نظام معين. بادئ ذي بدء ، تعتمد بنية Q+ بأكملها على عميل الويب+. ما نراه الآن هو صفحة ويب. على الرغم من أنها قذيفة عميل في الخارج ، إلا أن قلبها هو الويب. عندما أكملنا العملية بأكملها لأول مرة ، نظرًا لوجود العديد من الصور ، يتم تخصيص جميع الموارد الثابتة لأكثر من عشرة خوادم ثابتة. بمعنى آخر ، إذا كنت أرغب في سحبها ، يجب أن أحلى 10 DNS. هذه المرة تستغرق وقتًا طويلاً ، وقد يتأخر أبطأ وقت ببضع ثوان ، وهو شيء يمكن أن نشعر به بالعين المجردة. إذا قمت بتنفيذ DNS مسبقًا ، لأنني لا أعرف المورد الذي هو عليه ، فإن جميع الصور عشوائية ، لذلك يمكننا فقط أن نقول أننا نعمل بجد على الدخل المسبق DNS لتحسين سرعتها. وبهذه الطريقة ، قد يستغرق الأمر ثانيتين ، وسأصبح ثانية واحدة.

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

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

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

أولاً ، ذاكرة التخزين المؤقت ، والتي تحتاج إلى تخزين محليًا.

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

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

كيف تضع Maeifest؟ هناك ثلاثة أشياء يجب ملاحظتها حول البيان:

من الواضح أن القيود المتجانسة ؛

يجب أن يكون نوع MIME هو النص/ذاكرة التخزين المؤقت ، وهو أمر قياسي ولن يدخل ساري المفعول إذا كان في تنسيقات أخرى ؛

Chrome ، إذا كنت تريد معرفة ما إذا كان هذا الشيء ساري المفعول ، فيمكنك إدخاله في المتصفح من خلال Chrome Pseudo-Protocol Chrome و Chrome: // AppCache-Internals.

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

يمكن للمستخدمين مسح ذاكرة التخزين المؤقت للمتصفح يدويًا ، وسيتم مسح السعة التخزين المحلية تلقائيًا في هذا الوقت.

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

تنفيذ من خلال البرنامج ، والبرنامج هو window.applicationCache.update (). وهذا يعني أنني أريد تشغيل التخزين في وضع عدم الاتصال. في الواقع ، أنا في بعض الأحيان أسميها تخزين تطبيقات لأن دلالاتها هي تخزين التطبيق. نذهب إلى تحديث تخزين التطبيق يدويًا.

6.web عامل

عامل الويب التالي. عامل الويب هي عملية JS متعددة الخيوط. في الواقع ، إذا لم يكن لدينا سيناريوهات تطبيق عبر الإنترنت ، فلن أتحدث عنها. ولكن يمكننا التحدث عن سيناريوهات التطبيق المحددة التي رأيتها.

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

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

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

8. البطارية

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

9.Canvas

التالي هو قماش. دعنا نتحدث عن العديد من نقاط تحسين الأداء للقماش. إذا كنت تستخدم هذه الأشياء ، فسيتم تحسين الأداء بمقدار 10 مرات.

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

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

ثالثًا ، requestAnimationFrame. هذه طريقة محسّنة على وجه التحديد لتقديمها. مبدأها الخاص هو: عندما يمر المتصفح إطارًا ، سيتم تشغيل هذه الطريقة. عندما أقوم بتشغيله ، يحصل Canvas على أن المستعرض جاهز للقيام بالإطار التالي. إذا كنت تستخدم الطريقة التقليدية ، فلن تفكر في المزيد من الأشياء الخاصة بك. سيعرف فقط مقدار الوقت الذي مررت فيه وسأعمل عليه. إذا تم حظر المستخدم من قبل وتنفيذ هذه الطريقة كل 10 ثوانٍ ، في غضون 10 ثوان ، لم يتم إكمال العمل السابق ، ثم يتم تأجيل العمل. تم تحسينه للرسوم المتحركة لتبدو أكثر سلاسة ، لأن كل إطار ، يخبرك أنه يمكنك القيام بشيء ما. (نص: infoq)