渐进式渲染
前端工程师关注网页性能,关于网页渐进式加载;就是说,我们想要浏览器尽可能地显示内容。这个非常重要,尤其是在慢速网络条件下用户访问大量内容的网页。及时地给用户一些视觉反馈是极好的,就像进度指示器。
HTML页面就是一个进度指示器。当浏览器逐步加载页面,页头,导航条,顶部logo等等,都作为视觉反馈于等待页面的用户,这提高了整体的用户体验。
把样式放在页面底部
如果把样式放在页面底部,根据你的浏览器和你如何加载页面的方式,会有两种不同的副作用,一个是白屏,另一个是无样式内容css闪烁
白屏
当浏览器加载了所有的部件,它等待页面底部不必要的style样式也下载完才开始渲染他们,styles样式并不会影响下载时间,但是它影响渲染的开始时间。
无样式内容闪烁
对于样式放页面底部的情况,另一些浏览器的行为并不会造成白屏,而是无样式内容闪烁。当在底部的styles样式下载完成之前,浏览器并不会等待样式下载完,就去渲染展示内容,页面首先加载无样式的页面内容,最后当样式下载完成并解析,浏览器会重新渲染页面,这就引起了无样式内容闪烁现象;
前端工程师需要做什么
把与页面渲染相关的styles放到页面顶部(head头中),把渲染无关的styles,等页面加载渲染完,再做些努力动态加载他们