随着网站的发展，现在的网页已经离不开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. eclipse设置tomcat部署目录地址

    参考: https://blog.csdn.net/lvyuan1234/article/details/53418818 右键,open 操作前提是所有项目移除,并且右键clean掉相关数据! 修改 ...

  2. hdu 6085 Rikka with Candies (set计数)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  3. OC学习篇之---对象的拷贝

    在前一篇文章中我们说到了如何解决对象的循环引用问题:http://blog.csdn.net/jiangwei0910410003/article/details/41926369,这一篇文章我们就来 ...

  4. Linux系统之-TCP-IP链路层

    一.基本 网络层协议的数据单元是 IP 数据报 ,而数据链路层的工作就是把网络层交下来的 IP 数据报 封装为 帧(frame)发送到链路上,以及把接收到的帧中的数据取出并上交给网络层. 为达到这一目 ...

  5. BZOJ 4545

    bzoj 4545 给定一个踹树,支持几种操作. 本质不同子串询问 加入子树 询问字符串\(S\) 在树上的出现次数. 好码好码 重点就是维护\(parent\) 树,考虑用\(LCT\)维护此树. ...

  6. User control's property loses value after a postback

    User control's property loses value after a postback All variables (and controls) are disposed at th ...

  7. 65、salesforce的数据分页

    <apex:page controller="PagingController"> <apex:form > <apex:pageBlock titl ...

  8. 用 Flask 来写个轻博客 (4) — (M)VC_创建数据模型和表

    目录 目录 前文列表 扩展阅读 定义数据模型 models 创建表 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hello World! 用 ...

  9. Linux打开关闭ping

    #关闭 ” >/proc/sys/net/ipv4/icmp_echo_ignore_all #打开 ” >/proc/sys/net/ipv4/icmp_echo_ignore_all

  10. SQL Server2012创建连接服务器到ORACLE11G

    做ETL,肯定少不了经常会从不同的数据库直接进行数据的操作,为了更好的进行跨库操作,SQL SERVER 2012拥有LinkedServer功能.前段时间写了个SQL SERVER同种数据库直接的链 ...