随着网站的发展,现在的网页已经离不开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. 负载均衡中间件(一)Nginx高性能负载均衡器

    Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/PO3)代理服务器,并在一个BSD协议下发行,可以在UNIX.GNU/Linux.BSD.Mac OS X.Solaris,以 ...

  2. TCP练习

    然后基本的socket编程,用TCP做两个进程互相发消息.C端主动发hello,S端收到后回world. #include <stdio.h> #include <stdlib.h& ...

  3. php开发面试题---jquery和vue对比(整理)

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  4. Python进阶:set和dict/对象引用、可变性和垃圾回收/元类编程/迭代器和生成器

    frozenset:不可变集合,无序,不重复 dict上的特性: 1. dict的key或者set的值 都必须是可以hash的(不可变对象 都是可hash的, str, fronzenset, tup ...

  5. python 的装饰器,

    昨天去面试,发现了装饰器还是不太熟悉, 笔试题目是: 随意编写两个对输入参数做加减乘除运算的函数(需要有除法),写完后,用装饰器实现对函数出现除数为0的异常捕获,如果有异常,使用print打印日志. ...

  6. 当前系统的CPU和内存的空闲百分比

    设想我们有一个php页面A比较耗资源,因此在每次执行页面A中的代码前需要检测一下系统目前CPU和内存的空闲百分比.我们可以利用下面几个函数来解决这个问题 1 2 3 4 5 6 7 8 9 10 11 ...

  7. POJ 1789 Truck History (Kruskal)

    题目链接:POJ 1789 Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks ...

  8. PAT_A1104#Sum of Number Segments

    Source: PAT A1104 Sum of Number Segments (20 分) Description: Given a sequence of positive numbers, a ...

  9. python学习笔记:模块——time模块

    timetime模块提供各种时间相关的功能,与时间相关的模块有:time,datetime,calendar等. 时间有三种表示方式,一种是时间戳.一种是格式化时间.一种是时间元组.时间戳和格式化时间 ...

  10. HashSet源码解析笔记

    HashSet是基于HashMap实现的.HashSet底层采用HashMap来保存元素,因此HashSet底层其实比较简单. HashSet是Set接口典型实现,它按照Hash算法来存储集合中的元素 ...