zoukankan      html  css  js  c++  java
  • web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一、js阻塞特性

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

    二、优化方案

    1、尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

    注意:CSS文件本身是并行下载,不会阻塞页面的其他进程。但是,如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以,最好不要把内嵌脚本放在CSS的<link>之后。

    2、减少外链接数量,减少请求。可以将脚本成组打包,这点现在的构建工具已经做得很好了。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。

    3、有几种方法可以使用非阻塞方式下载Javascript:

    1 ) .为<script>标签添加defer和async属性(仅IE和Firefox3.5以上)

    • 设置了defer的script外链文件,在下载js文件期间不会阻塞HTML的解析,而且等js下载完毕时若HTML还没解析完毕,js会等到HTML文档解析完毕后再执行。如果有多个js下载文件,那么执行时也是按照顺序执行。
    • 设置了async的script外链文件,在下载js文件期间不会阻塞HTML的解析,但是js下载完毕之后就会立即执行,无论现在HTML是否正在解析。

    2).动态创建<script>元素,用它下载并执行代码

    3) . 在页面加载完成后才加载JS,即在window对象的load事件触发后在下载脚本。

    4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
    5).用XHR对象下载代码,并注入到页面

  • 相关阅读:
    【Selenium WebDriver】浏览器操作篇:打开浏览器、打开URL、关闭浏览器、获取页面的URL, Title, Source
    【读书笔记----云计算】云计算前世今生(基本概念)
    【Servlet入门】HelloServlet 小例子
    【Web前端知识从零开始】-- 浏览器F12、DOM 基础、页面元素定位
    生活常识
    工具的使用技巧
    业务知识
    工作方式
    Oracle SQL
    出差-闽西
  • 原文地址:https://www.cnblogs.com/leaf930814/p/8547005.html
Copyright © 2011-2022 走看看