首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

JS 跟 CSS 的位置对其他资源加载顺序的影响(摘和总结)

2012-08-30 
JS 和 CSS 的位置对其他资源加载顺序的影响(摘和总结)JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等

JS 和 CSS 的位置对其他资源加载顺序的影响(摘和总结)

JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点:

  1. JS 有可能会修改 DOM.?典型的,可能会有?document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
  2. JS 的执行有可能依赖最新样式(也就是此js之前加载的样式,而不是所有样式。)比如,可能会有?var width = $('#id').width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
  3. 现代浏览器很聪明,会进行 prefetch 优化。性能是如此重要,现代浏览器在竞争中,在 UI update 线程之外,还会开启另一个线程,对后续 JS 和 CSS 提前下载(注意,仅提前下载,并不执行)。有了 prefetch 优化,这意味着,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。

以上三点可简述为三条基本定律:

  • 定律一:资源是否下载依赖 JS 执行结果。
  • 定律二:JS 执行依赖 CSS 最新?渲染。
  • 定律三:现代浏览器存在 prefetch 优化。

    总结一下: css下载完成后,js开始下载,最后是资源的下载。

    这个结论的context是:js前有css

    这个结论旨在讨论:加载顺序和并行性

    ?

    据我估计:渲染整个页面是一个线程。

    反证法:

    假设:是多个线程,

    用例:

    ?

    <head>

    ? ? <title>test</title>

    ? ? <script type="text/javascript" src="test.js"></script>

    ? ? <link rel="stylesheet" type="text/css" href="test.css">

    ? ? <script type="text/javascript">

    ? ? </script>

    </head>

    假设js会控制一个按钮100x100大小

    css控制按钮200x200大小

    如果是多线程的话,结果将会不可预测。

    ?

    整体来说,还是保持 顺序 执行。具体小细节感觉还有很多,呆日后完善吧。

    ?

    ++++

    今天看BigPipe的时候想起来js和css不同位置的情况下,会如何执行。因为这个东西会影响BigPipe设计之后的执行细节。

    按照我原来的理解,应该是 顺序 执行。谁在前就先执行谁。?

    但是没有仔细想doby的执行情况,body和body内的资源的请求情况,以及可能受到的影响。

    ?

    我在chrome下做了些测试,感觉还是要分很多情况来讨论。

    ?

    这篇文章也在讨论这个问题,并做了些总结:

    http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB/

    但结论有些问题,另外,不同的浏览器也会有不同的处理方式。

    ?

    这篇文章给出了一个合理的理论支持!

    http://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/

    但是有些说法不够精致,我就重构了一下~

    ?

    http://futureinhands.iteye.com/blog/354528

    这篇文章也可以看看

    ?

    BigPipe的文章和参考

    http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html

    ?

    I

    I

    I

    ***本文完毕***

    I

    I

    I


    ?

热点排行