لقد كنت أعمل في التنمية الأمامية لأكثر من عام ، ولا يزال لدي بعض الأفكار حول الواجهة الأمامية. اليوم سوف أشارككم.
لا غنى عن الأدوات القوية المختلفة للتنمية الأمامية. على سبيل المثال ، اعتدت على استخدام متصفح Google و Fiddller الأسلحة الثقيلة.
1: الوضع الأصلي
أولاً ، دعنا نلقي نظرة على الكود التالي:
نسخة الكود كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" errantits = "jsload.default" ٪>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "STYLESHEET" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javaScript"> </script>
<script src = "js/world.js" type = "text/javaScript"> </script>
</head>
<body>
<img src = "1.jpg" />
</body>
</html>
تشير التقديرات إلى أن 90 ٪ من المبرمجين سيضعون ملفات JS في الرأس ، لكن هل سبق لك أن بحثت عنها؟ ستستخدم العديد من المتصفحات مؤشر ترابط واحد للقيام "بتحديث واجهة واجهة المستخدم" و "معالجة البرنامج النصي JS".
أي عندما يواجه محرك التنفيذ "<script>" ، يجب أن ينظر تنزيل وتقديم الصفحة حتى يتم إكمال تنفيذ <script>. ثم من المحزن للمستخدم ، النظر إلى الصفحة المقفلة ،
في هذا الوقت ، من المحتمل أن يقوم المستخدم بإيقاف تشغيله لك.
من مخطط الشلال أعلاه يمكننا رؤية نقطتين:
أولاً:
يتم تنزيل ثلاثة ملفات JS بالتوازي ، ولكن وفقًا لنظريتي أعلاه ، يجب تنفيذ JS واحدًا تلو الآخر. ومع ذلك ، في IE8 و Firefox 3.5 و Chrome 2 ، يقوم كل من التنزيلات الموازية لـ JS.
هذا جيد جدًا ، لكنه سيظل يعيق تنزيل بعض الموارد الأخرى ، مثل الصور.
ثانية:
يتم تشغيل تنزيل Image 1.jpg بعد اكتمال تنفيذ JS ، والذي يتحقق أيضًا من الموقف المذكور أعلاه ويمنع الصورة من التحميل.
الثاني: الخطوة الأولى هي التحسين
نظرًا لأن JS يمنع عرض واجهة المستخدم ، يمكننا التفكير في وضع JS أمام </body> ، بحيث يمكن تقديم HTML قبل <script> تمامًا دون السماح للمستخدمين برؤية الصفحة الفارغة تنتظر.
والوضع المتعثر يزيد بشكل طبيعي الصداقة.
نسخة الكود كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" errantits = "jsload.default" ٪>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "STYLESHEET" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javaScript"> </script>
<script src = "js/world.js" type = "text/javaScript"> </script>
</body>
</html>
يوضح الشكل أدناه أيضًا أنه يتم تنزيل 1.JPG وثلاثة JS وتنفيذها بالتوازي تقريبًا. يتم تقليل الوقت من "469ms+" أعلاه إلى "326ms".
ثلاثة: الخطوة الثانية من التحسين
بالنظر إلى "مخطط الشلال" أعلاه ، أعتقد أن الجميع يمكنهم أيضًا أن يروا أن ملفات JS الثلاثة قدمت ثلاثة طلبات "الحصول على". يعلم الجميع أن طلبات الحصول على طلبات HTTP.
لذلك يستغرق بعض الوقت ، لذلك فإن الحل الذي نتبناه هو بشكل طبيعي لتقليل طلبات الحصول على. عادة ما يكون هناك خياران.
أولاً: تم دمج دمج ملفات JS ، مثل دمج "Hello.js" و "World.js" أعلاه.
ثانياً: استخدم أدوات الطرف الثالث ، مثل Miniify في PHP.
فيما يتعلق بالطريقة الثانية ، يتم استخدام Taobao كثيرًا. ألقِ نظرة على أحد البرامج النصية وتطبيق ثلاثة ملفات JS. التغيير من 3 احصل على طلبات إلى 1.
الرابع: الخطوة الثالثة للتحسين
سواء كان وضع ملف JS في نهاية القدم أو يجمع بين ثلاثة إلى واحد ، فإن جوهره هو "وضع الحظر" ، مما يعني قفل المتصفح. عندما تصبح صفحة الويب أكثر تعقيدًا ، يوجد المزيد والمزيد من ملفات JS ، أو
ما الذي يجعلنا صداعًا ، في هذا الوقت ، ندافع عن "عدم وجود وضع حظر" لتحميل نصوص JS ، أي يتم تقديم جميع الصفحات ثم يتم إضافة JS ، وهو ما يتوافق مع مشغل النافذة.
Applending JS هو ما يسمى "لا حظر" ، ولكن الشيء الوحيد الذي يجب الانتباه إليه هو ما إذا كانت متطلباتنا الخاصة بـ JS في حالة جيدة.
أولاً: لا يوجد متطلبات أمر. على سبيل المثال ، إذا لم يكن لدي أي متطلبات ترتيب لـ "Hello.js" و "World.js" ، فيمكننا استخدام jQuery لإلحاقها ديناميكيًا.
نسخة الكود كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" errantits = "jsload.default" ٪>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "STYLESHEET" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
window.onload = function () {
$ ("#head"). إلحاق ("<script src = 'js/hello.js' type = 'text/javaScript'> <// script>")
$ ("#head"). إلحاق ("<script src = 'js/world.js' type = 'text/javaScript'> <// script>") ؛
}
</script>
</body>
</html>
كما يتضح من الشكل ، يظهر "Hello.js" و "World.js" على الخط الأزرق ، مما يعني أن هذين JS يتم تشغيلهما للتحميل بعد انتهاء تحميل domcontent ، بحيث لن يتم قفل الصفحة.
انتظر.
ثانياً: هناك متطلبات الطلب
لماذا يجب أن يكون هناك طلب؟ بالنسبة لملف "اثنين من JS" المذكور ديناميكيًا ، في سلسلة IE ، لا يمكنك ضمان تنفيذ Hello.js قبل World.js.
سيتم تنفيذ الكود فقط بالترتيب الذي تم إرجاعه بواسطة جانب الخادم.
نسخة الكود كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" errantits = "jsload.default" ٪>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "STYLESHEET" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script type = "text/javaScript">
وظيفة loadscript (url ، رد الاتصال) {
var script = document.createElement ("script") ؛
script.type = "text/javaScript" ؛
//أي
if (script.readyState) {
script.OnReadyStateChange = function () {
if (script.readyState == "loaded" || script.readyState == "COMMUNT") {
script.OnReadyStateChange = null ؛
أتصل مرة أخرى()؛
}
}
} آخر {
// غير
script.onload = function () {
أتصل مرة أخرى()؛
}
}
script.src = url ؛
document.getElementById ("Head"). AppendChild (Script) ؛
}
// الخطوة الأولى هي تحميل مكتبة فئة jQuery
loadscript ("jQuery/jQuery-1.4.1.js" ، function () {
// الخطوة الثانية هي تحميل hello.js
loadscript ("js/hello.js" ، function () {
// الخطوة الثالثة هي تحميل World.js
loadscript ("js/world.js" ، function () {
}) ؛
}) ؛
}) ؛
</script>
</body>
</html>
كما ترون أيضًا ، فإن الوقت الذي يستغرقه تحميل الصفحة بالكامل هو في الواقع حوالي 310 مللي ثانية فقط ، مما يحسن إلى حد كبير تنزيل صفحة الويب ومظهرها الودي.
يمكنك أيضًا التحقق من tencent.com ، وهو ما يفعله.
أليس من المفيد جدا؟ لقد أمضيت بعض الوقت في إجراء هذه الأبحاث والاختبارات هنا. أتمنى أن تراه في قلبك. بعد كل شيء ، هذا هو أيضًا حل شركة "Mahua Vine". يرجى الرجوع إليها.