随着网站的发展，现在的网页已经离不开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. SSH出错

    [root@node01 ~]# ssh node02 ssh_exchange_identification: Connection closed by remote host 修改连接数无效 [r ...

  2. Qt事件学习

    一.创建Qt gui应用对应的源码: 点击(此处)折叠或打开 //mylineedit.h #ifndef MYLINEEDIT_H #define MYLINEEDIT_H #include < ...

  3. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. delphi 使电脑睡眠代码

    //提升进程令牌函数 function AdjustProcessPrivilege(ProcessHandle:THandle;Token_Name:Pchar):boolean; var Toke ...

  5. nginx查看变量值

    nginx查看变量值 location / { echo $host; #域名 echo $remote_addr; echo $remote_user; echo $time_local; echo ...

  6. 在 MacBook 上安装 Ubuntu

    建立ubuntu 安裝U盤,加入usb port,按住option key 開機,正常安裝. 完成後,會缺少wifi drive sudo apt-get install bcmwl-kernel-s ...

  7. 2019牛客多校第四场 I题 后缀自动机_后缀数组_求两个串de公共子串的种类数

    目录 求若干个串的公共子串个数相关变形题 对一个串建后缀自动机,另一个串在上面跑同时计数 广义后缀自动机 后缀数组 其他:POJ 3415 求两个串长度至少为k的公共子串数量 @(牛客多校第四场 I题 ...

  8. 正则匹配class并替换整个class为空

    str.replace(/class=[\"|'](.*?)[\"|'].*?/g, '')

  9. 不是有效的win32应用程序

    问题描述: 用vs2012编写的程序在xp下运行提示"不是有效的win32应用程序", 改成静态编译还是会提示上面的错误 解决办法: 原来常规里面的平台工具集的设置如上,更改为下面 ...

  10. Webx.0-Web2.0：Web2.0

    ylbtech-Webx.0-Web2.0:Web2.0 Web2.0 是相对于Web1.0 的新的时代.指的是一个利用Web的平台,由用户主导而生成的内容互联网产品模式,为了区别传统由网站雇员主导生 ...