从三个方面入手有效提高网页加载速度
发布时间：2022-02-16 12:00:03 所属栏目：搜索优化 来源：互联网
导读：当用户访问网页时，最直观的感觉是网页内容的速度。我们需要做的优化工作主要是为了这个目的。那么如何提高页面加载（或呈现）速度呢？一般来说，有三个方面： 1、代码逻辑：优秀的代码逻辑结构可以有效地减少呈现页面（如虚拟DOM）时使用的内存和速度，这超
|
当用户访问网页时，最直观的感觉是网页内容的速度。我们需要做的优化工作主要是为了这个目的。那么如何提高页面加载（或呈现）速度呢？一般来说，有三个方面： 1、代码逻辑：优秀的代码逻辑结构可以有效地减少呈现页面（如虚拟DOM）时使用的内存和速度，这超出了本文的范围。 2、SSR服务器渲染，也称为“直接输出”。在服务器端将第一个屏幕的所有内容呈现为HTML静态代码后，可以直接输出到浏览器，有效地加快了用户访问站点时第一个屏幕的加载时间。但是，这方面不在本文的范围内。 3、本文将讨论提高静态文件的加载速度，大致分为以下几点：  减少静态文件请求的数量，从而减少请求的数量（请求的成本高于移动页面的网络速度） （1）代码压缩是最常见的优化方法之一。 在平时开发时，JS脚本文件和CSS样式文件中的代码将基于特定的代码规范（如javascript标准样式），以提高项目的可维护性和团队合作的效率。但是在项目发布到Internet上之后，客户机（浏览器）会识别这些代码。此时，不需要代码命名规范和空间缩进。我们可以使用工具来混淆和压缩这些代码，以减小静态文件的大小。这里我们选择使用Webpack，稍后将介绍它。 （2）文件合并在NPM中非常流行。在前端项目开发中，经常使用很多第三方代码库，如jquery、axios、weixinJSsdk、lodash、bootstrap等。每个库都有自己的脚本或样式文件。最古老的方法是，我们将标签单独引入这些库中，从而在打开页面时产生几十个请求，这对于移动端来说是不可接受的。 （3）GZIP 经过压缩合并后，文件的大小和数量得到了客观的减少。但是，一旦站点有了更多的业务逻辑，或者引入了更多的第三方库，文件的大小对于移动端仍然不乐观。 现在是gzip压缩出现的时候了。~我们在Webpack的配置中添加了gzip压缩配置。 （4） 安全： CSPWeb前端必须熟悉XSS安全漏洞。我们知道，javascript语句甚至CSS表达式都可能导致XSS攻击，许多前端现在使用CSP策略来限制脚本源代码防御。 （编辑：泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
