随着网站的发展，现在的网页已经离不开js，经常一个页面会引入大量的js。那么该如何合理的加载这些js？

head标签中引入js文件可能是最常见的一种方式，但是这样会造成一个问题。因为j可以说是浏览器中的霸主，换句话说在js的引入和解析过程中页面是不会进行加载和渲染的。那么如果js加载的时间过长，就会造成页面一段时间的空白，这样的用户体验无疑是很差的。下图是引入head中js和css时的加载过程。

从上图可以看到加载和解析每个js文件时都会耗费一定的时间，而这段时间不能同时进行别的事情，显然这种情况是不合理的，下面将介绍几种解决办法。

1.将所有<script>标签尽可能的放在靠近<body>的底部，这样js的加载将在页面渲染完后进行，不会造成页面空白的现象。

2.限制js文件的总数，尽量合并成js文件，下载一个100k的文件远比下载四个25k的文件要快。这一工作可以用打包工具实现，例如“Yahoo! combo handler”。

3.使用<script>的defer属性。defer属性是HTML4增加的东西，只在internet Explorer和fireFox 3.5以上版本才支持。defer 属性规定是否对脚本执行进行延 迟，直到页面加载为止。但是要确保<script>中的js不会改变文档的内容，也就是说没有document.write.

4.实现js的动态加载。例如可以将js的引入封装成一个函数，然后在页面加载完成后再调用函数，个人觉得这种方法太麻烦，但是有一些js库可能有封装好的方法。

5.使用XHR注入，也就是Ajax技术动态请求，这种方法的优点是你可以下载不立即执行的JavaScript代码，等需要执行时，代码都已经下载完成，可以直接使用，缺点是请求js文件必须在同一个域。

总结：以上五种方法可能最常用的也就是前两种，刚开始刻意要求自己做到前两点，养成习惯后就会觉得顺理成章。

高性能js之js文件的加载与解析的更多相关文章

  1. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  2. js判断flash文件是否加载完毕

    轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...

  3. Tomcat源码分析——SERVER.XML文件的加载与解析

    前言 作为Java程序员,对于Tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析的进行分析. 加载 server.xm ...

  4. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  5. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  6. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  7. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  8. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  9. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

随机推荐

  1. springColud父工程依赖配置

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  2. 一些idea

    二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...

  3. 【C#、阿里云、Tomcat、XP系统】c#下使用.NET4.0中HttpWebRequest访问Tomcat中HTTPS项目时，在XP系统中超时

    情景: 1.使用Java开发的Web项目,部署在服务器Tomcat中 2.项目使用HTTPS,使用阿里云的PFX证书 阿里云推荐Tomcat配置如下 <Connector port=" ...

  4. tar的具体参数和用法！

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  5. oracle服务端导出/导入方式expdp/impdp

    1. expdp导出步骤 1.1 用sys管理员登录sqlplus [root@hxjk_test_mysql_redis_file oracle]# sqlplus SQL*Plus: Releas ...

  6. 改进持续交付中的CI环节

    改进持续交付中的CI环节 在当前 DevOps 的趋势下,持续集成(CI)和持续部署(CD)具有支柱性地位,那么能够成功搭建 CI/CD 流水线就至关重要了. 今天我就讲一讲如何做好CI部分,让我们的 ...

  7. ajax请求在参数中添加时间戳

    ajax请求在参数中添加时间戳 参考网址

  8. javascript闭包实现缓存小案例

    ​ /* * 闭包实现缓存 * 属性:有个键--值 --->所以可以将缓存数据存放在一个对象中 * 方法:缓存存储 setCache * 缓存的获取 getCache * */ function ...

  9. Ubuntu下实现Nginx+Tomcat实现负载均衡

    先说一下为什么写这个文章,在性能测试过程中,我们可能会关注很多指标,比如CPU.IO.网络.磁盘等,通过这些指标大致可以判断哪个环节遇到了性能瓶颈,但是当这些指标无法判断出性能瓶颈时,我们可能就需要对 ...

  10. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...