深圳网站建设

深圳搭建外贸网站选择并设置您的构建工具。

不要过多地关注 这些天所谓的酷事。坚持使用环境进行构建，无论是Grunt，Gulp，网站制作pack，Parcel还是工具组合。只要获得所需的结果，并且在构建过程中没有任何问题，就可以很好地完成工作。

在构建工具中，Rollup越来越受欢迎，但是网站制作pack似乎是更成熟的工具，实际上有数百个可用的插件来优化构建的大小。网站制作pack入门可能很困难。因此，如果您想开始使用，这里有一些不错的资源：

网站制作pack文档-显然-是一个很好的起点，网站制作pack文档-Raja Rao撰写的The Confused Bits和Andrew Welch撰写的An Anatedated 网站制作pack Config也是如此。

肖恩·拉金（Sean Larkin）提供了有关网站制作pack的免费课程：The Core Concepts和Jeffrey Way为每个人发布了一个精彩的网站制作pack免费课程。两者都是介绍网站制作pack的精彩介绍。

网站制作pack基础知识是由FrontendMasters发布的与Sean Larkin一起非常全面的4小时课程。

如果您稍微先进一点，那么Rowan Oulton已发布了《使用网站制作pack改善构建性能的现场指南》，BenediktRötsch对将网站制作pack捆绑用于饮食进行了大量研究。

网站制作pack示例具有数百个即用型网站制作pack配置，并按主题和用途进行了分类。奖励：还有一个网站制作pack配置配置器，可以生成基本配置文件。

awesome-网站制作pack是有用的网站制作pack资源，库和工具的精选列表，包括Angular，React和与框架无关的项目的文章，视频，课程，书籍和示例。

默认使用渐进增强。

尽管如此，在所有这些年来，将渐进式增强作为前端体系结构和部署的指导原则仍然是一个不错的选择。首先设计和构建核心体验，然后使用功能强大的浏览器的高级功能增强体验，从而创建弹性体验。如果您的网站在次优网络上浏览器不佳的慢屏幕上运行速度较慢的计算机上快速运行，则它只能在体面网络上具有良好浏览器的快速计算机上快速运行。

实际上，通过自适应模块服务，我们似乎正在将渐进式增强提升到另一个层次，为低端设备提供“精简”的核心体验，并为高端设备提供更复杂的功能。渐进增强似乎不可能很快消失。

选择良好的性能基准。

太多未知因素影响着负载-网络，热限制，逐出缓存，第三方脚本，解析器阻止模式，磁盘I / O，IPC延迟，已安装的扩展程序，防病毒软件和防火墙，后台CPU任务，硬件和内存限制， L2 / L3缓存与RTTS的不同之处-JavaScript具有更高的体验成本，其次是默认使用网站制作字体阻止渲染，并且图像经常占用太多内存。随着性能瓶颈从服务器转移到客户端（作为开发人员），我们必须更详细地考虑所有这些未知因素。

有了170KB的预算，其中已经包含关键路径HTML / CSS / JavaScript，路由器，状态管理，实用程序，框架和应用程序逻辑，我们必须彻底检查网络传输成本，解析/编译时和运行时成本我们选择的框架。幸运的是，过去几年来，我们在浏览器解析和编译脚本的速度方面取得了巨大进步。然而，JavaScript的执行仍然是主要瓶颈，因此，密切注意脚本的执行时间和网络可能会产生影响。

正如指出的勒布Markbåge，一个很好的方法来衡量的启动费用为框架是首先呈现一个视图，然后将其删除，然后重新渲染，因为它可以告诉你如何框架尺度。第一个渲染趋向于加热一堆延迟编译的代码，当缩放时，较大的树可以从中受益。第二个渲染基本上是模拟页面上的代码重用如何随着页面复杂度的增加而影响性能特征。

评估框架和依赖性。

现在，不是每个项目都需要一个框架，也不是单页应用程序的每个页面都需要加载框架。在Netflix的情况下，“从客户端删除React，几个库和相应的应用程序代码将JavaScript的总量减少了200KB以上，从而使Netflix退出首页的互动时间减少了50％以上。” 然后，该团队利用用户在目标页面上花费的时间来预取React以便用户可能会访问的后续页面（有关详细信息，请继续阅读）。

听起来似乎很明显，但值得一提：完全删除现有框架后，某些项目也可以从中受益。一旦选择了框架，您将至少使用几年，因此，如果需要使用框架，请确保您的选择已获知并且考虑透彻。

Inian Parameshwaran评估了前50个框架的性能足迹（针对First Contentful Paint-从导航到浏览器从DOM呈现内容的第一位的时间）。Inian发现，在野外，Vue和Preact在桌面和移动设备上都是更快的，其次是台式机和移动设备，其次是React（幻灯片）。您可以检查候选框架和建议的体系结构，并研究其中大多数解决方案的平均性能，例如，使用服务器端渲染或客户端渲染。

基准绩效成本很重要。根据Ankur Sethi的一项研究，“无论您进行了多大的优化，您在印度的普通手机上，您的React应用程序加载的速度永远不会超过1.1秒。您的Angular应用程序至少要花费2.7秒才能启动。 Vue应用程序的用户需要至少等待1秒钟才能开始使用它。” 无论如何，您可能都不会将印度定位为主要市场，但是在网络条件欠佳的情况下访问您的网站的用户会获得可比的体验。作为交换，您的团队当然会获得可维护性和开发人员效率。但是，这一考虑必须经过深思熟虑。

您可以通过探索功能，可访问性，稳定性，性能，软件包生态系统，社区，学习曲线，文档，工具，跟踪记录，团队，在Sacha Greif的12分制评分系统上评估框架（或任何JavaScript库）。，兼容性，安全性。但是，在艰难的时间表上，更好在选择选项之前至少考虑大小的总成本+初始解析时间。Preact，Inferno，Vue，Svelte或Polymer等轻量级选项可以很好地完成工作。基线的大小将定义应用程序代码的约束。

有许多工具可帮助您就依赖项和可行替代方案的影响做出明智的决定：

网站制作pack-bundle-analyzer

源地图浏览器

捆绑好友

恐惧症

网站制作pack大小插件

可视代码的导入成本

一个好的起点是为您的应用程序选择一个好的默认堆栈。Gatsby（React），Vuepress（Vue）Preact CLI和PWA Starter Kit提供了合理的默认值，可在一般移动硬件上快速开箱即用。另外，请查看React和Angular的网站制作.dev特定于框架的性能指南，该指南应该在今年晚些时候进行扩展（谢谢Phillip！）。

畅销手机的CPU和计算性能

畅销手机的CPU和计算性能（图片来源：Addy Osmani）（大预览）

考虑使用PRPL模式和应用程序外壳体系结构。

不同的框架会对性能产生不同的影响，并且需要不同的优化策略，因此您必须清楚地了解要依赖的框架的所有细节。在构建网站制作应用程序时，请查看PRPL模式和应用程序外壳体系结构。这个想法非常简单：将交互所需的更少代码推送到初始路由即可快速呈现，然后使用Service Worker来缓存和预缓存资源，然后以异步方式延迟加载所需的路由。

应用程序外壳体系结构中的PRPL模式

PRPL代表推送关键资源，渲染初始路由，预缓存剩余路由和按需延迟加载剩余路由。

应用程序外壳架构

一个应用程序外壳是更小的HTML，CSS和JavaScript供电的用户界面。

您是否优化了API的性能？

API是应用程序通过所谓的终结点向内部和第三方应用程序公开数据的通信通道。在设计和构建API时，我们需要一个合理的协议来实现服务器与第三方请求之间的通信。代表性状态转移（REST）是一种公认的逻辑选择：它定义了一组约束，开发人员可以遵循这些约束以使内容以高性能，可靠和可伸缩的方式进行访问。符合REST约束的网站制作服务称为RESTful 网站制作服务。

与良好的HTTP请求一样，从API检索数据时，服务器响应中的任何延迟都将传播到更终用户，从而延迟了呈现。当资源想要从API检索某些数据时，它将需要从相应的端点请求数据。从多个资源呈现数据的组件（例如带有注释的文章和每个注释中的作者照片）可能需要经过多次往返服务器才能获取所有数据，然后才能呈现数据。此外，通过REST返回的数据量通常超过呈现该组件所需的数据量。

如果许多资源需要来自API的数据，则该API可能会成为性能瓶颈。GraphQL为这些问题提供了高性能的解决方案。就其本身而言，GraphQL是一种用于API的查询语言，并且是一种服务器端运行时，用于通过使用为数据定义的类型系统来执行查询。与REST不同，GraphQL可以在单个请求中检索所有数据，并且响应将完全是所需的，而不会像REST通常那样过度或不足地获取数据。

另外，由于GraphQL使用的是架构（表示数据结构的元数据），它已经可以将数据组织到首选结构中，因此，例如，使用GraphQL，我们可以删除用于处理状态管理，生成代码的JavaScript代码。在客户端上运行速度更快的更干净的应用程序代码。

如果您想开始使用GraphQL，Eric Baer在您的《 Smashing Magazine》上发表了两篇精彩的文章：GraphQL入门：为什么我们需要一种新型API和GraphQL入门：API设计的发展（感谢您的提示，Leonardo ！）。

黑客正午

REST和GraphQL之间的区别通过左侧的Redux + REST之间的对话（右侧是Apollo + GraphQL）进行了说明。（图片来源：黑客中午）（大预览）

您将使用AMP还是Instant Articles？

根据组织的优先级和战略，您可能需要考虑使用Google的AMP或Facebook的Instant Articles或Apple的Apple News。没有它们，您可以实现良好的性能，但是AMP确实提供了具有免费内容交付网络（CDN）的可靠性能框架，而Instant Articles可以提高您在Facebook上的知名度和性能。

这些技术为用户带来的看似明显的好处是可以保证性能，因此有时他们甚至更喜欢AMP- / Apple News / Instant Pages-链接而不是“常规”页面或可能是肿的页面。对于处理大量第三方内容的内容繁重的网站，这些选项可能会极大地帮助加快渲染时间。

除非他们不这样做。例如，根据蒂姆·卡德莱克（Tim Kadlec）的说法，“ AMP文档往往比其同行要快，但它们不一定表示页面性能良好。从性能的角度来看，AMP并不是更大的区别。”

对于网站所有者来说，好处是显而易见的：这些格式在各自的平台上具有可发现性，并且在搜索引擎中具有更高的可见性。您也可以通过将AMP用作PWA的数据源来构建渐进式网站制作 AMP。缺点？显然，在围墙花园中的存在使开发人员能够制作和维护其内容的单独版本，并且在没有实际URL 的Instant Articles和Apple News情况下（感谢Addy，Jeremy！）。

明智地选择CDN。

根据您拥有的动态数据量，您可以将部分内容“外包”给静态站点生成器，将其推送到CDN并从中提供静态版本，从而避免数据库请求。您甚至可以选择基于CDN的静态托管平台，以交互式组件作为增强功能（JAMStack）来丰富您的页面。实际上，其中一些生成器（例如React顶部的Gatsby）实际上是网站编译器，提供了许多开箱即用的自动优化功能。随着编译器随着时间的推移添加优化，随着时间的推移，编译后的输出变得越来越小和越来越快。

请注意，CDN也可以提供（和卸载）动态内容。因此，不必将CDN限制为静态资产。仔细检查您的CDN是否执行压缩和转换（例如，在格式方面进行图像优化，在边缘进行压缩和调整大小），对服务器工作人员的支持，边缘方面包括在CDN边缘处组合页面的静态和动态部分的功能（即距离用户更近的服务器）和其他任务。另外，检查您的CDN是否也支持HTTP over QUIC（HTTP / 3）。

注意：根据Patrick Meenan和Andy Davies的研究，HTTP / 2优先级在许多CDN上实际上是无效的，因此在选择CDN时要小心。帕特里克（Patrick）在更近关于HTTP / 2优先级的演讲中有更多详细信息（谢谢，巴里！）。

当一切都相似时，不同就吸引了。认识网络艺术指导，这是我们关于设计和构建引人入胜的出色体验的新书。受到复古印刷杂志的启发，并带有适合您工作的代码段。

跳转到目录↬

功能面板

资产优化

使用Brotli进行纯文本压缩。

2015年，Google推出了 Brotli，这是一种新的开源无损数据格式，现在所有现代浏览器都支持该格式。在实践中，Brotli似乎是很多 更有效的比gzip和deflate。取决于设置，压缩可能（非常）缓慢，但是压缩速度较慢更终会导致较高的压缩率。尽管如此，它仍能快速解压缩。您还可以估计站点的Brotli压缩节省量。

仅当用户通过HTTPS访问网站时，浏览器才会接受它。Brotli得到了广泛的支持，许多CDN都支持Brotli（Akamai，AWS，KeyCDN，Fastly（当前仅作为传递），Cloudflare，CDN77），并且即使在尚不支持它的CDN上也可以启用Brotli（使用服务人员）。

问题在于，使用Brotli压缩所有资产非常昂贵，因此仅由于其产生的成本开销，许多服务器就无法使用它。实际上，在更高压缩级别下，Brotli太慢了，以至于文件大小的任何潜在增加都可能被服务器等待动态压缩资产时开始发送响应所花费的时间抵消。但是，使用静态压缩时，更好使用更高的压缩设置。

如果您可以绕过动态压缩静态资产的成本，那是值得的。Brotli可用于任何纯文本有效负载-HTML，CSS，SVG，JavaScript等。

策略？在更高级别使用Brotli + Gzip预压缩静态资产，并在3-5级使用Brotli快速压缩（动态）HTML。确保服务器正确处理Brotli或gzip的内容协商。

该图显示了压缩算法的采用

在台式机和移动设备上，只有15％的请求被Brotli压缩。gzip压缩了大约65％。其余的都不压缩。（图像来源：网站制作年鉴：压缩）（大预览）

使用响应式图像和网站制作P。

尽可能在，和元素上使用自适应图像。当你在这，你也可以利用的的网站制作P格式通过与服务的网站制作P图像（除了Safari和iOS的Safari浏览器的所有现代浏览器都支持）元件和JPEG回退（见安德烈亚斯Bovens'的代码片段），或通过使用内容协商（使用标头）。Ire Aderinokun也有非常详细的教程，将图像转换为网站制作P。srcsetsizes<picture><picture>Accept

Sketch本机支持网站制作P，并且可以使用Photoshop的网站制作P插件从Photoshop导出网站制作P图像。其他选项也可用。如果您使用的是WordPress或Joomla，则有一些扩展可帮助您轻松实现对网站制作P的支持，例如WordPress的Optimus和Cache Enabler以及Joomla自己支持的扩展（通过Cody Arsenault）。

值得注意的是，虽然网站制作P图像文件的大小与等效的Guetzli和Zopfli相比，但该格式不支持JPEG等渐进式渲染。，这就是为什么尽管网站制作P图像通过网络获得的速度更快，但使用高质量JPEG的用户可以更快地看到实际图像的原因。使用JPEG，我们可以为一半甚至四分之一的数据提供“体面”的用户体验，并在以后加载其余部分，而不是像网站制作P那样具有半空的图像。您的决定将取决于您要执行的操作：使用网站制作P，可以减少有效负载，而使用JPEG，则可以提高感知的性能。

在Smashing Magazine上，我们使用后缀-opt表示图片名称-例如，brotli-compression-opt.png; 每当图像包含该后缀时，团队中的每个人都知道该图像已经过优化。和- 无耻的插头！杰里米·瓦格纳（Jeremy Wagner）甚至在网站制作P上出版了《粉碎》一书。

响应式图像断点生成器

的响应图像断点发生器自动图像和标记的产生。

图像是否正确优化？

当您在着陆页上快速加载特定图像至关重要时，请确保JPEG是渐进式的，并使用mozJPEG压缩（这通过控制扫描级别来缩短开始渲染时间），或者看看Guetzli， Google的新型开源编码器专注于感知性能，并利用了Zopfli和网站制作P的经验。唯一的缺点是：处理时间慢（每百万像素一分钟的CPU）。对于PNG，我们可以使用Pingo；对于SVG，我们可以使用SVGO或SVGOMG。如果您需要快速预览和复制或从网站下载所有SVG资产，请使用svg-grabber 也可以为您做到这一点。

每一个图像优化文章都会说明这一点，但是保持向量资产整洁紧密总是值得提醒的。确保清理未使用的资产，删除不必要的元数据，并减少图稿中路径点的数量（从而减少SVG代码）。（谢谢杰里米！）

但是，还有更多高级选项。你可以：

使用Squoosh以更佳压缩级别（有损或无损）压缩，调整大小和处理图像，

使用响应式图像断点生成器或Cloudinary或Imgix等服务来自动执行图像优化。而且，在许多情况下，单独使用srcset和sizes使用都会获得重大收益。

要检查您的响应式标记的效率，可以使用Imaging-heap，这是一种命令行工具，可以测量视口大小和设备像素比率之间的效率。

通过混合延迟加载，利用本地延迟加载和lazyload来延迟加载图像和iframe ，该库可检测通过用户交互触发的可见性变化（我们将在后面介绍的IntersectionObserver中）。

对于屏幕外图像，我们可以先显示一个占位符，然后当图像在视口中时，使用IntersectionObserver触发网络调用，以将图像下载到后台。然后，我们可以推迟渲染，直到使用img.decode（）解码为止如果图像解码API不可用，请下载图像。渲染图像时，例如，我们可以使用淡入动画。凯蒂·汉佩纽斯（Katie Hempenius）和艾迪·奥斯曼尼（Addy Osmani）在他们的“规模化速度：网络性能技巧和战cks”中分享了更多见解。。

您可以将自动图像压缩添加到“拉取请求”中，因此任何图像都不会影响未压缩的生产。该操作使用可与PNG和JPG一起使用的mozjpeg和libvips。

注意默认情况下已加载但可能永远不会显示的图像，例如在旋转木马，手风琴和图像库中。

考虑通过根据媒体查询指定不同的图像显示尺寸来考虑使用“尺寸”属性交换图像，例如，sizes以交换放大镜组件中的源。

查看图像下载不一致之处，以防止意外下载前景和背景图像。

有时仅靠优化图像并不能解决问题。为了缩短开始渲染关键图像所需的时间，请延迟加载不太重要的图像，并延迟已渲染关键图像后再加载任何脚本。

为了在内部优化存储，您可以使用Dropbox的新Lepton格式对JPEG进行平均22％的无损压缩。

请注意aspect-ratioCSS中的intrinsicsize属性和属性，这将使我们能够设置图像的长宽比和尺寸，因此浏览器可以提前保留预定义的布局槽，以避免在页面加载期间出现布局跳跃。

如果您喜欢冒险，可以使用Edge worker来斩波和重新排列HTTP / 2流，基本上是CDN上的实时过滤器，可以通过网络更快地发送图像。边缘工作者使用的JavaScript流使用可以控制的块（基本上，它们是在CDN边缘上运行的JavaScript，可以修改流响应），因此您可以控制图像的传递。对于服务工作者，为时已晚，因为您无法控制线路上的内容，但它确实适用于Edge工作者。因此，您可以在为特定目标网页逐步保存的静态JPEG上使用它们。

以上【 深圳搭建外贸网站的建站技巧 】的内容由达设互动（http://www.szdashe.com）为您提供，本文网址 ： http://www.szdashe.com/wangzhanjianshezhishi/286.html ，转载请注明出处！更多有关深圳网站建设，微信小程序、电商平台建设、系统开发等互联网应用服务都可以联系我们。热线：130 7784 6582