在浏览器加载CSS时怎么防止影响页面渲染

在浏览器加载CSS时怎么防止影响页面渲染

这篇文章主要讲解了“在浏览器加载CSS时怎么防止影响页面渲染”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“在浏览器加载CSS时怎么防止影响页面渲染”吧！

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" href="css.css" media="none">  

样式表一下载好，media 属性就必须被设置一个可用的值，以便样式规则能被应用到 html 文档中onload 事件就可以用来将 media 属性切换到all：
 

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">  

这种加载 CSS 的方法将比标准的方法在向访问者传送有用信息的速度上快很多。至关重要的 CSS 加载时仍然可以用一般的阻塞方式处理 (或者你也可以为了最终的性能对它进行内联处理) ，而不重要的样式则可以慢慢下载，并在解析/渲染过程的后面一点的阶段进行应用.

这一技术使用了 JavaScript，但是你也可以在一个<noscript>元素中封装一个等价的阻塞方式的 <link> 元素来处理不能运行 JavaScript 的浏览器:
 

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">   

2. <noscript><link rel="stylesheet" href="css.css"></noscript>  

这项技术有一个副作用。当一个非阻塞的样式表完成加载，文档就将进行重绘，以反映它定义的任何新的样式规则。而注入新的样式到页面中会触发内容回流, 但这也只是在这对第一次没有历史缓存的页面加载过程中会是一个问题。由于任何跟性能有关的东西，你都将要在需要控制一次回流耗费超过潜在的速度优势时，进行必要的调整。
 
使用非阻塞 CSS 加载字体

字体第一次绘制的性能是一个问题，它们是阻塞式的资源，也会让应用它们的文本在该字体下载时不可见 。使用上述示例中的非阻塞链接，就可能在幕后下载包含字体数据的样式表，不阻塞压面的渲染：
 

CSS Code复制内容到剪贴板

1. <link rel="stylesheet" href="main.css">   

2. <link rel="stylesheet" href="font.css" media="none" onload="if(media!='all')media='all'">  

font.css 包含一个 base64 编码的 WOFF 版本的 Merriweather 字体。
 

CSS Code复制内容到剪贴板

1. @font-face {   

2.   font-family: Merriweather;   

3.   font-style: normal;   

4.   font-weight: 400;   

5.   src: local('Merriweather'), url('data:application/x-font-woff;charset=utf-8;base64,…')   

6. }  

main.css 包含了需要应用到站点的所有样式规则。下面是字体的声明：
 

CSS Code复制内容到剪贴板

1. body {   

2.   font-family: Merriweather, "Lucida Grande", …;   

3. }  

当字体正在下载时，第一个匹配到的备用回退字体 (这里就是 Lucida Grande) 被用来渲染页面的内容。 一旦字体样式表被应用了，Merriweather 就会被使用. 我尝试去确保回退的字体将相似的布局特征共享给优先选择的字体，那样不可避免的回流就尽可能微妙了。

感谢各位的阅读，以上就是“在浏览器加载CSS时怎么防止影响页面渲染”的内容了，经过本文的学习后，相信大家对在浏览器加载CSS时怎么防止影响页面渲染这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[