文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章主要讲解了“在浏览器加载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时怎么防止影响页面渲染这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯