400-0901-091
NEWS
网站建设、网站制作、网站设计等相关资讯

网站性能优化三大策略

日期:2022-07-08 21:10:38 访问:20次 作者:邦盾营销

性能优化是一个复杂的话题,涉及的技能很多,如何通过优化网页性能提高用户体验?今天给大家介绍一些常见的方法。想要对网站性能优化有更深入的了解和认识,可以参加Web前端培训,通过概念讲解加实战项目演练的方式,帮你快速掌握当下最热门的优化技巧。


1.尽可能减少要传输的数据量


首先,删除所有未使用的部分,例如JavaScript中不可访问的函数、带有永远不匹配任何元素的选择器的样式,以及永远隐藏在CSS中的HTML标记。其次,删除所有重复项。然后,我建议设置一个自动缩小过程。例如,它应该删除后端服务的所有注释(但不是源代码)以及不包含其他信息的每个字符(例如JS中的空白字符)。完成后,我们剩下的可以是文本。这意味着我们可以安全地应用压缩算法,比如GZIP(大多数浏览器都能理解)。最后,还有缓存。当浏览器第一次呈现页面时,这不会有什么帮助,但会在以后的访问中节省很多。但关键是要记住两件事:


如果使用CDN,请确保支持缓存并在其中正确设置。


与其等待资源的过期日期,您可能希望有一种方法可以从您的角度更早地更新它。将文件的“指纹”嵌入到URL中,使本地缓存失效。


当然,应该为每个资源定义缓存策略。有些可能很少改变,或者根本不会改变。其他国家的变化更快。其中一些包含敏感信息,另一些可能被视为公开信息。使用“private”指令防止CDN缓存私有数据。也可以优化web图像,尽管图像请求不会阻止解析或呈现。在Web前端培训中,你可以全面学习到网站性能优化相关技术,了解其优化模式和最佳实践,最终掌握使用优化网站性能的能力。


2.减少关键资源的总数


“关键”仅指网页正确呈现所需的资源。因此,我们可以跳过流程中未直接涉及的所有样式,还有所有的脚本。


样式表


为了告诉浏览器不需要特定的CSS文件,我们应该为引用样式表的所有链接设置媒体属性。使用这种方法,浏览器将只视需要处理与当前媒体(设备类型、屏幕大小)匹配的资源,同时降低所有其他样式表的优先级(它们将被处理,但不会作为关键渲染路径的一部分)。例如,如果向引用打印页面样式的样式标记添加media=“print”属性,则当介质未打印时(即在浏览器中显示页面时),这些样式不会干扰关键呈现路径。


为了进一步改进该过程,还可以将一些样式内联。这为我们节省了至少一次到服务器的往返,否则获取样式表就需要这样做。



脚本


如上所述,脚本是解析器阻塞的,因为它们可以改变DOM和CSSOM。因此,不改变它们的脚本不应该是块解析,从而节省我们的时间。为了实现这一点,所有脚本标记都必须标记为async或defer属性。


标记为async的脚本不会阻止DOM构造或CSSOM,因为它们可以在构建CSSOM之前执行。但是请记住,内联脚本无论如何都会阻止CSSOM,除非您将它们放在CSS之上。相比之下,标记为“延迟”的脚本将在页面加载结束时进行评估。因此,它们不应影响文档(否则将触发重新呈现)。所以如果你想学习网站性能优化更多方法,不妨报名参加Web前端培训,学习性能优化对技能提升和职业发展都有很大的帮助。


换句话说,使用defer,脚本直到页面加载事件触发后才执行,而async允许脚本在解析文档时在后台运行。