أداء تحليل جافا سكريبت وCSS

Question

أحاول تحسين أداء تطبيق الويب.لدي مقاييس يمكنني استخدامها لتحسين الوقت المستغرق لإرجاع صفحة HTML الرئيسية، ولكنني أشعر بالقلق بشأن ملفات CSS وJavaScript الخارجية المضمنة في صفحات HTML هذه.يتم تقديمها بشكل ثابت، مع رؤوس HTTP Expires، ولكن يتم مشاركتها بين جميع صفحات التطبيق.

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

هل هناك أي أدوات يمكن أن تساعدني في إنشاء مقاييس لهذا؟­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

سياق: في حين أنه من الصحيح أن الحمل الزائد لـ HTTP أكثر أهمية من تحليل JS وCSS، فإن تجاهل تأثير التحليل على أداء المتصفح (حتى لو كان لديك أقل من ميجا من JS) يعد طريقة جيدة لإيقاع نفسك في المشاكل.

لا تعد YSlow وFiddler وFirebug أفضل الأدوات لمراقبة سرعة التحليل.ما لم يتم تحديثها مؤخرًا، فإنها لا تفصل بين مقدار الوقت المطلوب لجلب JS عبر HTTP أو التحميل من ذاكرة التخزين المؤقت مقابل مقدار الوقت المستغرق في تحليل حمولة JS الفعلية.

من الصعب بعض الشيء قياس سرعة التحليل، لكننا تابعنا هذا المقياس عدة مرات في المشاريع التي عملت عليها وكان التأثير على تحميل الصفحات كبيرًا حتى مع ما يقرب من 500 ألف من JavaScript.من الواضح أن المتصفحات الأقدم تعاني أكثر من غيرها...نأمل أن يساعد Chrome وTraceMonkey وما شابه في حل هذا الموقف.

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

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

الحد الأدنى: من الصعب العثور على التوازن المناسب بين التخزين المؤقت لـ JS والحمولات الأصغر حجمًا والمعبأة، ولكن اعتمادًا على نمط حركة المرور لديك، من المؤكد أنه يستحق التفكير في تقنية أخرى غير تحطيم كل ملفات JS الخاصة بك في كل تحميل صفحة على حدة.

Answer 2

أعتقد YSlow يفعل ذلك، ولكن عليك أن تدرك أنه ما لم تكن جميع الطلبات عبر اتصال استرجاع، فلا داعي للقلق.سيؤثر عبء HTTP للملفات المقسمة على الأداء بعيد أكثر من مجرد تحليل، إلا إذا تجاوزت ملفات CSS/JS عدة ميغابايت.

Answer 3

للإضافة إلى إجابة kamen الرائعة، أود أن أقول إنه في بعض المتصفحات، ينمو وقت التحليل لموارد js الأكبر حجمًا بشكل غير خطي.أي أن ملف JS بحجم 1 ميغا سيستغرق وقتًا أطول في التحليل مقارنة بملفين بحجم 500 كيلو.لذلك، إذا كان الكثير من حركة المرور الخاصة بك عبارة عن أشخاص من المحتمل أن يقوموا بتخزين JS الخاص بك مؤقتًا (الزائرين العائدين)، وكانت جميع ملفات JS الخاصة بك مستقرة في ذاكرة التخزين المؤقت، فقد يكون من المنطقي تقسيمها حتى إذا انتهى بك الأمر إلى تحميلها جميعًا على كل مشاهدة للصفحة.