码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器渲染页面的探讨

时间:2017-04-03 18:57:25      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:doctype   做什么   交流   javascrip   span   color   首页   href   async   

我们都知道,网页中引用的外部文件: JavaScritp、CSS 等常常会阻塞浏览器渲染页面,执行一大片js代码也会迟滞页面的渲染。假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载;或者,我们在页面中插入某段执行起来很耗时的js代码,那么浏览器渲染页面的过程就会被阻塞,直到JS文件下载并执行完后才继续。由此可见,前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面。

 

先来看看,为什么会发生渲染阻塞?

例如:有如下的html文件

<!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 的下载过程中出现任何延迟,也将影响整个页面的渲染。对此,我们可以有如下解决办法:

1、如果页面的初始渲染的确依赖于page.js,我们可以考虑使用内联JavaScript(一般很少看到有项目这么做)。

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

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

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

3、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 导致出错。这里可以实行依赖加载,requireJs即提供了较好的解决办法,此处可以用requireJs依赖加载来避免,总之requireJs好处多多,这里暂时不予大篇幅讨论,请参见我的另一篇博文 requireJs实现前端框架。

 

再来看为什么css文件加载也会导致阻塞呢?

由于CSS决定了DOM元素的样式、布局,所以浏览器遇到CSS文件时会等待CSS文件加载并解析完后才继续渲染页面。也有一些对策来解决这个问题:

1、我们可以将那些页面首屏渲染需要用到的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代码直接写在head里和body的元素上,是很不规范的写法,因前面参与的一个华为的项目前端编码很多地方去全都这样子做了,我们维护起来相当费劲,但是现实情况已经这样子了,只能暂且如此了,因此这个办法我个人不是很推荐。

2、推迟加载CSS

对于那些首屏渲染不需要用到的CSS,我们可以依旧使用文件形式并在页面内容渲染完成后再加载,当然首频渲染必须要的css文件,肯定还是要放在head里加载的。

<!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脚本文件的引入,我有深入的体会,2016年年初的时候,我们一个交流群的战友发了个截图(非同事),他参与的那个项目,首页上引入了13个js文件,其中不乏jquery,react这些体积相对较大的js库,我当时就懵了,这要是网速不给力,岂不是要哭了,使用依赖加载多好嘛。简简单单多啰嗦了几句,与本文表达的意思无关。希望大家喜欢这篇博文。

浏览器渲染页面的探讨

标签:doctype   做什么   交流   javascrip   span   color   首页   href   async   

原文地址:http://www.cnblogs.com/xiangxiao/p/6662439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!