html中引入外部css,js加载时间问题

新手上路,请多包涵

假设在一个html中的head部分引入十个需要下载的外联css文件,每个文件需要加载10s(资源不在本地);在body尾部引入十个外部js文件,每个需要下载10s
(1)css文件共需要下载多久
(2)全部css下载完毕后页面才开始渲染还是有一个css下载完就开始渲染
(3)js文件共需要下载多久

如上,求教

阅读 3.3k
2 个回答

你好,加载时间长度根据访问者网速和服务器带宽决定。
具体时间范围是:
css需要时间: 10s~10*10s
js:10s~10*10s

css+js 用时:10s~10*10s

假设不考虑网络情况,每个文件下载时间都固定为10s(当然10s下载一个文件有点慢了,建议使用CDN加速)
以chrome为例:

情况一:所有的CSS和JS文件都是在同一个域名下

由于chrome对于同一个域名的并发请求数为6

所需的时间为:

let spTime = Math.ceil(20 / 6) * 10; // 40

情况二:CSS和JS文件分布在不同的域名下,每个域名不超过6个

所需的时间为:

let spTime = Math.ceil(20 / 20) * 10; // 10

一般在真实的工程中我们可以将10个CSS文件打包压缩成1~2个,如果文件较大,我们可以扔到CDN上,对于JS文件也是一样;另外一个思路就是我们可以做按需加载。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题