翻译了一篇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. Session 和cookie机制详解

    参考: http://blog.csdn.net/fangaoxin/article/details/6952954/ http://blog.csdn.net/hjc1984117/article/ ...

  2. gcc 4.8.5安装

    在利用张乐博士的最大熵模型工具包(Maximum Entropy Modeling Toolkit for Python and C++)和条件随机场的经典工具包CRF++(CRF++: Yet An ...

  3. 小米5安装Xposed框架——需要解锁刷机

    Xposed官网 https://forum.xda-developers.com/xposed 官方模块厂库 https://repo.xposed.info/ 中文站点 https://xpose ...

  4. Gym - 100801D：Distribution in Metagonia （数学）

    题意:给定一个N,让你把它拆成若干个只含素因子2和3的数之和,且两两之间没有倍数关系,比如10=4+6. 思路:即是2因子的幂递增,3因子的幂递减:或者反之. 对于当前N,我们拆分出的数为num=2^ ...

  5. 1057 Stack (30)（30 分）

    Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...

  6. BZOJ5461: [PKUWC2018]Minimax

    BZOJ5461: [PKUWC2018]Minimax https://lydsy.com/JudgeOnline/problem.php?id=5461 分析: 写出\(dp\)式子:$ f[x] ...

  7. ACM学习历程—广东工业大学2016校赛决赛－网络赛D 二叉树的中序遍历(数据结构)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=3 这算是一个胡搞类型的题目.当然肯定是有其数据结构支撑的. 唯一的限制就是 ...

  8. 【LeetCode】066. Plus One

    题目: Given a non-negative integer represented as a non-empty array of digits, plus one to the integer ...

  9. Bootstrap CSS教程

    Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  10. BZOJ4695：最假女选手

    浅谈区间最值操作和历史最值问题:https://www.cnblogs.com/AKMer/p/10225100.html 题目传送门:https://lydsy.com/JudgeOnline/pr ...