随着网站的发展，现在的网页已经离不开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. 深度探索C++对象模型第四章：函数语义学

    C++有三种类型的成员函数:static/nonstatic/virtual 一.成员的各种调用方式 C with class 只支持非静态成员函数(Nonstatic member function ...

  2. 【Java学习笔记】2015.1.5

    1.classpath中的“.”表示当前的路径,所以配置classpath时要注意不能忘了“.”.如果不注意,会出现cmd下运行程序时,.java文件可以编译但是不能运行: 一般的classpath配 ...

  3. 转载 jQuery实现放大镜特效

    效果图. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. C++ 浅析调试，内存重叠查看

    这里举个例子查看内存, 环境为:vs 2017 测试为strcpy[因为测试老api,需要在 预处理中 添加 _CRT_SECURE_NO_WARNINGS ] 测试问题:内存溢出 源码: #incl ...

  5. Windows下Tomcat安装 + eclipse-Server配置

    一.Tomcat安装 1.安装 解压安装包到自己的电脑上,建议不要解压到中文目录下 2.配置 网上有些安装教程提到需要配置CATALINA_HOME环境变量,此变量指向了tomcat 的目录,主要是为 ...

  6. STM32串口USART通信总结

    一.GPIO设置USART的初始化 /**************************实现函数******************************************** *函数原型: ...

  7. FZU 2150 Fire Game （高姿势bfs--两个起点）

    Description Fat brother and Maze are playing a kind of special (hentai) game on an N*M board (N rows ...

  8. mysql数据权限操作

    1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost identified by &quo ...

  9. 2的N次方求解-----C++

    2的N次方求解,一般情况如果不超出C/C++基本数据类型的表达范围,这个问题及其容易,但是如果N的值十分的大,以致于超出基本数据类型表达范围 下面的程序正是解决2的N次方这个大数精确求解的源码 #in ...

  10. P3203 [HNOI2010]弹飞绵羊(LCT)

    弹飞绵羊 题目传送门 解题思路 LCT. 将每个节点的权值设为\(1\),连接\(i\)和\(i+ki\),被弹飞就连上\(n\),维护权值和\(sum[]\).从\(j\)弹飞需要的次数就是\(sp ...