浏览器渲染阻塞与优化-详解推迟加载、异步加载。

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介:
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力。所以性能优化对前端真的很重要!!!
本文介绍了什么是阻塞、为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项。
 
浏览器渲染阻塞与优化
      什么是阻塞?在页面中我们通常会引用外部文件,而浏览器在解析HTML页面是从上到下依次解析、渲染,如果<head>中引用了一个a.js文件,而这个文件很大或者有问题,需要2秒加载,那么浏览器会停止渲染页面(此时是白屏显示,就是页面啥都没有),2秒后加载完成才会继续渲染,这个就是阻塞。
     为什么会阻塞?
          因为浏览器不知道a.js中执行了哪些脚本,会对页面造成什么影响,所以浏览器会等js文件下载并执行完成后才继续渲染,如果这个时间过长,会白屏。
          CSS文件也一样,因为CSS文件会对DOM的样式,布局,色彩,效果产生影响,所以浏览器会等CSS文件下载并执行完成后继续。
          为了页面的性能,要避免阻塞。
     
      阻塞优化-推迟加载、异步加载。
           推迟加载(延迟加载)
               如果页面初始的渲染并不依赖于js或者CSS可以用推迟加载,就是最后在加载js和css,把引用外部文件的代码写在最后。比如一些按钮的点击事件,比如轮播图动画的脚本也可以放在最后。
      原理:因为浏览器默认是同步加载(这是为了避免重复触发“回流”和“重绘”),此时浏览器会从上到下逐条代码的加载、解析、渲染、执行。
复制代码
复制代码
 1 <html>
 2      <head>
 3     </head>
 4     <body>
 5         xxxxxxxxxxxxxxx
 6          <h1>推迟加载</h1>
 7          <script type="text/javascript" src="a.js"></script>
 8          <link href="a.css" rel="stylesheet" />
 9      </body>
10 </html>
复制代码
复制代码

 

         defer延迟加载:
    在文档解析完成开始执行,并且在DOMContentLoaded事件之前执行完成,会按照他们在文档出现的顺序去下载解析。效果和把script放在文档最后</body>之前是一样的。
          注:defer最好用在 引用 外部文件中使用,用了defer不要使用document.write()方法;使用defer时最好不要请求样式信息,因为样式表可能尚未加载,浏览器会禁止该脚本等待样式表加载完成,相当于样式表阻塞脚本执行。
 
         异步加载(非阻塞加载)
          注:a.js文件中的代码如下,这样就会造成阻塞,因为如果我不点击确定,就无法继续渲染。
1 alert("已暂停加载")
2 alert("开始加载")
 
            1)async异步加载:就是告诉浏览器不必等到加载完外部文件,可以边渲染边下载,什么时候下载完成什么时候执行。用法就是“async“
1  <script type="text/javascript" src="a.js" async></script>
                注:实际测试中IE10+才支持, 火狐,谷歌,Microsoft支持; 用了async不要使用document.write()方法;使用async时最好不要请求样式信息,原因和defer一样。
      注2:async 在w3school中介绍是IE9就能支持,而IE9也是号称能支持,但是实际是不能完全支持的。
 
            2)script dom element法:这个方法是用js动态创建一个script元素添加在document中。
                    : 支持全部浏览器(因为IE低版本IE10- 是单线程,所以要修改a.js才能显示正确的效果)
1 setTimeout("alert('异步加载成功')",2000)     //测试IE时候a.js文件要修改
复制代码
复制代码
 1 <script type="text/javascript">
 2     (function() {
 3      var s = document.createElement('script');
 4      s.type = 'text/javascript';
 5      s.async = true;                                        //这句可以删除,但是效果不变。
 6      s.src = 'js/a.js';
 7      var x = document.getElementsByTagName('script')[0];
 8      x.parentNode.insertBefore(s, x);
 9  })();
10 </script>
复制代码
复制代码
                    注意: 这种方法会阻止onload事件,比如下面的代码,会等到a.js中的弹出框弹出后再执行。
复制代码
1 <script type="text/javascript">
2     window.onload=function(){
3         document.getElementById('div').innerHTML="onload完成"
4     }
5 </script>
6 //写在html中
复制代码

 

 
             3)onload时异步加载:这个和 script dom element法差不多但是他不是同时执行js和html,他是等html的文件,图片之类的、页面所有的资源全部加载完成后再下载执行js,这样的方法可以避免阻塞onload事件的触发。(兼容所有浏览器)
复制代码
复制代码
 1 (function() {
 2      function async_load(){
 3          var s = document.createElement('script');
 4          s.type = 'text/javascript';
 5          s.async = true;
 6          s.src = 'js/yibujiaz.js';
 7          var x = document.getElementsByTagName('script')[0];
 8          x.parentNode.insertBefore(s, x);
 9      }
10      if (window.attachEvent)
11          window.attachEvent('onload', async_load);
12      else
13          window.addEventListener('load', async_load, false);
14  })();
复制代码
复制代码
          注:DOMContentLoaded与onload事件不同, DOMContentLoaded是页面解析完成,页面的dom元素可以使用,但是页面的图片、视频等资源可能还没加载完成
 
  我上面介绍的优化方式是常用的,除此之外还有其他的,比如异步加载还有AJAX异步加载,body onload异步加载等,这些用的比较少,有兴趣的工程师可以去查查相关资料。(如果你在博客园查基本上只要看一篇文章就好了,其他的基本上都说一样的,改都不会改;其实全网都差不多,都说互相转载复制的)。
 
 a.js全部代码
1 // setTimeout("alert('异步加载成功')",2000)
2 // alert("已暂停加载")
3 // alert("开始加载")

 

 HTML全部代码
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载</title>
    <!-- <script type="text/javascript" src="js/yibujiaz.js" async></script> -->
<script type="text/javascript">
    (function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.src = 'js/yibujiaz.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();
</script>
<!-- <script type="text/javascript">
(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'js/yibujiaz.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);
     else
         window.addEventListener('load', async_load, false);
 })();
</script>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById('div').innerHTML="onload完成"
    }
</script> -->
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="div">
    </div>
</body>
</html>
复制代码
复制代码
分类:  JAVASCRIPT
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/5767812.html ,如需转载请自行联系原作者
相关文章
|
19天前
|
存储 缓存 监控
|
19天前
|
存储 前端开发 开发者
|
2天前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
30 7
|
9天前
|
缓存 自然语言处理 前端开发
浏览器渲染
【10月更文挑战第28天】浏览器渲染涉及将HTML、CSS和JavaScript代码转换为可视网页,主要步骤包括:解析HTML构建DOM树、解析CSS构建CSSOM树、合并DOM与CSSOM生成渲染树、布局确定元素位置和尺寸、绘制元素到屏幕、合成图层形成最终图像。此过程不断优化以提升性能。
|
1月前
|
Web App开发 安全 中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品,支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件,并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末,安装包含详细说明。
|
30天前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
2月前
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
140 1
|
6月前
|
缓存 JavaScript 前端开发
浏览器渲染:理解页面加载的幕后工作
浏览器渲染:理解页面加载的幕后工作
|
3月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
52 5
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
49 1