一看就会，超有用活字格技能：一百四十九、活字格性能优化——资源篇

收藏

本帖最后由 Erik.Xue 于 2022-8-24 11:24 编辑

image.png455209960.png

性能，人类一直在追求上限。而活字格在为我们创造价值的同时，项目的性能提升是一个无法避免的话题。随着项目体积的增长，功能的增加，性能问题也需要我们从开始就重视起来。
那么在活字格中，如果想提升用户体验，该怎么做呢？

接下来就为大家介绍一些性能提升——资源相关的优化经验。

我们知道，用户使用浏览器浏览器网页，本质上就是和我们的应用服务器进行通信，当打开某个页面时，服务器收到用户的请求，就会将我们服务器上的资源返回给用户，用户浏览器拿到这些资源后，一通加工，呈现到我们眼前的就是一张“华丽”的网站页面。

So，静态资源是我们首要需要优化的，如下图：

image.png544004210.png

这是一个活字格应用打开时，加载的网络资源，可以F12打开控制台——Network中进行查看。

可以看到，按照加载时间从大到小排序，前面几个请求都是请求的静态资源：

image.png875947875.png

这些静态资源也属于关键资源，什么是关键资源呢，也就是必不可少且为静态文件的资源。

第一，关键资源越多，首次页面的加载时间就会越长，比如上图中黄框标出的就是CSS、font等静态关键资源。

第二，关键资源大小，所有关键资源的内容越小，其整个资源的下载时间也就越短，那么阻塞渲染的时间也就越短。

所以在活字格看来，优化这些关键资源的原则就是减少关键资源个数、降低关键资源大小、加速关键资源获取速度。

减少关键资源个数

我们在做项目的过程中，往往会添加一些JavaScript文件、css文件或者图片等资源，首先的就是想办法合并这些资源，减少不必要的附加文件。

降低关键资源大小

这个也就是优化工程内的资源文件大小，比如我们上传的图标文件、图片文件，尽量进行压缩后再上传到活字格设计器中。

加速关键资源获取速度

如果已经没有可优化的资源文件，那么为了加速网页加载时所需要获取的资源加载速度，我们可以使用CDN技术，将我们的网站中的关键资源放置到CDN服务器中，加速用户访问网站时的资源加载速度。
关于CDN如何在活字格进行配置可以参考：性能提升（CDN）

最后再和大家解释下浏览器中Network面板：该面板展示了页面中所有的请求内容列表，能查看每项请求的请求行、请求头、请求体、时间线及网络请求瀑布图等信息。

我们重点需要关注的是下图这里：

image.png73808592.png

黄框中有两个重要事件。

1、DOMContentLoaded：这个事件发生后，说明页面已经构建好 DOM 了，这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。

2、Load：说明浏览器已经加载了所有的资源（图像、样式表等）。

所有当这两个事件显示的资源大小超过10M时，就要注意了，要想办法优化我们的关键资源了哦~

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：一百四十九、活字格性能优化——资源篇

0 个回复

Wyn高级认证

Wyn认证

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章