如何优化
比方说下面例子:(styles.css里是非关键CSS代码)
<link rel="preload" href="styles.css" as="style" onload="this.οnlοad=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
主要原理如下:
link rel="preload" as="style"异步请求样式表(详情可见 Preload critical assets guide)
onload属性允许CSS在加载完成之后执行一些处理,在这里执行null转化,可以避免在切换rel属性时重复处理
noscript元素对不支持javascript的浏览器做兼容。
在本指南中,您使用了普通代码来实现此优化。在实际的生产场景中,最好使用 loadCSS 之类的函数,它们可以封装该行为并且在不同的浏览器中都运行良好。
© 版权声明
本站技术资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权请联系邮箱i@lho.cc删除!
THE END