翻译了一篇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. php中socket的使用

    php中使用socket在服务器端主要使用这么几个函数: 1/$socket = socket_create(AF_INET,SOCK_STREAM,SOL_TCP)创建一个socket 2/sock ...

  2. ffmpeg代码实现自定义encoder

    1.概述 本文主要讲述如何用ffmpeg代码实现自己的encoder. 2.代码 /* *本程序主要实现一个自己的encoder并加入到encoder链中去,供api调用 *作者:缪国凯(MK) *8 ...

  3. ACM学习历程—HDU5521 Meeting（图论）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5521 学习菊苣的博客,只粘链接,不粘题目描述了. 题目大意就是一个人从1开始走,一个人从n开始走.让最 ...

  4. bzoj 3727: Final Zadanie 思维题

    题目: Description 吉丽YY了一道神题,题面是这样的: "一棵n个点的树,每条边长度为1,第i个结点居住着a[i]个人.假设在i结点举行会议,所有人都从原住址沿着最短路径来到i结 ...

  5. 【JSON解析】JSON解析

    前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...

  6. jquery给select赋值

    项目中用到通过ajax请求数据然后给select赋值,由于经常遇到类似的代码,在这里把整个过程记录一下. 首选发出ajax请求如下: <script type="text/javasc ...

  7. OpenStack、CloudStack、Eucalyptus和vCloud Director四大主流云平台怎么选？

    软件产品开发公司Altoros Systems的IT基础设施设计师Vadim Truksha在美国<网络世界>上发表一篇文章,详细对比了CloudStack.Eucalyptus.vClo ...

  8. ZOJ1610(经典线段树涂色问题)

    Description Painting some colored segments on a line, some previously painted segments may be covere ...

  9. 阻止文件不被上传到iCloud

    转自:http://blog.csdn.net/a921800467b/article/details/38386787 http://www.cocoachina.com/bbs/read.php? ...

  10. Oracle---SQL子查询---详解

    子查询其实就是指嵌入到其他语句中的select语句,也称其为嵌套查询. 值得注意的在DDL语句中应用子查询的时候子查询可以使用order by 子句. 但是在DML语句中的where子句,set子句中 ...