网站性能优化三大策略

　　性能优化是一个复杂的话题，涉及的技能很多，如何通过优化网页性能提高用户体验?今天给大家介绍一些常见的方法。

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

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

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

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

　　当然，应该为每个资源定义缓存策略。有些可能很少改变，或者根本不会改变。其他国家的变化更快。其中一些包含敏感信息，另一些可能被视为公开信息。使用“private”指令防止CDN缓存私有数据。也可以优化web图像，尽管图像请求不会阻止解析或呈现。

　　2. 减少关键资源的总数

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

　　样式表

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

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

　　脚本

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

　　标记为async的脚本不会阻止DOM构造或CSSOM，因为它们可以在构建CSSOM之前执行。但是请记住，内联脚本无论如何都会阻止CSSOM，除非您将它们放在CSS之上。相比之下，标记为“延迟”的脚本将在页面加载结束时进行评估。因此，它们不应影响文档(否则将触发重新呈现)。

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

　　3. 缩短关键渲染路径长度

　　最后，CRP长度应缩短至可能的最小值。在某种程度上，上述方法可以做到这一点。

　　作为样式标记属性的媒体查询将减少必须下载的资源总数。脚本标记属性defer和async将防止相应的脚本阻止解析。使用GZIP缩小、压缩和归档资源将减少传输数据的大小(从而减少数据传输时间)。内联某些样式和脚本可以减少浏览器和服务器之间的往返次数。

　　我们还没有讨论的是在文件之间重新排列代码的选项。根据最新的最佳性能理念，一个网站最快应该做的第一件事就是显示ATF内容，ATF代表折叠上方，这是立即可见的区域，无需滚动。因此，最好以先加载所需样式和脚本的方式重新安排与渲染相关的所有内容，其他所有内容都停止—既不解析也不渲染，并始终记住在进行更改之前和之后进行测量。

　　总之，网站性能优化包含了网站响应的所有方面，如缓存、设置CDN、重构、资源优化等，但所有这些都可以逐步完成。作为一名web开发人员，您应该将本文作为参考，并始终记住在实验前后测量性能。

本文来源：www.gec-edu.org

网站性能优化三大策略相关推荐

JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》
本篇博文来源于网络 226 人赞同了该文章原文作者:IMWeb jerryOnlyZRJ 原文链接:网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区 ...
移动网站性能优化（未完。。。）
移动网站天生有三种性能限制:带宽低,内存小,处理器性能低. 这些性能挑战又加上其他的问题,如: 网页比以前更大延迟相差巨大下载速度相差巨大解决问题: 改善网站性能的主要策略并没有因为从PC变成手 ...
移动网站性能优化：网页加载技术概览
移动网站性能优化:网页加载技术概览 2013/08/27 | 分类: IT技术 | 0 条评论 | 标签: WEB开发, 性能优化, 移动分享到: 47 本文由伯乐在线 - 伯乐在线读者翻译自 ...
网站性能优化有哪些方法
网站性能优化有哪些方法一.总结一句话总结: web前端性能优化:浏览器访问优化.CDN加速.反向代理应用服务器性能优化:分布式缓存.异步操作.使用集群.代码优化 web前端性能优化方法有哪些 1 ...
前端面试—网站性能优化
我们常将网站性能优化措施归结为四大方面: 1.css优化: 2.js优化: 3.合理利用缓存,提升网络传输速率: 4.减小请求资源体积: 5.其它 1 css优化 1.1使用雪碧图,减少http请求, ...
如何进行网站性能优化？
如何进行网站性能优化? 1.背景介绍为什么要对网站进行性能优化网站的访问量及用户的持久性其实在一定程度上取决于其性能,如果一个网站响应耗时久,动画卡顿,占用大量的cpu等,往往就会导致用户流失.尤 ...
前端如何进行网站性能优化
大家好,我是IT修真院学员,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点-前端如何进行网站性能优化. 一.背景介绍性能优化的目的 1.从用户角度而言, ...
前端-网站性能优化——CDN加速
前端-网站性能优化--CDN加速网站性能优化是一个大活儿,按工种划分的话,分前端.后端和db等,作为一名前端工程师,这系列文章只聊前端工程师应该知道的关于网站性能优化的那些事儿.写此文章算是一个工作 ...
网站性能优化从入门到粗通（PHP 篇）
本文来自作者蒋岩在 GitChat 上分享「网站性能优化从入门到粗通(PHP 篇)」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比题外话:本次 Chat 的主题是入门到粗通,所以内 ...
【前端性能】网站性能优化
网站性能优化 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数, ...

网站性能优化三大策略

网站性能优化三大策略相关推荐

最新文章

热门文章