这标题起得有点标题党，实际情况是我最近在做一个公司内部工具时，遇到了这么一个需求，给定一个静态资源站点上某张图片的url（比如[链接]），如何获取其存储大小并计算出加载该资源的平均网速呢？注意，是存储大小，而不是图片的宽高尺寸大小。接下来就是我在实现这个需求中总结的一些方式。

相信小伙伴们都被问过这样一个问题：让一个元素隐藏起来，有多少种方法呢？常规来讲，我们有三种方法display: none、opacity: 0和visibility: hidden ，基于display: none的副作用，已经是个被说烂的问题，主要是有以下缺点:

最近发现国外有一个系列，专门探究从输入URL到页面可交互的详细过程，是一份干货十足的好资料。笔者决定分为四篇文章对其进行有删减地翻译，只希望能对大家有所帮助，毕竟这是前端必备的知识点，也是容易忽略掉某些细节的知识点。事先声明，这个系列完全由笔者手翻，如有翻译不当的地方，恳请读者给出改进意见！

vue中dom的更像并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改dom，我们看下面的代码。

对于大多数前端工程师来说，图片就是UI设计师(或者自己)切好的图，你要做的只是把图片丢进项目中，然后用以链接的方式呈现在页面上，而且我们也经常把精力放在项目的打包优化构建上，如何分包，如何抽取第三方库........有时我们会忘了，图片才是一个网站最大头的那块加载资源(见下图)，虽然图片加载可以不不阻碍页面渲...