云服务器价格_云数据库_云主机【优惠】最新活动-搜集站云资讯

腾讯云_备案好的域名_高性能

小七 141 0

使用工人使静态站点动态化

以下是Paddy Sherry的客座帖子,他是赌博网组。他们建立性能营销网站和工具,使用Cloudflare服务于全球受众。Paddy是一个对无服务器计算感兴趣的Web性能爱好者。选择在大型站点网络上使用的技术是一个关键的架构决策,必须是正确的。我们建立静态网站,但需要找到一种方法,使其动态,如地理定位,限制访问和a/B测试。这篇文章分享了我们在使用工人解决这些问题时所学到的经验挑战。我们的背景赌博网我们在所有网站上都使用Cloudflare,所以我们对员工的好奇心高于大多数人。我们是静态网站的超级粉丝,因为没有什么比平面HTML更快了。我们一直在寻找这样的技术一段时间,并申请成为测试程序的一部分,所以我们是第一个获得该功能的人之一。我们如此热衷于对工人进行实验的原因是,对于运行静态站点的任何人来说,99%的时间都可以满足产品要求,但总有一天需要一些计算而不是发送静态数据回应。直到最近,最合适的选择是添加一些JavaScript在页面加载后激发,并更改UI或从终结点获取数据。这样做的缺点是,即使脚本是异步加载的,用户也会在页面加载后看到页面移动。闪烁的页面可能会让人恼火,没有什么比试图单击某个链接而打开其他内容更让人恼火的了,因为DOM中途更改了,但这会使你暴露在一个缓慢加载的脚本中,在浏览器下载之前,用户会看到一个白色页面。即使所有脚本的下载速度都很快,也会有网速较慢或远离数据中心的用户对其进行响应请求。输入Cloudflare工人。开发人员可以在这些请求到达服务器之前处理这些请求并进行动态响应。没有后加载计算,工作人员在后台的响应速度非常快,过渡是不引人注意。我们的工作人员的使用案例自从接触到工人以来,我们一直在尝试各种方法,使我们的静态站点更具动态性,而不必改变我们为网络提供动力而构建的所有智能技术网站.Geo-TargetingWe使用多种语言在世界各地运营静态网站,并使用Cloudflare为他们服务。用户可以通过谷歌搜索或点击互联网上其他地方的链接到达那里。通常,他们登陆的网站可能不是一个完美的兴趣匹配,因为他们点击的链接没有指向最理想的位置。例如,加拿大的用户登陆英国网站,看到的价格是英镑而不是加元,或者一个意大利人登陆美国网站,看到的是英语内容而不是意大利语。静态网站的难题在于页面加载速度异常之快,但一旦到达,我们就没有能力根据用户的体验进行定制首选项。使用工人们,我们可以通过读取边缘的请求头来解决这个问题。Cloudflare检测到传入请求的原始IP,并将两个字母的国家代码附加到名为"Cf Ipcountry"的标头中。我们可以编写一个简单的工作程序来读取此标头,检查国家/地区代码,然后将其重定向到相应的站点版本(如果有)exists.addEventListener('fetch',event=>{事件响应(获取和应用(事件请求))})异步函数fetchAndApply(请求){const国家=请求.headers.get('Cf-Ipcountry').toLowerCase()let url=新url(请求.url)const target_url='https://'+url.主机名+'/'+国家const target_url_response=等待获取(target_url)if(目标网址_响应.状态===200){返回新响应(''{状态:302,标题:{"位置":目标\u url}})}其他{返回响应}}用户现在得到了一个本地化版本的网站,这更好地满足了他们的兴趣,而且由于内容是为他们量身定做的,所以跳出率也较低位置。限制在大多数网站中,都会有网页需要在线但不向公众开放的情况。例如,一个机构在最终批准前向客户展示一个新的登录页面。在某些情况下,公司可能需要多层次的安全措施来保护他们的知识产权,避免在信息准备就绪之前被人看到,但对大多数人来说,信息只需要隐藏起来,不需要军事级别的安全。对于内容管理系统,这很容易做到,但对于静态站点则很难做到。通过使用Workers,我们能够组合出一个简单的解决方案,该解决方案可以阻止访问页面,除非请求中存在某个标头,该标头也可以用于查找查询参数。addEventListener('fetch',事件=>{事件响应(获取和应用(事件请求))})异步函数fetchAndApply(请求){变量ua=请求.headers.get("用户代理");let url=新url(请求.url);如果(ua.索引('MY-TEST-STRING')){回迁(请求)}其他{return new Response('访问被拒绝',{状态:403,statusText:'禁止'})}}一个页面现在可以对公众隐藏起来,而无需在安全性或身份验证技术上进行重大投资,但对于需要它的用户来说仍然很容易访问。A/B测试优化流量的一个重要工具是从A/B测试中获得的洞察力。虽然强大的A/B测试工具并不缺乏,但大多数都需要添加Javascript,在页面加载后改变UI。在最佳条件下,这可能是肉眼看不到的,但并不是所有的用户都有最好的网速,有些用户在页面加载后会出现闪烁。如前所述,这是一个负面的不良体验后果。我们我们能够通过调用a/B测试脚本URL,获取代码并在向用户发送更改后的响应之前重新绘制UI来解决这个问题。结果是,当页面加载时,用户可以看到变量,并且在第一个像素呈现之后没有任何移动。为什么工人们为我们清除了路障工人们让我们的静态网站动态。当然,我们本可以使用后加载Javascript来实现这一点,但是用户的体验会很差。第二个选择是迁移到服务器呈现的站点,但是即使是这样的架构转换,也很难在世界各地拥有足够的服务器来为所有位置的用户提供相同的体验。这也是一项重大的It投资改变。工人另一方面,它可以插入到我们的体系结构的顶部,而不需要安装或添加它们。只需单击Cloudflare仪表板中的一个按钮,即可立即访问Worker Playway。在谈判试验或建立开发环境方面没有浪费时间,这在研究任何新技术或供应商。为什么我们选择了Workers而不是AWS LambdaIt需要注意的是,Workers并不是无服务器计算的唯一选择,因为这是整个行业的发展方向。虽然AWS Lambda是一个强有力的竞争者,但我们选择了Workers,因为Lambda需要与更多的AWS服务集成才能开始,而且最近的性能测试表明Workers比兰姆达。而我们可能选择了具有不同要求的AWS,工作人员仍然更容易安装和运行快点。改进我们会的尽管我们得到了压倒性的赞同,但还是有几件事我们想看看添加的帐户当前可以访问单个工作线程脚本,除非您有企业计划。这意味着许多不相关的代码都放在一个文件中,虽然这本身并不少见,但是一个Worker只能在一个URL模式上启动。如果您想在一组页面上触发功能,而不是在其他页面上触发功能,这可能会让您感觉受到限制,这意味着您在工作程序代码中有一系列if语句来确定何时应该触发它。这不是不可行,但不是一个理想的方案也可以。我们随着Worker Recipe exchange的发展和Cloudflare的不断发展,我们期待着文档中包含更多真实世界的示例内容。结论我们我们刚开始与Cloudflare员工合作。随着我们团队中知识的增长,我们可以在适当的时候使用它来满足我们的产品需求,并做一些以前没有加载后Javascript就不可能完成的更高级的事情。工人们仍处于初级阶段,还有可以改进的地方。我们将密切关注这些特性,并尝试找到将它们用作新特性的方法释放了。这个指南是一个高层次的概述。要获得更深入的解释和代码片段,请查看这篇对Cloudflare Workers的评论,其中详细解释了一些示例。