翻译了一篇Performance上的关于页面性能的文章《DecIPhering the critical rendering path》,原文在这里。需要进一步整理和了解有关js、css等脚本位置对性能的影响。以下总结了几点原理：

  • 同步脚本会阻止页面中其他内容的加载与显示。例如dom树的构建，因为js可能会有document.write操作，所以必须等到同步js脚本下载执行完毕之后，页面的解析才会继续
  • js脚本可能会被css阻塞，例如js需要获取dom元素的计算样式，就需要等待CSSOM的完成。有一些隐式使用计算样式的情况，例如使用jquery获取dom元素的width，源码中就是使用的js获取计算样式
  • <head>中包含的js脚本，必须等待js脚本都被下载、解析和执行完成之后，才开始呈现页面（浏览器遇到<body>标签才开始显示内容）
  • defer属性，只适用于外部脚本文件。脚本会立即下载，但是会延迟到整个页面都解析完毕之后再运行。defer多个脚本是按照顺序执行的，如果有依赖关系，需要特别注意脚本顺序。
  • async属性，同样只适用于外部脚本。浏览器立即下载脚本，但是下载完毕之后立即执行。使用async主要是脚本下载时并不影响页面的渲染。多个async脚本之间不能保证运行顺序。

  • window.load事件在页面的一切加载完毕时触发
  • HTML5的DOMContentLoaded事件则在形成DOM树完成后触发，在页面进入domInteractive状态之后立即触发（DOM树构建完成之后，页面进入domInteractive状态,domInteractive状态意味着用户可以与页面产生交互）
  • 待续

参考文档

1、HTML5官方文档关于defer和async的部分

2、HTML5官方文档关于DOM树完成之后，脚本的执行以及状态的变化的部分

js和css文件位置对页面性能的影响的更多相关文章

  1. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  2. js或css文件合并的三种方式推荐

    源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...

  3. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  4. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

  5. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  6. 关于WEB-INF目录不提供外部访问及JSP引用 js，css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  7. js或css文件后面的参数是什么意思？

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  8. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  9. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

随机推荐

  1. 20179215《Linux内核原理与分析》第一周作业

    一.Linux介绍 我们现在很常见Windows系统,对于Linux则显得尤为陌生.当然我也不例外,初识Linux过程中遇到一些困惑,但我也在实验的同时通过不断查找资料与实践中慢慢解决问题.那么下面我 ...

  2. NYOJ-求逆序数 ----------------待解决，WA

    描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 现在,给你一个N个元素的序列,请你判断出它的逆序数 ...

  3. ACM学习历程—SNNUOJ1132 余数之和(数论)

    Description F(n) = (n % 1) + (n % 2) + (n % 3) + ...... (n % n).其中%表示Mod,也就是余数.例如F(6) = 6 % 1 + 6 % ...

  4. 如何在开启了log-bin的MySQL Server中创建FUNCTION

    在MySQL主从复制机器的master的数据库中创建function,报出如下错误: Error Code: 1418. This function has none of DETERMINISTIC ...

  5. asp.net C#操作存储过程读取存储过程输出参数值

    这段时间在做一个价格平台的项目时候,同事让我写一个存储过程.该存储过程是根据查询条件得出一组新数据,并且返回该组数据的总条数,此处的存储过程我用到了分页,其中主要知识点和难点是之前做项目的时候没有用到 ...

  6. 安装LMS记

    LMS学习管理系统,即英文Learning Management System的缩写.中文常用别名:在线学习系统. 尝试安装一款LMS,并进行二次开发. Moodle 首先想到的是Moodle.Moo ...

  7. TS学习之变量声明

    1.Var 声明变量 a)存在变量提升 (function(){ var a = "1"; var f = function(){}; var b = "2"; ...

  8. oracle中创建sequence指定起始值

    oracle中创建sequence指定起始值 DECLARE V_Area_Id NUMBER; BEGIN SELECT MAX(T.Area_Id)+10 INTO V_Area_Id FROM ...

  9. 问题：C# Dictionary嵌套使用；结果：嵌套Dictionary添加 ， C#2.0泛型详细介绍

    Dictionary<int, Dictionary<string, string>> dict1 = new Dictionary<int, Dictionary< ...

  10. 利用java mail发送邮件

    import java.util.Date; import java.util.Properties; import javax.activation.DataHandler; import java ...