性能 标签

嗯,搞点大事情

记录一些大公司,高级前端工程师的前端优化经验总结,并尝试着做些实验,以后肯定用的上,当看到新的技能时,实时更新在这篇文章。

DNS预解析

我们请求资源时,通常都是一个URL,拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样:

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂,比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法,并不是像上面这样简单,具体的看这篇文章,本文不多做解释。

在之前一段时间看了个首屏优化细节的文章,然后在自己项目里实际操作了下。

现在的业务逻辑涉及移动端支付,所以第一个需要考虑的就是首屏时间,如果首屏时间过长,用户体检是十分差的。其实就做了很简单一件事,在移动端将涉及页面渲染的样式表写成了内联样式。

大家都知道,请求了html之后才回根据html里面的链接去请求相应的样式,图片,视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕,浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面,而把js写在</body>之前的原因了。因为css涉及页面渲染,而js大多是业务逻辑,大多数不涉及页面渲染,所以完全可以把js的解析放在页面渲染之后。当然,你也注意到,大多数js不涉及页面渲染,而少数js也涉及页面渲染的,这时候可以把js放在<body>后面,另外这里也要注意,dom节点可能还没有生成,所以操作上一般是在<body>上加class,然后配合css的子父选择器。