博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高性能js之js文件的加载与解析
阅读量:6946 次
发布时间:2019-06-27

本文共 863 字,大约阅读时间需要 2 分钟。

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

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

 

转载于:https://www.cnblogs.com/alichengyin/p/4190024.html

你可能感兴趣的文章
060——VUE中vue-router之路由嵌套在文章系统中的使用方法:
查看>>
tenda某路由器信息泄露查找
查看>>
uva 10710 - Chinese Shuffle(完美洗牌)
查看>>
怎么清除火狐浏览器的cookie?
查看>>
连麦介绍
查看>>
MQTT 客户端源码分析
查看>>
IT思想类智力题
查看>>
php设计模式-单例模式
查看>>
php扩展php-redis安装与使用
查看>>
python一天一题(2)
查看>>
[HTML5] Semantics for accessibility
查看>>
Win10下安装Ubuntu16.04虚拟机并搭建TensorFlow1.3环境
查看>>
leetcode 108. Convert Sorted Array to Binary Search Tree
查看>>
【商城购物车】购物车逻辑
查看>>
PCIE协议解析 synopsys IP loopback 读书笔记(1)
查看>>
关于小程序你需要知道的事
查看>>
表服务器无法打开与报表服务器数据库的连接。所有请求和处理都要求与数据库建立连接...
查看>>
4月第4周业务风控关注 | 网络犯罪经济每年1.5万亿美元 GDP居全球第12位
查看>>
idea中gitlab新创建分支查找不到的原因
查看>>
php调试时echo,print_r(),var_dump()的区别
查看>>