翻译了一篇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. Android 内存监测工具 DDMS --> Heap

    用 Heap监测应用进程使用内存情况的步骤如下: 1. 启动eclipse后,切换到DDMS透视图,并确认Devices视图.Heap视图都是打开的: 2. 将手机通过USB链接至电脑,链接时需要确认 ...

  2. CMake简易入门

    使用CMake编译 CMake工具用于生成Makefile文件.用户通过编写CMakeLists.txt文件,描述构建过程(编译.连接.测试.打包),之后通过解析该文件,生成目标平台的Makefile ...

  3. 1143. Lowest Common Ancestor (30)

    The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U ...

  4. 1045 Favorite Color Stripe (30)（30 分）

    Eva is trying to make her own color stripe out of a given one. She would like to keep only her favor ...

  5. 【Google】循环字符串里面的独立子串

    转载自九章算法(地址) 题目: 假设s是一个无限循环的字符串”abcdefghijklmnopqrstuvwxyz”,s就是一个”...zabcdefghijklmnopqrstuvwxyza...” ...

  6. Deferred Shading延迟渲染

    Deferred Shading 传统的渲染过程通常为:1)绘制Mesh:2)指定材质:3)处理光照效果:4)输出.传统的过程Mesh越多,光照处理越费时,多光源时就更慢了. 延迟渲染的步骤:1)Pa ...

  7. BZOJ1150：[CTSC2007]数据备份

    浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...

  8. 51nod 1967 路径定向——欧拉回路

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1967 一共只会有偶数个奇数度的点.因为每多一条边,总度数加2. 把 ...

  9. java代码简单练习

    总结: package com.ds; import java.awt.Color; import java.awt.FlowLayout; import javax.swing.JFrame; im ...

  10. Scala总结

    Scala总结 ===概述 scala是一门以Java虚拟机(JVM)为目标运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言. scala是纯粹的面向对象的语言.java虽然是面 ...