当前位置:主页 > 蜘蛛池 > 页面性能优化的方法有哪些?

页面性能优化的方法有哪些?

时间:2020-09-23 09:22  来源:未知  点击

互联网有着名的8秒原则。当用户访问网页时,如果超过8秒,则会不耐烦。如果加载时间太长,他们将放弃访问权限。大多数用户希望页面在不到2秒的时间内加载。

实际上,每1秒的加载时间,就会失去7%的用户。 8秒不是准确的8秒,只是为了向Web开发人员展示加载时间的重要性。那么我们如何优化页面性能并提高页面加载速度呢?这是本文要讨论的主要问题。但是,性能优化是一个全面的问题。没有标准答案。列出一切并不容易。本文仅关注一些核心问题。以下是我总结性能优化的一些常见方法:

首先,资源压缩和整合

主要包括以下方面:html压缩,css压缩,js压缩和混淆以及文件合并。

资源压缩会从文件中删除多余的字符,例如回车符和空格。在编辑器中编写代码时,您将使用缩进和注释。毫无疑问,这些方法会使您的代码变得简单易读,但它们也会为文档添加额外的字节。

1.html压缩

Html代码压缩是压缩这些在文本文件中有意义的字符,但不以HTML格式显示,包括空格,制表符,换行符等,以及其他一些含义,例如HTML注释也可以压缩。

如何html压缩:

使用在线网站进行压缩(通常在开发期间不使用)

Nodejs提供了html-minifier工具

后端模板引擎渲染压缩

2.css代码压缩:

Css代码压缩只是无效代码删除和css语义合并

怎么做css压缩:

使用在线网站进行压缩(通常在开发期间不使用)

使用html-minifier工具

使用带有clean-css的css压缩

Image.png

3.js压缩和混乱

js的压缩和混淆主要包括以下部分:

1.无效的字符删除

2.消除评论

3.减少和优化代码语义

4.代码保护(代码逻辑变得混乱,降低了代码的可读性,这一点非常重要)

如何压缩和搞乱js

1.使用在线网站进行压缩(通常在开发期间不使用)

2.使用html-minifier工具

3.使用jglifyjs2压缩js

实际上,css压缩和js压缩和混淆比html压缩大得多,而css代码和js代码远远超过html代码。通过css压缩和js压缩减少流量将非常明显。因此对于大公司来说,html压缩是可选的,但css压缩和js压缩和混乱必须存在!

4.文件合并

Image.png

从上图中可以看出,非合并请求具有以下缺点:

文件和文件之间插入了上游请求,增加了N-1个网络延迟

更多受包装问题损失的影响

保持活动模式可能处于某种情况,并且可能在通过代理服务器时断开连接,也就是说,保持活动状态可能不会一直保持。

压缩合并的css和js可以减少站点上的http请求数量,但合并文件可能会导致问题:第一行呈现和高速缓存失效问题。如何处理这个问题? ----公共池合并和合并不同的页面。

如何合并文件

1.使用在线网站进行文件合并

2.使用nodejs实现文件合并(gulp,fis3)

二,非核心代码异步加载异步加载

1,异步加载的方式

三种异步加载方式 - 异步和延迟,动态脚本创建

1异步模式

async属性是一个新的HTML5属性,需要Chrome,FireFox和IE9浏览器支持。

async属性指定脚本可用后异步执行脚本。

异步属性仅适用于外部脚本

如果有多个脚本,则此方法不保证脚本按顺序执行。