web性能优化之---JavaScript中的无阻塞加载性能优化方案
2024-08-21 14:28:21
一、js阻塞特性
JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。 即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面。
二、优化方案
1、尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。
注意:CSS文件本身是并行下载,不会阻塞页面的其他进程。但是,如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以,最好不要把内嵌脚本放在CSS的<link>之后。
2、减少外链接数量,减少请求。可以将脚本成组打包,这点现在的构建工具已经做得很好了。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。
3、有几种方法可以使用非阻塞方式下载Javascript:
1 ) .为<script>标签添加defer属性(仅IE和Firefox3.5以上)
2).动态创建<script>元素,用它下载并执行代码
3) . 在页面加载完成后才加载JS,即在window对象的load事件触发后在下载脚本。
4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
5).用XHR对象下载代码,并注入到页面
最新文章
- 前端如何正确选择offer,到底选哪个?
- 新手理解HTML、CSS、javascript之间的关系
- 18 TaskScheduler任务调度器抽象基类——Live555源码阅读(一)任务调度相关类
- [Reship]如何回复审稿人意见
- [HDU 2546]饭卡 (动态规划)
- SQL Server性能优化(2)获取基本信息
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
- thickbox关闭子页后ajax局部刷新父页
- asp.net网站性能优化2则
- Skew Join与Left Semi Join相关
- DirectShow基础编程 最简单transform filter 编写步骤
- 剑指offer 数字在排序数组中出现的次数
- iOS 引导页
- Atom打造 c/c++编译环境(忙了一个上午)
- Andorid基础_web通信_webView案例
- spring中自定义Event事件的使用和浅析
- PHP——秒数转换为时分秒
- Testing - 自动化测试的几个基础概念
- 【C#实现漫画算法系列】-判断 2 的乘方
- Python操作Influxdb数据库