当用户访问网页时,直观的感觉是网页内容的速度。优化工作主要是为了这个目的。那么如何提高页面加载(或呈现)的速度呢?一般来说,有三个方面:
1.代码逻辑:优秀的代码逻辑结构可以有效减少呈现页面(如虚拟)DOM)时使用的内存和速度,这超出了本文的范围。
2、SSR服务器渲染,又称直接输出。在服务器端呈现屏幕的所有内容HTML静态代码后,可直接输出到浏览器,有效加快用户访问网站时屏幕的加载时间。但这方面不在本文范围内。
本文将讨论提高静态文件的加载速度,大致分为以下几点:
减少静态文件请求的数量(请求的成本高于移动页面的网络速度)
(1)代码压缩是常用的优化方法之一。
平时开发,JS脚本文件和CSS样式文件中的代码将基于特定的代码规范(如javascript提高项目的可维护性和团队合作效率。但在项目发布中Internet客户机(浏览器)上后会识别这些代码。此时,不需要代码命名规范和空间缩进。为了减少静态文件的大小,我们可以使用工具来混淆和压缩这些代码。我们选择在这里使用Webpack,稍后介绍一下。
(2)合并文件NPM很受欢迎。许多第三方代码库经常用于前端项目的开发,如jquery、axios、weixinJSsdk、lodash、bootstrap等。每个库都有自己的脚本或样式文件。古老的方法是将标签单独引入这些图书馆,从而在打开页面时产生几十个请求,这对移动终端来说是不可接受的。
(3)GZIP
压缩合并后,文件的大小和数量客观减少。然而,一旦网站有更多的业务逻辑或引入更多的第三方库,文件的大小对移动终端仍然不乐观。
现在是gzip是时候压缩了。~我们在Webpack添加到配置中gzip压缩配置。
(4)为什么cdn和cache使用cdn?
cdn它是一个全球(或国内,特定于供应商)的分布式网络,可以更快地将网站的内容传输到服务范围内的特定位置,通常远离实际的内容服务器。例如,在极端情况下,您的网站托管在爱尔兰(海南),您的用户访问澳大利亚(MOHE)。此时,当用户访问您的网站时,延迟将非常大,并将您的(静态)数据放在澳大利亚(MOHE)的cdn它将大大提高用户访问该网站的体验。如果没有cdn我们可以添加服务expires头,减少dns查找,配置etag,并使ajax可缓存。
(5)安全:
CSPWeb必须熟悉前端XSS安全漏洞。我们知道,javascript语句甚至CSS可能会导致表达式XSS许多前端现在使用攻击CSP限制脚本源代码防御的策略。
支付宝扫一扫
微信扫一扫