`
fantaxy025025
  • 浏览: 1241095 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

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


 

分享到:
评论

相关推荐

    js 异步加载js, css文件

    当项目js(css)文件使用越来越多,js 文件的加载也成了性能上的一个问题,此资源能够在页面全部加载完成后异步加载js等资源文件,它可以顺序加载资源列表,也可以并发加载资源列表,它包含一个方法调用接口:...

    详解关于html,css,js三者的加载顺序问题

    DOM文档的加载顺序是由上而下的顺序加载; 1、DOM加载到link标签 css文件的加载是与DOM的加载并行的,也就是说,css在加载时Dom还在继续加载构建,而过程中遇到的css样式或者img,则会向服务器发送一个请求,待资源...

    loadcomponent:用于 Salesforce Aura 的灵活 JS 和 CSS 静态资源文件加载器

    一个简单快速的 Salesforce Aura 组件,可用于以串行、并行或任何其他方式加载 JS 和 CSS 静态资源。 非托管包: https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000017Gl ##Getting ...

    dysel:DYnamic顺序外部加载器-异步顺序资源(JavaScript和CSS)加载器

    DySEL-动态顺序外部加载器DySEL是一个异步顺序资源(JavaScript和CSS)加载器。 它堆叠资源并加载它们,以便仅在上一个资源完成后才加载下一个资源。 您可以设置最终的回调,该回调将在所有加载结束时执行。 如果要...

    MIP移动网页加速器能够优化网页JS和资源加载达到加速打开网页的效果

    MIP(移动网页加速器)通过优化网页JS、控制资源加载顺序,达到加速网页的效果

    HTML5与CSS3基础教程(第8版)高清文字

    8.5 样式的层叠和顺序 145 8.6 使用与媒体相关的样式表 147 8.7 借鉴他人的灵感 148 第9章 定义选择器 150 9.1 构造选择器 150 9.2 按名称选择元素 152 9.3 按类或ID选择元素 153 9.4 按上...

    浏览器加载、渲染和解析过程黑箱简析

    Firefox 对下载顺序做了优化:Firefox 会将 js, css 提前下载,而将图片等资源延迟到后面下载。 对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行。js 的解析和运行,...

    关于HTML5+ API plusready的兼容问题

    2. 解析html页面(下载script/link等节点引用的资源,如js/css文件) 3. 触发DOMContentLoaded事件 4. 注入5+ API 5. 触发plusready事件 这样导致5+ API生效时间比较延后,在html中引用js执行之后才能调用5+ API,...

    为什么我们不建议用Table布局

    (延迟下载时间,占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的...

    JavaScript实战

    第一部分 JavaScript入门 1 第1章 编写第一个JavaScript程序 1 1.1 编程简介 1 什么是计算机程序 2 1.2 如何把JavaScript添加到页面 3 外部JavaScript文件 5 1.3 第一个JavaScript程序 7 ...附录A JavaScript资源 413

    extjs实例教程附带源码

    -- 注意加载顺序 --&gt; &lt;script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"&gt; &lt;script type="text/javascript" src="./scripts/ext/ext-all.js"&gt; &lt;script type="text/javascript" src="./...

    javascript-video-scrubber:演示如何在具有本地窗口滚动位置的视频(JPEG序列)中进行擦洗(如NikeResponsibility.com上所示)

    它依赖于以下其他资源: styles.css js / javascript-video-scrubber.js jQuery(通过Google CDN加载) “ frames”文件夹中的JPEG图像文件序列(具有顺序的文件名) 源文件: “源文件”文件夹中包

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    编辑CSS文件并且 匹配你的图片路径,同时改变颜色匹配你网站的主题 重要:像例子中一样确定包含的JavaScript文件 具体顺序。 &lt;link rel="stylesheet" media="screen" type="text/css" href="css/zoomimage.css" /...

    Fridolph#myblog-settings#【web优化】(三)JS加载与执行1

    引入方式顺序执行、并发加载词法分析 - token分析从上到下,从而html是从上到下解析并发加载 - html中引入的外部资源是并发加载的并发上限 - 根据浏

    让你了解HTML及资源是如何加载的

    本文主要介绍浏览器请求一个URI后, 相应的html及其包含的外部资源(如js/css/image/flash)的下载顺序及其执行顺序.

    如何高效地管理网站静态资源

    就如同封面图一样,静态资源之间的关系错综复杂,给工程师带来了很多麻烦:人工管理依赖的噩梦,工程师需要频繁管理和维护每个页面需要的JS&CSS文件,包括静态资源之间的依赖关系以及加载顺序等。性能优化成本高且不...

Global site tag (gtag.js) - Google Analytics