Geekly articles weekly

在最简单的廉价手机上快速加载页面

标题中提到的那些电话，英文称为“功能电话”。 它们的功能极为不同。 此外，它们非常实惠，因为它们的价格在20-25美元左右。 可以将它们与现代智能手机的精简版进行比较。 这些电话使来自发展中国家的亿万人民能够使用网络资源。


Jio电话

如果该网站基于旨在确保其高速度工作的技术，那么每个人都将从中受益-既是廉价手机的所有者，又是那些使用功能强大的智能手机观看网页的人。

情况概述


我们正在谈论的设备（功能手机）价格便宜。 因此，它们的硬件功能相当弱。 因此，他们使用的CPU速度很慢（例如，廉价手机的处理器可能比顶级智能手机的处理器慢6倍）。 他们安装的RAM很少（可能大约为256-512 MB，通常小于4 GB）。 用于存储数据的内部存储器容量也相同，通常不超过4 GB。 这样的电话通常没有触摸屏。 相反，它们具有用于导航目的的键盘和简单的操纵杆。 cdpv显示了类似手机的外观。

这些手机执行JavaScript代码的速度无法与高级智能手机一样快。 他们很难显示包含大量媒体数据的网站。 因此，要准备在此类电话上可以正常使用的页面，您需要负责任地解决填充这些页面的问题。


十大现代智能手机：处理器性能（2019年上半年）

以上是2019年最畅销的10款智能手机的性能研究结果。 这项研究是使用Geekbench 4基准进行的，在上部，您可以看到流行的廉价手机-诺基亚3110的测试结果。

页面的JavaScript内容主要是在单核模式下执行的（值得记住的是，就其本质而言，JS代码比其余Web内容更“单线程”），因此JavaScript的性能与处理器功能息息相关。 这表明在考虑针对发展中国家的Web项目时，您需要记住那里使用的设备的特性。

该材料旨在解决开发速度较慢的设备的问题。 应用其中描述的技术，您可以创建一个方便所有人使用的网站-无论手机的性能如何。

一般资讯


也许您还记得，也许不是，但是在智能手机问世和广泛使用之前，我们称之为功能手机的手机一直流行到2000年代中期。 这些是带有键盘而不是触摸屏的紧凑型设备。 它们仅具有基本功能：拨打电话，发送短信，浏览网站，专注于页面的文本内容。 自智能手机问世以来，发达国家的简单手机数量有所下降。

在发展中国家，并非每个人都能负担得起智能手机和无限的4G资费。 这个市场已经被称为智能功能手机的设备所占领。 它们将简单手机的硬件和价格与智能手机特有的某些功能结合在一起。


便宜的电话

自2017年以来，具有智能手机功能的廉价手机市场显着增长。 预计到2019年，此类设备将在全球销售约4亿个。

诺基亚恢复了其旧的流行机型，例如诺基亚3110和8110（ 这是在带有KaiOS的诺基亚8110上调试网页的指南），这促进了低成本手机市场的增长。 在印度， Reliance Jio手机为用户提供了廉价而现代的移动访问Web资源的方式。 Jio为KaiOS的开发做出了贡献， KaiOS是一种基于Linux的操作系统，专为价格适中的简单手机而设计。

不断增长的简单电话市场已经产生了对可以在此类设备上有效工作的站点的需求。 要开发此类网站，您需要考虑一些限制。


专为低成本手机设计的各种项目

上一张图片显示了Google Images Lite和Facebook mBasic项目的屏幕。 这些项目可以在简单的电话上快速加载；它们对客户端脚本功能的依赖程度最低。 另一个屏幕截图是Proxx游戏，该游戏虽然严重依赖脚本，但使用激进的代码分离来加快加载速度。

廉价电话的局限性


发展中国家的低端电话用户受到三个因素的限制：

  • 少量廉价的高质量设备。
  • 高速通信网络无法访问。
  • 数据传输成本高。

对于那些想通过“功能手机的棱镜”来熟悉网络开发的人们，应该记住这些限制。 如果我们更详细地讨论此类电话的局限性以及使用它们的环境，我们将获得以下信息：

  1. 硬体 简单的电话通常具有较慢的（如1.1 GHz之类的）单核或双核处理器，并且RAM少于512 MB。 为了了解这如何限制设备的功能，请将其与多核处理器和4 GB RAM iPhone XS进行比较。
  2. 数据传输。 移动套餐越来越便宜，但是在可以分发低成本电话的地区，套餐仍然受到严重限制。 这意味着在开发用于功能手机的页面时，您应努力减少这些页面所包含的数据量。 这将使网站首先加载得更快，其次，可以减少用户访问此类网站的成本。
  3. 屏幕尺寸有限。 廉价电话的屏幕尺寸通常比智能手机的屏幕尺寸小得多。 我们正在谈论的对角线约为2.4英寸的屏幕。 这样的屏幕仅允许您显示数量非常有限的元素。 这意味着网站开发人员应努力下载要在屏幕上显示的内容。
  4. 缺少触摸屏。 如果设备未配备触摸屏，则意味着使用键盘处理页面时，应该可以轻松访问用户可以与之交互的所有内容。 您不应在页面上显示太多可以使用的元素。
  5. 琴键 在低成本手机上，使用的是硬件键盘，它与智能手机用户熟悉的屏幕上的QWERTY键盘完全不同。 硬件键盘大约有15个按键，其中多个按键用于输入一些字符。 结果，事实证明，就UX而言，有必要努力使对文本输入的需求最小化。

应当指出，即使在日本，有限的资费计划也会影响用户使用网络资源的可用性。


日本4G设备的页面加载时间

上图是此推文中的图片，其中说到月底在日本，由于关税计划的限制，页面加载速度变慢。

网站设计准则


以下准则可帮助您设计可在简单，便宜的电话上快速运行的网站。 通常，应该指出的是，不建议用户等待未明确请求的内容的下载。 在任何可能的地方，您都应努力减少加载和执行 JavaScript代码所需的时间。

▍设置首次加载站点时传输的数据量的限制


从服务器到客户端的过程中，页面的每个字节都会遇到许多瓶颈。 这些是慢速且不可靠的网络，它们是慢速处理器。 保证页面性能的唯一保证方法是严格计划页面的容量并实现（甚至超额完成）计划。

页面性能目标是由开发团队努力为其项目提供良好性能的约束条件设定的。 这些是度量标准的局限性，因此决定不对其进行超越。 在可测量的指标上设置此类约束，并在工作开始之前设置约束，有助于团队在向其添加新功能时确保项目的绩效在给定框架之内。

可以限制的资源指标的示例包括JavaScript包的大小，图像的大小（以字节为单位）和HTTP请求的数量。 可以设置度量标准的限制，这些度量标准会影响用户对页面的感知方式，这些度量标准可以设置为“ 第一满意涂料” ，“ 最大满意涂料”或“ 第一输入延迟” 。 它们使您可以评估用户看到该页面的速度以及与该页面进行交互的时间。 您可以根据网站目标受众的特征为此类指标设置阈值。

您可以针对自己的应用程序代码以及第三方脚本和类似的东西开发一个限制系统。 可以在项目构建期间使用Lighthouse （LightWallet）在连续集成系统中检查约束。

▍使用PRPL模式


Chrome开发团队建议使用PRPL模式来分阶段下载代码。 它旨在确保使用它的应用程序在低成本设备和慢速网络上尽快交互。 PRPL模式鼓励预加载使页面正常工作所需的最少JS代码量。 然后使用惰性加载技术加载资源。 如有必要，您可以使用服务工作者预缓存将来与网站进行交互所必需的JavaScript资源。

PRPL-50模式对等于50 Kb的初始加载资源量设置了限制。 由于低成本手机的硬件资源非常有限，因此您需要设置更严格的限制。 在这里，我建议您考虑PRPL-30模式。 30是30 Kb的源资源，这是第一页加载时加载的压缩和最小化包的大小。


30 Kb JS捆绑包中的空间分配示例。 这包括应用程序逻辑，框架代码，帮助程序实用程序和第三方依赖项

通过这种方法，在SSL连接过程完成之后，来自良好边界缓存服务器的站点资料的第一个字节将在大约2秒钟内到达设备。 这使我们有3秒钟的时间来下载原始路线的材料，显示它们并为用户交互准备页面。 对于基于JavaScript的项目，这意味着在首页输出中加载的压缩压缩包的总大小不应超过30 Kb。


使用PRPL-30模式，开发人员可以在大约5秒钟的时间内通过廉价电话将页面置于交互模式

也许这会让某人感到惊讶：“我们在说什么？ 原始捆绑大小为30 Kb？ 真奇怪 毕竟，我什至都不会把React和应用程序代码放到这个卷中！”应该注意的是，在开发针对真正薄弱的设备设计的站点时，为了用户方便，项目的创建者将不得不做出艰难的妥协。 例如，如果React的使用仅限于服务器呈现（1），听起来很明智，或者（2）包含应用程序逻辑的代码片段非常，非常小并且这在他们的准备中将应用最严格的延迟加载规则。 第三种选择-选择轻量级的React类似物，例如Preact（3）。 我们将在下面详细讨论这种妥协。

使用30 Kb限制创建的应用程序的示例为Proxx 。 初始项目数据集的大小为25 Kb，其区别在于TTI（交互时间）指示器小于5秒。 这是一个计算器，可用于查找Web项目的目标并选择自己的限制。

在延迟模式下加载的路由的建议大小不超过35 Kb。 但是“片段”的大小在30-35 Kb范围内，也足够大，可以谈论使用V8的脚本流处理功能的并行处理。

▍保存JavaScript资源


简而言之，如果我们谈论节省JavaScript资源，那么您可以使用静态呈现或服务器呈现 ，而无需占用客户端脚本。 如果没有客户端或混合渲染是完全不可能的，那么仅应将特定路由所必需的那些脚本发送给客户端，最好是在尽可能少的数据传输会话中执行此操作。 在这里，您可以考虑一些技术，例如逐步准备页面以便在浏览器中工作 。


静态渲染

JavaScript是简单手机的主要瓶颈


当开发用于廉价电话的交互式项目时，请注意，JavaScript通常是实现高页面性能的主要绊脚石。 这很重要，因为用户可以使用它们的时间取决于决定呈现页面的方式 。 即使他使用电话操纵杆与他们合作。 如果决定使用服务器端或静态呈现，请尝试使组织页面的交互式工作所需的JS代码量尽可能少。

URL输入； 加载服务器渲染结果； 加载使页面进入交互模式所需的JavaScript代码； 页面可供用户交互

JavaScript的价格包含两个指标：代码的加载时间和执行时间。 网络速度较慢（例如，稳定的3G连接）会增加JS的启动时间。 较慢的处理器将增加执行脚本所需的时间。 下图显示了各种设备处理流行的reddit.com资源的JavaScript代码所需的时间。 不难看出，速度较慢的设备（Alcatel 1X 5059D）所花费的时间是速度较快的设备（Pixel 3）的6倍。


不同设备处理流行网站的JS代码所需的时间

如果页面的呈现或使其进入交互模式的过程在很大程度上取决于JavaScript，则可能会导致这样一个事实，即廉价手机的用户将不得不等待30-60秒才能获得使用用户界面的机会。 因此，为了减少加载和处理JavaScript所需的时间，开发人员应谨慎使用脚本，并仅下载用户可能需要的那些路线和组件的代码。 当需要适当的代码时，您需要执行此操作。

努力使交互页面所需的代码量最少


以下是一些技巧，可帮助最大程度地减少提供页面交互功能所需的代码量：

  1. 尽可能广泛使用延迟加载机制。 我们谈论的是路线，组件，屏幕可见区域之外的资源，关于不能确保页面健康的极其重要的内容。
  2. 使用代码拆分机制将JavaScript代码拆分为多个部分，并仅下载用户使用初始路由时所需的内容。 通过减少已加载和已处理脚本的数量，这将导致更快的页面加载。
  3. 从JavaScript包中删除未使用的代码，以尽可能减小它们的大小。 为此，您将需要分析捆绑软件并识别那些根本不使用的库，以及可以用更紧凑的库替换的库，以适应项目的需求。 首次加载页面时未使用的库可以以惰性模式加载。
  4. 考虑使用差分代码加载机制。 这将允许您将现代JavaScript代码提供给现代浏览器，从而避免过多使用已转译的代码并避免使用polyfill。 减少旧版浏览器的代码可以提高现代浏览器的代码性能。
  5. 如果JS代码对于呈现页面和以交互方式显示其界面是绝对必要的，请组织必要脚本的初步加载 。 如下所示，相应的属性告诉浏览器该脚本很重要，需要尽快下载该脚本。

<link rel="preload" as="script" href="critical.js">

▍精心选择所使用的技术堆栈



框架和实用程序

尽管使用第三方库可以加快开发速度并简化复杂问题的解决方案，但库的大小可能会很大。 在开发针对弱设备的项目时应谨慎使用它们。 以下是使用外部依赖项的一些准则：

  1. 廉价电话的资源非常有限。 因此，如果可能，请避免使用JS框架或限制其使用。 本技巧的目的是为应用程序逻辑留出尽可能多的空间。 在开发人员试图限制JavaScript使用以减小页面大小并提高其性能的情况下，JS框架可能会使页面过度过载。 如果该项目基于React，请考虑将这个库的使用限制为服务器渲染，或者考虑在构建期间切换到Preact并使用preact -compat来将分发包的大小减少约30 Kb。 为了创建光束，看一下Svelte ， lit-html和纯JavaScript等技术是有意义的。
  2. 尝试确保第三方依赖项占用的空间尽可能少。 这将确保在页面的初始加载期间使用的捆的尺寸适合指定的限制。 要分析第三方库对分发包的大小的贡献，可以使用bundlephobia.com 。 严格分析捆绑的组成，以确定其空间是否得到有效利用。 例如，可以使用date- fns或luxon代替Moment.js库（该库以标准形式包含与国家标准相关的大量数据）。
  3. 使用Redux和用于管理应用程序运行状况的Redux内置存储库时，请格外小心。 Redux存储库数据通常嵌入HTML中，因此可用于使页面可操作。 这很容易导致服务器响应客户端请求发送的数据大小过度增加。

▍调整站点资料，以免在连接缓慢时加载大量资源


我想立即建议您看一下有关基于弱设备的资源适应性的材料。


自适应资源加载取决于网络连接速度

自适应资源加载是一种基于通过网络信息API可供浏览器使用的有效连接类型 （ECT）的信息，“适应”发送给用户的资料的技术 。 使用此API的方式如下所示：

 console.log(navigator.connection.effectiveType); // 3G

自适应加载使站点可以确保使用慢速连接的用户与可以访问较快网络的用户获得与资源交互几乎相同的体验。 也许在网站的“慢速”版本上，一切都不会像“快速”的网页上一样漂亮，但这是可以接受的，因为它具有良好的性能。

请注意，即使在“快速” 4G连接上，用户也可能会遇到较低的数据传输速度。 也许您在餐厅或某个会议中使用WiFi Internet遇到了类似的问题。

考虑使用自适应材料加载的特定示例。 这将与代表站点上特定产品的组件有关。 使用慢速连接的用户将看到产品映像的压缩版本。 高速访问Internet的任何人都将看到高质量的图像，此外，他们将能够使用需要大量JavaScript代码来实现的其他功能。 例如，这是增加产品图像或在“轮播”中查看产品各种照片的能力。

就廉价电话而言，缓慢的网络并不一定是向其发送大量资源的主要障碍。 即使设备连接到相当快的4G网络，用户对网站的印象也很可能受到处理器速度慢和内存容量低的影响。 尽管网络开发人员尚无法访问有关处理器的详细信息，但是客户端提示可以提供有关设备内存，屏幕的宽度和像素密度，网络以及其他一些内容的大概信息。 此信息可用于开发更准确的策略，以将优化的数据传递给客户端。

▍考虑用户的收费计划，并考虑Save-Data标头的内容


适用于Android的Chrome浏览器有一个特殊的选项 ，其中包括保存数据。 它允许对节省流量感兴趣的用户在浏览器自动优化资源，从而加快页面加载速度的模式下工作。 优化包括比平常更多的图像压缩，延迟不重要的资源的加载，在服务器上生成用于预览页面的图像。 您可以在这里找到有关此内容的详细信息。

当用户在支持该模式的浏览器中启用数据保存模式时，浏览器会将Save-Data标头附加到HTTP和HTTPS请求。 Web项目的开发人员可以使用JavaScript检查请求是否具有这样的标题，如果有，可以为用户提供网站材料的优化版本。 结果，事实证明用户有意放弃了“艰难”的机会，而开发人员只是满足了他的愿望。 要检查请求中的Save-Data标头，可以使用以下代码：

 if ("connection" in navigator) {  if (navigator.connection.saveData === true) {    //  ,    .  } }

这是使用页面精简版的样子。


Google准备的网页的精简版

请注意，尽管简单廉价的手机可以支持Chrome，但这不能保证浏览器中数据保存模式的可用性。 最好将此功能视为某些浏览器的可选可选功能之类的东西。

▍将资源密集型逻辑和应用程序状态管理机制引入Web Worker


这里有一些很好的材料，可以找到有关在弱电话上加快Web应用程序加载速度的提示。

浏览器主线程除了执行JavaScript外，还忙于其他重要事情。 这就是页面布局的形成，即屏幕上像素的显示，确保了用户与页面的交互。 漫长而复杂的JavaScript操作可能会阻塞主线程，这意味着干扰页面。

Web Worker允许您在后台运行JavaScript代码，而不阻塞主线程。 应该使用它们，以便从主线程中消除由“大量” JavaScript操作创建的负载。 其中包括Web应用程序及其状态管理的复杂逻辑。 主线程和辅助线程使用postMessage（）函数和onmessage事件处理程序交换信息。 postMessage()函数允许发送方向接收方发送一个值，该值可以是例如JavaScript对象。 有像Comlink这样的库，可以更轻松地使用Web Worker。

这是在没有使用工作流程的情况下研究Proxx项目工作的材料。 在研究过程中，发现在不使用人工的情况下，执行特定操作的应用程序在Nokia 2手机（1 GB内存，频率为1.3 GHz的四核处理器）上“冻结”了6.6秒。 在相同条件下，但使用工人时，系统的反应时间仅为48 ms。 因此，如果您的代码需要大量的处理器资源，则应考虑将其移植到Web Worker是否会改善这种情况。

images优化图像


图像通常具有与网页有关的大量数据。 同时，不仅需要上传图像。 它们仍然需要解码，准备输出，这会给低功耗设备带来沉重负担。 结果，对于开发用于弱电话的站点，重要的是要努力确保在这些站点上使用的图像具有适当的大小并适当压缩。 以下是一些图像优化建议：

  1. 使用Imagemin等工具压缩图像 。 它们使您可以减小图像尺寸而不会明显降低其质量。
  2. 将 GIF动画替换为加载速度更快的视频文件。 但是，在视频方面，值得考虑的是，在为廉价手机设计的网站上是否需要大量媒体。
  3. 尽可能使用延迟加载图像的机制。 由于此类机制基于JavaScript，因此请尝试确保其软件实施不太“繁重”。 在这里，您可能会发现新的标准加载属性很有用。
  4. 将适当大小的响应图像发送给客户。 这可以通过创建许多版本的图像并为客户提供最适合其屏幕的图像来完成。
  5. 使用适合屏幕的图像。 向在弱电话上工作的用户输出充分压缩的小图像将导致这样的事实，即这些图像的解码速度更快。

▍提供与设备屏幕尺寸匹配的客户端资源


可被归类为“智能功能手机”的许多现代设备均具有水平和垂直分辨率分别为320x240像素的QVGA屏幕。 如果在加载页面时需要找出设备的屏幕尺寸（例如，使用某些优化），则可以使用以下代码片段：

 const isFeaturePhone = Math.min(screen.width, screen.height) <= 240;

Proxx项目中使用了类似的方法 。

▍在真实设备或仿真器中测试站点


如果您正在开发针对简单廉价电话的网站，建议在此类电话上进行测试。 它们很便宜。 例如，一条推文说那些住在美国并想在KaiOS设备上测试其网站的开发人员建议去BestBuy并以15美元的价格购买一部手机。


用于KaiOS上测试站点的廉价电话

如果要模拟类似的手机（例如，在KaiOS上运行的Jio手机之类的东西），则可以使用Chrome开发者工具来实现此目的：

  • 打开Chrome开发者工具。
  • 打开Device工具栏。
  • 在Device工具栏中，打开设备菜单，然后从中选择Edit 。 在出现的窗口中，单击Add custom device按钮。
  • 命名新的KaiOS设备（或任何您想要的名称）。
  • 将屏幕尺寸设置为240x320 。
  • 在User agent string字段中，输入以下内容： Mozilla/5.0 (Mobile; LYF/F90M/LYF-F90M-000-02-23-181217; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5 YouTube/1.66.51.J
  • 单击Add按钮保存设备。
  • 如有必要，请启用处理器的速度降低，但请记住，在仿真器的帮助下，您将无法像使用真实设备那样检查站点。


在Chrome开发者工具中设置新设备

总结


您可以创建绝对方便所有移动用户使用的网站，无论他们身在何处。 但是为此，开发人员需要做出一些努力，因为不同价格类别的移动设备之间存在很大差异。

手机价格越便宜，使用速度较慢的处理器的可能性就越高。 JavaScript网站的性能取决于代码加载的速度及其执行的速度。 对于那些想要创建可在任何设备和任何网络上正常工作的站点的用户，应考虑这一点。

上面我们讨论的所有内容对于智能手机都很重要，但是对于廉价的简单手机以及“功能手机”类的设备（在发展中国家非常受欢迎）而言，这一点甚至更为重要。

亲爱的读者们！ 您是否针对较弱的移动设备优化了Web项目？

Source: https://habr.com/ru/post/zh-CN482470/

More articles:


All Articles