淘宝网首页的脚本为什么直接使用的是数量众多小文件?提供乐橙娱乐官网,乐虎在线等产品欢迎广大客户前来洽谈业务合作

乐虎在线

首页 > 解决方案 > 淘宝网首页的脚本为什么直接使用的是数量众多小文件?

淘宝网首页的脚本为什么直接使用的是数量众多小文件?


来源:乐橙娱乐官网 | 时间:2018-12-12

  通用的作法不应该是把这些脚本压缩为一个脚本文件,用于减少请求吗? 更奇怪的是虽然请求脚本众多,但执行效率却非常的高,几乎是在10帧左右就执行完毕了: 哪位高手能够来解释一下,指点一下?

  如果你直接点“查看源码”你就会发现并没有引用这么多JS,你在开发者工具里看到数量众多的JS是异步加载的。

  这么做的有几个好处,首先我们知道JS的加载是页面渲染的一个瓶颈,许多开发建议都建议我们将script放在页面的最后面,因为JS是同步加载的,必须等当前文件加载结束才能执行下一步操作。有些时候有些网站网络不佳会出现页面一片空白,可是我们查看源码却已经完整加载完了,这就是因为JS还没加载导致页面无法渲染。异步加载能让一些次要的JS模块在页面加载结束后再动态加载,那么页面的渲染将会更为顺畅。

  当然,淘宝这么做不仅仅是为了保证页面加载更快,淘宝这么做有一个更重要的原因——将不同的功能模块化,达到按需取用的,而且让代码更易于维护。在淘宝这么大的规模下,JS的数量是惊人的,而且许多功能都严重重复,如果没有一个系统的整理,那么这些代码将会混乱不堪,模块化就显得尤为重要了。将不同的功能模块化,可以让代码分类存放,更加方便管理,而且在使用时按需取用,页面加载也更顺畅。

  为什么不把所有JS压缩成一个文件?如果全部文件压缩为一个,那么文件的大小是十分恐怖的。仅KISSY的各种组件加在一起就有整整20多M,如果加上工程师编写的扩展组件,这么恐怖的数据量,估计你去淘宝买一件衣服的时间足够你看一场NBA全明星球赛了。

  另一个重要的原因,就是前面提及的按需取用。淘宝拥有数量巨大的JS模块,其中肯定有许多相似的,另一方面,不同的页面之间需要取用的JS也有所不同,比如A页面可能需要弹框和标签效果,而B页面需要标签效果和表单美化。如果将这三个不同的组件压缩成一个文件供AB页面调用,那么每个页面都额外增加了一个模块的网络开销,在淘宝这么复杂的框架下这个额外开销是十分恐怖的。当然,你也许会认为按照不同页面的需要压缩所需的JS便可以解决这个问题,然而淘宝的页面数量也十分巨大,这么做也会严重加重开发人员的工作量。

  同时,这么做还有个好处就是,加载完成的JS可以立即执行而不需要等待整体的加载。(前面说了,JS文件的必须加载完成才能执行下一步动作)而且一个页面中,势必有许多较为次要的JS效果,这些效果也许你浏览完整个页面都不会被触发(比如某个按钮点击后的一系列事件),使用异步加载能让JS在需要的时候才加载,而不是因为需要等待整体的加载导致主要JS无法执行。

  一是按需载入。如果全站的 js 都一样,那么打成一个大 js 就很好的减少了 HTTP 的请求数;但很明显淘宝不适用这个前提。另外单个文件如果更新的话,使用分别载入的方式不会影响到其他 js 的缓存。

www.qifabet.com 相关文章

    无相关信息