网页中引用的外部文件： JavaScritp、CSS 等常常会阻塞浏览器渲染页面。假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载，那么浏览器渲染页面的过程就会被阻塞2秒，直到该JS文件下载并执行完后才继续。前端性能调优时必须排除任何潜在的渲染阻塞点，让浏览器在最短时间内渲染出整体页面。
JavaScript
为何会阻塞？

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="page.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

上述代码中，当浏览器解析 script 标签时，由于浏览器并不知道 page.js 将会对页面做什么改变，所以浏览器需要停止渲染，下载并执行 page.js 后再继续渲染后面的内容。如果 page.js 的下载过程中出现任何延迟，也将影响整个页面的渲染。
Inline JavaScript

如果页面的初始渲染的确依赖于page.js，我们可以考虑使用内联JavaScript。

<!doctype html>
<html>
  <head>
    <script type="text/javascript">
    /* page.js的内容 */
    </script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

推迟加载

如果页面的初始渲染并不依赖于page.js，我们可以考虑推迟加载page.js，让其在页面初始内容渲染完成后再加载。

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World</h1>
    <script type="text/javascript" src="page.js"></script>
  </body>
</html>

异步加载

HTML5允许我们给 script 标签添加属性： "async" 来告诉浏览器不必停下来等待该脚本执行，什么时候下载完什么时候执行该脚本就可以了。这样的话浏览器会边下载page.js边渲染后面的内容。

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="page.js" async></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

然而如果某个JS被其他JS所依赖，那么就不能使用异步加载了。

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.11.3.min.js" async></script>
    <script type="text/javascript" src="jq-plugin.js" async></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

由于使用异步加载后，JS不再顺序执行。上例中 jq-plugin.js 依赖于jQuery，如果 jq-plugin.js 先下载完成，此时jQuery还没下载完，那么浏览器就会先执行 jq-plugin.js 导致出错。当然这类问题可以通过引入依赖管理来解决，这是另外一个主题，就不展开讨论了。
CSS

由于CSS决定了DOM元素的样式、布局，所以浏览器遇到CSS文件时会等待CSS文件加载并解析完后才继续渲染页面。
Inline CSS

我们可以将那些页面首屏渲染需要用到的CSS代码加入Inline CSS。

<!doctype html>
<html>
  <head>
    <style tpe="text/css">
    .blue {
        color: blue;
    }
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

推迟加载CSS

对于那些首屏渲染不需要用到的CSS，我们可以依旧使用文件形式并在页面内容渲染完成后再加载。

<!doctype html>
<html>
  <head>
    <style tpe="text/css">
    .blue {
        color: blue;
    }
    </style>
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <link href="other.css" rel="stylesheet" />
  </body>
</html>

结论

在页面加载时我们需要让页面内容尽快呈现给用户，页面初始渲染所需要的JS和CSS可以直接在 <head> 标签中以代码形式插入。所有的外部文件引用可以放在页面内容之后，对于JS文件也可以采用异步加载。

转载自：http://joji.me/zh-cn/blog/web-performance-optimization-remove-blocking-javascript-and-css

网页性能优化：防止JavaScript、CSS阻塞浏览器渲染页面的更多相关文章

  1. 【译文】使用webpack提高网页性能优化

    这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...

  2. 前端性能优化（JavaScript篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...

  3. 浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

    (1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与 ...

  4. chrome和Firefox浏览器渲染页面的不同

    一直很好奇chrome和firefox这两大浏览器的页面渲染有什么不同,今天自己写了些html代码来做了下检验. 先做html编码,代码如下: <!DOCTYPE html><htm ...

  5. 浏览器渲染页面的时候，不同的script块之间的关系

    浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...

  6. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  7. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

  8. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  9. YUI前端优化之javascript,css篇

    三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression) ...

随机推荐

  1. hive随机采样

    hive> select * from account limit 10;OKaccount.accountname     account.accid   account.platid  ac ...

  2. 复习 HTML

    1.<b></b>:加粗 <i></b>:斜体 <u></u>:文字下划线 <s></s>:文字删除线 ...

  3. Linux——JDK配置

    一.安装jdk-7u21-linux-x64.rpm文件 [root@centos6 local]# rpm –ivh  jdk-7u21-linux-x64.rpm 二.防火墙开放8080端口 (在 ...

  4. maven项目里的mapper不被加载，解析

    出现这个错误是因为maven加载配置文件是从resource里加载的,所以要配置一下

  5. C# 调用win32 DLL报错 System.BadImageFormatException

    C# 调用win32 DLL报错  System.BadImageFormatException 项目右键属性->项目设计器->生成->平台->把'默认设置(任何 CPU)'改 ...

  6. delphi 调用 c++builder

    delphi 调用 c++builder c++builder 调用delphi 混合调用,mix https://community.embarcadero.com/blogs/entry/mixi ...

  7. Navicat Premium 连接Oracle 数据库（图文教程）

    一.需要准备的软件 Navicat premium 32位 官方下载地址:http://www.navicat.com.cn/products/navicat-premium Instant Clie ...

  8. 我要重新开始学习C++了！

    C++实在是博大精深!之前总不想读厚厚的C++ Primer. 然而,现在的水平真的只是初学者!只是因为写的代码太简单,所以没有用到一些特性.可以说还是门外汉! 写笔记!

  9. 使用sigaction函数

    sigaction函数 修改信号处理动作(通常在Linux用其来注册一个信号的捕捉函数) :失败:-1,设置errno 参数: act:传入参数,新的处理方式.oldact:传出参数,旧的处理方式. ...

  10. spark1.6.1 on yarn搭建部署

    注:本文是建立在hadoop已经搭建完成的基础上进行的. Apache Spark是一个分布式计算框架,旨在简化运行于计算机集群上的并行程序的编写.该框架对资源调度,任务的提交.执行和跟踪,节点间的通 ...