高性能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文件必须在同一个域。
总结：以上五种方法可能最常用的也就是前两种，刚开始刻意要求自己做到前两点，养成习惯后就会觉得顺理成章。
高性能js之js文件的加载与解析的更多相关文章
- 常用js，css文件统一加载方法，并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- js判断flash文件是否加载完毕
轮询判断加载进度 img的加载完成有onload方法,一直不知道该怎么判断swf文件是否加载完毕了? 在应用中使用了轮询判断加载进度值PercentLoaded是否达到100,经测试,可以达到效果. ...
- Tomcat源码分析——SERVER.XML文件的加载与解析
前言 作为Java程序员,对于Tomcat的server.xml想必都不陌生.本文基于Tomcat7.0的Java源码,对server.xml文件是如何加载和解析的进行分析. 加载 server.xm ...
- 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- nginx设置反向代理后，页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
随机推荐
- testNG 并发测试
invocationCount是并发数,threadPoolSize是线程数,当线程是1的时候就是依次执行n次,当线程是并发次数时,就是同时执行n次 @Test public void abc ...
- 数据结构---Java---HashMap---JDK1.7
源码解读 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Clone ...
- PHP基础知识------页面静态化
1.在开发项目时,有时会遇到一些页面数据量特别大,但是又不经常改变的情况,如商城首页等,这时候就需要进行页面静态化,减轻服务器和数据库的压力. 这里我们先用原生的PHP写一个简单的demo,用来理解页 ...
- shell快速入门
$? 表示上一个命令退出的状态,0表示执行正常,不等于0表示执行不正常. $$ 表示当前进程编号 $ 表示当前脚本名称 $# 表示参数的个数,常用于循环 $*和$@ 都表示参数列表 $n 表示n位置的 ...
- Mac系统下安装Homebrew后无法使用brew命令
打开终端输入 brew提示:command not found 解决方法 输入命令: sudo vim .bash_profile 然后输入以下代码: export PATH=/usr/local/b ...
- PHP获取用户是否关注公众号。获取微信openid和用户信息
<?php /* * 首先填写授权地址为当前网址 * 将$appid和$secret参数替换成自己公众号对应参数,需要外网可以访问服务器环境测试 */ header("Content- ...
- PHP closedir() 函数
打开一个目录,读取它的内容,然后关闭: <?php$dir = "/images/"; // Open a directory, and read its contentsi ...
- px4的CMakelists.txt阅读
############################################################################ # # Copyright (c) PX4 D ...
- 【Flutter学习】可滚动组件之滚动监听及控制
一,概述 ScrollController可以用来控制可滚动widget的滚动位置 二,ScrollController 构造函数 ScrollController({ double initialS ...
- 深入java虚拟机学习笔记(一)
学习java学到最后都要很熟悉jvm,懂得了java的运行机制,查找问题就会很快了,一般我们都是会用,还到不了精通的地步,虽说我也是个多年的java工程师,但也没有很好的掌握jvm,最近换了一 ...