预加载系列二：让File Prefetching丝丝润滑无痛无痒
所谓 File Prefetching 就是在一个页面加载成功后，默默去预加载后续可能会被访问到的页面的资源。 前端资源预加载其实没啥新鲜的，我们倒腾这个事情的过程却是很有有意思也很有启发性。 第一个版本，简单粗暴有点痛 1、建一个独立的页面，里面索引了各种需要预加载的css、js，代码类似下面这样。 <html> <head> <link rel=…
Read MoreJavaScript 类型的那些事
概述 JavaScript的类型判断是前端工程师们每天代码中必备的部分，每天肯定会写上个很多遍if (a === 'xxx')或if (typeof a === 'object')类似的类型判断语句，所以掌握JavaScript中类型判断也是前端必备技能，以下会从JavaScript的类型，类型判断以及一些内部实现来让你深入了解JavaScript类型的那些事。 类型 JavaScript中类型主要包括了primitive和object类型，其中primitive类型包括了：null、undefined、boolean、number、string和symbol(es6)。其他所有的都为object类型。 类型判断 类型检测主要包括了：…
Read More微信图片另存失败？这得从SNI说起
一、从一个微信Bug说起 问题：在微信Android客户端，一张七牛CDN上的HTTPS链接的图片，用微信浏览器打开可以正常访问，但是，长按图片保存时，却提示下载图片失败。 发现这个问题后，我用了一个简单的测试用例，很快就定位到问题原因。 从这个测试用例可以看出，只有七牛CDN上HTTPS链接的图片，长按保存才会失败。有了这个测试用例，我就猜测问题可能是HTTPS证书的原因。 于是，我就把这个问题报给了七牛，七牛排查之后，问题果然是HTTPS证书返回不对引起的。那么，是什么原因导致七牛返回的HTTPS证书不对呢？请继续看下文。 在了解问题的本质原因之前，…
Read MoreTiny-loader 好用的资源加载器
Tiny-Loader 项目已经在github上开源，具体可看： Tiny-Loader 概述 在前端性能优化中，我们会压缩静态文件，懒加载图片，合并请求，来加快页面打开速度。当这些都做完以后，前端性能优化仿佛进入了一个瓶颈，所有的资源都已经最合理化加载了。其实，仔细观察静态资源文件，会发现许多文件我们并不需要在页面一开始就下载它们。这时候，如果有个组件，帮助我根据优先级的不同，在特定的时间下载特定的资源，同时需要保证脚本的执行顺序，就能完美的解决这个问题。这个就是 Tiny-Loader 的起源。…
Read More