记一次首屏优化
By hiluluke on
在之前一段时间看了个首屏优化细节的文章，然后在自己项目里实际操作了下。
现在的业务逻辑涉及移动端支付，所以第一个需要考虑的就是首屏时间，如果首屏时间过长，用户体检是十分差的。其实就做了很简单一件事，在移动端将涉及页面渲染的样式表写成了内联样式。
大家都知道，请求了html之后才回根据html里面的链接去请求相应的样式，图片，视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕，浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面，而把js写在</body>之前的原因了。因为css涉及页面渲染，而js大多是业务逻辑，大多数不涉及页面渲染，所以完全可以把js的解析放在页面渲染之后。当然，你也注意到，大多数js不涉及页面渲染，而少数js也涉及页面渲染的，这时候可以把js放在<body>后面，另外这里也要注意，dom节点可能还没有生成，所以操作上一般是在<body>上加class，然后配合css的子父选择器。
回到本文，我们需要见降低首屏时间。我在chrome调试工具下发现，再加载html之后再去请求css带来的时间上的延迟是很大的。所以尝试了下，将css压缩之后内联在html里面。结果如下：
之前的加载时间：
写成内联后的加载时间：
上面的网络状态都是在3g网络状态下。
多次测试下，时间节约约一半。
这样做的坏处：
- 不易维护，可以想象在html里面放一段压缩过后的css代码，是件多么恶心的事。不过在移动端感觉影响不大，样式表不会太大。
- 将css内联到html中的繁重操作，如果能自动化久好了。
针对上面的问题，只要有一个工具能将样式表主动替换就好了，我去npm找了下。只找到一个将gulp插件将样式写成行内的，这完全是个不可逆的过程了。所以最后也没有使用。
所以现在尝试去自己写写gulp插件，看能不能满足自己需求。