网页中引用的外部文件： 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. 《GPU高性能编程CUDA实战》第三章 CUDA设备相关

    ▶ 这章介绍了与CUDA设备相关的参数,并给出了了若干用于查询参数的函数. ● 代码(已合并) #include <stdio.h> #include "cuda_runtime ...

  2. Termux 详细安装

    termnux安装方法 https://blog.csdn.net/u010475354/article/details/79675893 使用Termux把Android手机变成SSH服务器 htt ...

  3. pl/sql学习笔记---马士兵教程38-48

    Procedure Language/Structure query Language 一.关于语言学习 1.数据类型 2.语法   通过例子来学习很快就能明白 set serverputout on ...

  4. 阿里巴巴开源项目: canal

    参考:https://www.cnblogs.com/duanxz/p/5062833.html docker 部署canal :  https://blog.csdn.net/u013705066/ ...

  5. ip黑白名单防火墙frdev的原理与实现

    汤之盘铭曰 苟日新 日日新 又日新 康诰曰 作新民 诗曰 周虽旧邦 其命维新 是故 君子无所不用其极 ——礼记·大学 在上一篇文章<DDoS攻防战 (二) :CC攻击工具实现与防御理论>中 ...

  6. 浅谈 CAS

    CAS: CAS:Compare and Swap, 翻译成比较并交换. java.util.concurrent包中借助CAS实现了区别于 synchronized 同步锁的一种乐观锁. CAS应用 ...

  7. js乱码问题解决

    乱码有可能出现在下面两种情况 1.高级浏览器直接访问js路径 2.jsp引用js 针对上述两种情况的解决方式: 1.查看设置浏览器的字符集 2.查看web服务器的字符集,比如Tomcat 配置UTF- ...

  8. Dos命令快速设置ip、网关、dns地址

    netsh interface ip set address name="本地连接" source=static 192.168.1.8 255.255.255.0 192.168 ...

  9. 处于ESTABLISHED 状态的socket 却没有进程信息

    接<一次docker中的nginx进程响应慢问题定位记录> 在排查这个问题的时候,我先使用netstat 去查看,看到底是内核协议栈的连接请求没给到进程,还是进程accept链路慢了,或者 ...

  10. codes often WA

    枚举: 1.完美立方 #include<iostream> #include <cstdio> using namespace std; int main() { int N; ...