您的位置:首页 > 常用工具 > Javascript加载执行方法总结
Javascript加载执行方法总结

Javascript加载执行方法总结

类别:常用工具    更新时间:2023-04-29 11:01:05

  • 30

    人气值

  • 19

    已收藏

  • 16

    正在玩

无广告安全小编亲测

简介推荐30相关
  • Javascript加载执行方法总结

浏览器性能上,这可能是所有开发者关心的问题,因为阻塞特性,即运行时,浏览器不会处理其他任务。 但是浏览器不可能只运行一个任务,而是同时只能执行一个任务。

不管代码是内联的还是包含在外部文件中,页面的下载和解析都必须等待脚本完成后才能继续向下执行。 这样做的原因是脚本的执行可能会重新渲染页面 UI。 我们典型的脚本函数如下所示。 喜欢:

当浏览器遇到

Javascript加载执行方法总结

这是文件导入的示例。

但是这种写法理论上是没有问题的,但是这里存在性能和体验问题。 上面的代码加载了3个外部文件js页面加载完成后执行,每个文件在加载过程中都会阻塞页面的解析。 浏览器只能等待他们下载并运行我们上面提到的代码后才能继续页面。 最致命的问题是,如果把文件放在最前面,当文件加载缓慢时会出现空白页面,这样用户就看不到页面,更谈不上交互式网页了。 推荐的方式是把所有的文件,包括外部链接文件都挡在标签的底部,减少对整个页面加载的影响。 这里不列举例子。

2.延时脚本

Javascript加载执行方法总结

这次

## 标题文字##

如果浏览器不支持defer属性,上述代码的运行顺序为:Delay-》-》 。 如果浏览器支持defer属性,那么运行顺序是:-》-》 。 应该能直观的看出区别。defer标签目前主流浏览器都支持

Javascript加载执行方法总结

另外,还有一个必须要提到的属性:async。 用于加载异步脚本,async和defer的相同点是使用并行下载,下载过程中不会出现阻塞。 区别在于执行的时间。 async 在加载完成后自动执行js页面加载完成后执行,而 defer 需要等待页面完成。

3.动态脚本元素

DOM 允许动态创建 HTML 支持的所有内容。 喜欢:

Javascript加载执行方法总结

var = .("");.type = "text/";.src = "file1.js"; ._r("头")[0].();

上面的新

当然还有其他的类库,比如LABjs,这里就不一一介绍了。

总结

都会

展开内容
精彩推荐 +
相关推荐 +
游戏资讯 +