CSS 应该总是在 Javascript 之前吗? [英] Should CSS always precede Javascript?

查看:25
本文介绍了CSS 应该总是在 Javascript 之前吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在网上无数地方,我看到了在 JavaScript 之前包含 CSS 的建议.推理通常是, CSS(因此有大量的脚本/CSS 需要解析)

  • 设置两个页面 - 一个在脚本前使用 CSS,一个在脚本后使用 CSS.
  • 中记录了外部脚本执行的时间
  • 记录中的内联脚本执行需要多长时间,类似于DOMReady.
  • 将 CSS 和/或脚本延迟 500 毫秒发送到浏览器.
  • 在 3 个主要浏览器中运行了 20 次测试.
  • 结果

    首先,将 CSS 文件延迟 500 毫秒:

     浏览器:Chrome 18 |IE 9 |火狐 9CSS: 先后 |第一个 最后 |先后========================================================头执行 |||平均 |583ms 36ms |559ms 42ms |565 毫秒 49 毫秒圣德夫 |15ms 12ms |9ms 7ms |13ms 6ms------------|--------------|--------------|------------身体执行 |||平均 |584 毫秒 521 毫秒 |559 毫秒 513 毫秒 |565 毫秒 519 毫秒圣德夫 |15ms 9ms |9ms 5ms |13ms 7ms

    接下来,我将 jQuery 设置为延迟 500 毫秒而不是 CSS:

     浏览器:Chrome 18 |IE 9 |火狐 9CSS: 先后 |第一个 最后 |先后========================================================头执行 |||平均 |597ms 556ms |562ms 559ms |564 毫秒 564 毫秒圣德夫 |14ms 12ms |11ms 7ms |8ms 8ms------------|--------------|--------------|------------身体执行 |||平均 |598ms 557ms |563 毫秒 560 毫秒 |564 毫秒 565 毫秒圣德夫 |14ms 12ms |10ms 7ms |8ms 8ms

    最后,我将 jQuery 和 CSS 都设置为延迟 500 毫秒:

     浏览器:Chrome 18 |IE 9 |火狐 9CSS: 先后 |第一个 最后 |先后========================================================头执行 |||平均 |620ms 560ms |577 毫秒 577 毫秒 |571 毫秒 567 毫秒圣德夫 |16ms 11ms |19ms 9ms |9 毫秒 10 毫秒------------|--------------|--------------|------------身体执行 |||平均 |623ms 561ms |578ms 580ms |571 毫秒 568 毫秒圣德夫 |18ms 11ms |19ms 9ms |9 毫秒 10 毫秒

    结论

    首先,需要注意的是,我假设您的文档位于文档的 <head>(而不是 <正文>).关于为什么您可能会链接到 <head> 中的脚本而不是文档末尾,存在各种争论,但这超出了本答案的范围.这严格来说是关于

    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆