مقالة مقدمة من wulin.com (www.vevb.com): يسأل الكثير من الناس ما هو HTML5؟ نقول أن الطريقة التي يمكننا من خلالها استخدام HTML5 أولاً هي تغيير Doctype أولاً ، لأن العديد من الصفحات لا تزال بالطريقة التقليدية في الوقت الحاضر. تتوافق طريقة HTML5 مع متصفح IE ، ويمكن استخدامها من IE6 إلى IE10 ، ويمكن دعمها بواسطة المتصفحات المتقدمة.
[ملاحظة المحرر] تم كتابة المقالة التالية من قبل فني تكنولوجيا المعلومات يدعى Zhang Liming ، نُشر على صفحة الويب InfoQ. هذه المرة ، قام بتحليل أداء HTML5 من 9 جوانب مختلفة في النص الكامل ، والذي لا يزال يستحق القراءة من قبل المطورين المقابلين.
من منظور الأداء ، يقلل HTML5 أولاً من مستندات HTML ، مما يجعل هذا أكثر بساطة. أولاً ، من منظور قابلية قراءة المستخدم ، كان هناك الكثير من الأشياء التي لم يتم فهمها في الأصل من قبل المبتدئين لأول مرة لرؤية هذه الأشياء ، ومن الواضح أن طريقة إعلان HTML5 أكثر ودية للمستخدمين. ثانياً ، يكون إعلان ترميز المستند بسيط للغاية إذا كان في HTML5. كثير من الناس يسألون ما هو HTML5؟ نقول أن الطريقة التي يمكننا من خلالها استخدام HTML5 أولاً هي تغيير Doctype أولاً ، لأن العديد من الصفحات لا تزال بالطريقة التقليدية في الوقت الحاضر. تتوافق طريقة HTML5 مع متصفح IE ، ويمكن استخدامها من IE6 إلى IE10 ، ويمكن دعمها بواسطة المتصفحات المتقدمة. لذا فإن أسهل طريقة لاحتضان HTML5 هي تغيير Doctype.
1. تسمية أبسط
قد لا يكون الشيء التالي أمرًا شائعًا جدًا ، لكنه شيء أفضل ، باستخدام طريقة تسمية أبسط. كما يمكنك أن تقول من هذا الاسم ، يتم توريث HTML5 من HTML4. HTML4 لديه وضع صارم ووضع الانتقال. يدعم HTML5 وضع الانتقال هذا ، مما يعني أنه لا يمكنك إغلاق بعض العلامات. ومع ذلك ، لا أوصي بجميع العلامات ، على سبيل المثال ، لم يتم إغلاق علامة الجسم ، والتي لا نوصي بها. ولكن أكثر ما استخدام p-label هو أيضا قائمة LI. لماذا تقول ذلك؟ بادئ ذي بدء ، من منظور بصري ، هذه الطريقة أبسط قليلاً. ثم المفتاح هو أنه خلال عملية نقل المستندات ، سيكون هناك محتوى أقل.
يدعم إعلان سمات علامة HTML5 ثلاث طرق: قوسين فرديين وأقواس مزدوجة وأقواس غير متجانسة. لتقليل حجم المستند ، اخترت الطريقة بدون عروض أسعار مزدوجة أو عروض أسعار واحدة. ومع ذلك ، تجدر الإشارة إلى أنه على افتراض أنه إعلان عن سمات الفصل ، لأن السمات قد تتضمن فئات متعددة ، وعندما تكون فئات متعددة ، يجب أن تكون محاطة بأقواس. في هذا الصدد ، اسمحوا لي أن أريكم ممارسة من Google. لدى Google نفسها صفحة تمارس ما سبق تمامًا ، مما يقلل من حجم المستند بنسبة 20 ٪ ، مما يقلل من نقل مستندات HTML بنسبة 20 ٪. إذا تم ممارسة كل شيء ، فيمكنه تحقيق انخفاض يتراوح بين 5 ٪ و 20 ٪. هذه هي الخطوة الأولى ، مما يقلل من حجم وثيقة HTML.
2. تحسين الصورة
التالي يدور حول تحسين الصور ، والتي هي دائمًا عناصر تحبها والكراهية. لأنه عندما يكون هناك الكثير من الصور ، فإنه سوف يسحب بشكل خطير سرعة التحميل للصفحة بأكملها. فيما يتعلق بطرق التحسين للصور ، هناك العديد من المقدمات في كتاب "موقع الويب عالي الأداء". لتلخيص ، هناك ثلاث نقاط رئيسية: استخدام الجان ، وتحسين حجم الصور ، واستخدام Data URI. لن أخوض في التفاصيل هنا.
فكرة أخرى عن تحسين الصورة هي: لا صورة. التخلي عن الصور واحتضان CSS3. في الأصل ، كنت بحاجة إلى ضبط صورة ذات تأثير زاوية مستديرة ، لكنني الآن استخدمت حدود الحدود في CSS3 ؛ اعتدت على ضبط تأثير الظل ، لكنني الآن أستخدم box-shadow في CSS3 ؛ اعتدت على ضبط صورة خلفية متدرجة ، لكنني الآن أستخدم التدرج في CSS3.
3
بعد ذلك ، دعنا نتحدث عن الإذابة المسبقة ، وهي طريقة أخرى للتحسين. أفكار التحسين الحالية لدينا ليست أكثر من قليل. كثير منهم من منظور عدد أقل من الأشياء ، على سبيل المثال ، تم تقليل حجم المستند من قبل وتم تقليل حجم الصورة. تصبح العديد من الصور الجان ، من أجل تقليل عدد طلبات الإرسال. للتغلب على الجليد ، إنها طريقة أخرى للتفكير. تحميل الموارد في وقت مبكر. عندما يذهب المستخدم إلى هذه النقطة ، فقد تم تحميله بالفعل ، لذلك سيكون بالتأكيد أسرع.
هناك جزأين للتذوق المسبق: أحدهما مسبقًا للموارد ، والآخر هو حل DNS مسبقًا.
هناك عدة نقاط يجب ملاحظتها عند التحميل المسبق للموارد:
لن تسحب التحميل المسبق إلا عندما يكون المتصفح في وضع الخمول ، لكن ليس من الضمان سحبه. هذه نقطة مهمة للغاية. لأن المتصفح نفسه لديه مستمع عالمي ، وهو واجهة داخلية. عندما يكون الهواء المتصفح في وضع الخمول ، سيتم تنفيذ المتصفح عندما يكون خاملاً ، ولكن قد لا يتم تشغيل رد الاتصال الخامل هذا ، لذلك لا يضمن إجراء التحميل المسبق.
لا يدعم Chrome التحميل المسبق لموارد HTTPS. على سبيل المثال ، ALIPAY هي صفحة HTTPS ، ولن يقوم Chrome بالتسجيل المسبق.
على الرغم من أن الصفحة التي يتم تمييزها مسبقًا غير مرئية بعد وجودها ، إلا أنها في الواقع يتم تحليلها بشكل طبيعي. إذا قمت بتسليم صفحة تسجيل الدخول مسبقًا ، فإن صفحة تسجيل الدخول لديها العديد من الموارد ، مثل الصور وملفات CSS وملفات JS. سيتم تحليله من أعلى إلى أسفل بشكل طبيعي. أثناء عملية التحليل ، لا تظهر هذه الصفحة ، لكنها موجودة بالفعل. في HTML5 ، يمكنك الحصول على حالة الصفحة الحالية من خلال document.vibilityState. عادةً ما يكون للصفحة ولايتين ، مرئيين وغير مرئيين ، ولكن الآن هناك دولة جديدة تسمى حالة ما قبل الإعادة. يمكنك تحديد ما إذا كانت الصفحة موجودة في حالة Prerender من خلال ما إذا كان المستند.