高性能js之js文件的加载与解析

随着网站的发展,现在的网页已经离不开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文件必须在同一个域。

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

时间: 2024-10-10 11:54:09

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

Tomcat源码分析——server.xml文件的加载与解析

前言 作为Java程序员,对于tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析进行分析. 加载过程分析 Bootstrap的load方法用于加载tomcat的server.xml,实际是通过反射调用Catalina的load方法,代码如下: /** * Load daemon. */ private void load(String[] arguments) throws Exception { // Call

实现异步加载js文件及加载完成后回调

模块化工具类实现方式 基于AMD.CMD模式的JS模块化管理工具越来越流行,这些工具通常只需在页面中加载对应的工具JS,其他JS文件都是异步加载的,比如RequireJS就可以象下面这样做. 首先在页面加载 <script data-main="scripts/main.js" src="scripts/require.js"></script> 然后工具会自动识别data-main属性值,并加载对应的JS文件,在main.js可以加载更多模

在HTML文件中加载js

js加载只分为两种: 1.全局js,放在<head>标签里面,整个页面很多都用到的,它是优先加载的. 2.局部js,放在</html>结束标签以内的任何位置,它是第二加载的. 在HTML文件中加载js,布布扣,bubuko.com

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

问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下找不到文件,需要单独指定js css文件的访问路径.

js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致网页加载慢的问题

需引入文件:lazyload-min.js <script src="JS/lazyload-min.js" type="text/javascript"></script> 插入代码: function loadscript() { LazyLoad.loadOnce([ 'JS/touch.js', 'http://libs.baidu.com/jquery/1.2.3/jquery.min.js' ], loadComplete); }

js如何判断引入的js文件是否加载完毕

js如何判断引入的js文件是否加载完毕:如果javascript代码较少的话完全可以将js代码通过<script></script>标签写在当前页面,但是如果js代码非常庞大的话,那么页面将会变得非常的臃肿,并且由于js代码是同步加载,所以当js代码加载的时候,会阻塞下面内容的解析,所以最好能够动态加载js功能,尤其是能够实现根据需要动态引入外部js文件.由于动态加载js文件是异步的,所以有时候需要判断js文件是否加载完毕,下面就通过代码介绍一下如何实现判断功能.代码如下: fun

Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题

首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行查看 双击Tomcat服务,会打开一个窗口,然后点击Open launch configuration,可打开配置窗口,在这里可以查看到具体服务所在位置. 接下来步入正题,正如题目所说,Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载,如图 仔细看下路径,会

js判断异步引入的js文件是否加载完毕

在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证这个文件加载完成后,再执行下面的内容. 如何判断js是否加载完成?(实现loadScript(url,callback)异步加载脚本,完成后执行回调函数,要求支持IE) <!DOCTYPE html> <html> <head> <meta charset="

js引入php 用来加载静态页面 输出到页面中

HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd"></script> js.php代码: <?php //js加载静态页面 输出到页面中 $id = trim($_GET['id']); $file = 'iframe/'.$id.'.html'; if(file_exists($file)){ //echo '22'; $