前端js加载到html,【Web前端问题】html中引入外部css，js加载时间问题

假设在一个html中的head部分引入十个需要下载的外联css文件，每个文件需要加载10s(资源不在本地)；在body尾部引入十个外部js文件，每个需要下载10s

(1)css文件共需要下载多久

(2)全部css下载完毕后页面才开始渲染还是有一个css下载完就开始渲染

(3)js文件共需要下载多久

如上，求教

回答：

你好，加载时间长度根据访问者网速和服务器带宽决定。

具体时间范围是:

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文件也是一样；另外一个思路就是我们可以做按需加载。