首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

现代浏览器探秘(part2):导航

如果一切按预期进行,当网络线程接收数据时,渲染器进程已处于备用状态。 如果导航重定向跨站点,则可能不会使用此备用进程,在这种情况下可能需要不同的进程。...图7:渲染器进程通过IPC通知浏览器进程页面已“加载完成” 导航到其他站点 简单的导航完成了! 但是如果用户再次将不同的URL放到地址栏会发生什么?...图8:浏览器进程通过IPC通知渲染器进程它将要导航到另一个站点 如果导航是从渲染器进程启动的(例如用户单击链接或客户端JavaScript执行window.location =“https://newsite.com...图9:从浏览器进程到新渲染器进程的2个IPC,通知新渲染器渲染页面并通知旧渲染器进程卸载 如果是Service Worker 最近对该导航过程的一个改变是引入了service worker (https...当导航发生时,网络线程根据注册的Service Worker范围检查域,如果为该URL注册了Service Worker,则UI线程找到渲染器进程来执行Service Worker代码。

2K20

Google图解:输入 URL 按下 “Enter”,Chrome 干了什么?

查找渲染器进程 完成所有的检查,并且当网络线程确定浏览器会导航到请求的站点时,网络线程将通知 UI 线程,数据已经准备就绪。然后,UI 线程通知渲染器进程,进行网页的渲染。...这样如果一切顺利,则当网络线程开始接收数据时,渲染器进程已处于待用状态。如果导航重定向的 URL 跨站点了,则可能不会使用此备用进程,在这种情况下就需要其他进程来处理了。 5....导航到其他站点 简单的导航,到这里就算完成了。但是如果用户再次将不同的 URL 放到地址栏会发生什么? 浏览器进程会通过相同的步骤,导航到不同的站点。...当新导航进行到与当前渲染的网站不同的网站时,会调用单独的渲染进程来处理新导航,同时保持当前渲染进程用于处理类似 unload 事件。...当导航发生时,网络线程根据注册的 Service Worker 范围检查域,如果为该 URL 注册过 Service Worker,则 UI 线程找到渲染器进程,并执行 Service Worker 的逻辑代码

1.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Service Worker最佳实践

    Worker脚本中保存需要持久化的信息,可以借助localstorage),当打开新的可管辖页面或者已管辖页面发起message等消息时,Service Worker进/线程会被重新唤起。...如果在fetch监听事件中打上断点,当页面刷新或者页面中有其它请求时便会到达Service Worker线程,使得Service Worker脚本中的fetch事件执行被中断,这时可以将鼠标移动到fetch...图17 cross-resources 5 X5内核Service Worker功能扩展 5.1 首次访问解决方案方案 首次访问解决方案旨在用户访问业务前实现业务的资源缓存,让用户在第一次真正访问业务时能够让业务页面以最快的速度展示出来...因为shouldInterceptRequest从内核通知到app,需要统一在File线程中排队并经历好几个线程的中转到达app,对于资源并发请求较少的页面来说,这种瓶颈可能并不明显,对于页面较复杂并发请求较多的页面来说...X5内核借鉴Service Worker原理,允许app提前将业务的资源放入到内核缓存,当业务被访问时,会先访问本地cache,有就直接返回给内核,没有就跳过shouldInterceptRequest

    2.4K10

    给Buildbot加上SSL,使用Nginx做反向代理

    在本教程中,我们将演示如何将Nginx配置为反向代理,以便将受SSL保护的浏览器请求定向到Buildbot的Web界面。...SSL证书,您可以自签名,也可以使用腾讯云免费的SSL证书进行安装,如果您是用在生产环境,我们建议您使用腾讯云的证书进行配置。 当您完成这些要求后,您就可以开始了。...第一步、申请免费的SSL证书 申请入口 进入SSL证书管理控制台 单击【申请证书】 查看申请域名型证书型号,单击【确定】 填写申请 填写申请域名,例如qcloud.com,cloud.tencent.com...我们还将确保主服务器不会通过绑定到本地接口来接受来自其他主机上的连接。...现在我们已经重新启动了Nginx,buildmaster和worker,我们已经准备好验证反向代理是否正常工作。当我们通过http访问该网站时,应该重定向到https以成功访问Buildbot网站。

    1.3K50

    PWA 入门

    用户首次访问 service worker 控制的网站或页面时,service worker 会立刻被下载; 安装。...以下是三个常用的事件类型: install —— 当该事件的处理程序执行完毕后,可以认为 service worker 安装完成了,在这个阶段主要用于缓存资源。...activate —— 当 service worker 安装完成后,会接收到这个激活事件,这个事件的主要用途是清理先前版本的 service worker 脚本中使用的(缓存)资源。...不应被清除,因此当遍历到的 key 不与 CACHE_NAME 相等时说明是过期的,就删除它。...可能的值有: denied 用户拒绝了通知的显示; default 默认的,因为不知道用户的选择(一般是把用户把通知框关掉了或者首次进入网站时的默认值); granted 用户允许了通知的显示; 当允许后

    1.6K21

    CentOS7上安装和配置GitLab

    letsencrypt[enable] 并将其设置为 true。...你将被重定向到登录页面: 默认的管理帐户用户名是root 用户名:root 密码:【你设置的密码】 输入账号密码,单击Sign in按钮,你将被重定向到 GitLab 欢迎页面。...单击用户头像(右上角)并从下拉菜单中选择Settings: 你可以在此处更改你的姓名、电子邮件和其他个人资料信息和设置 完成后单击该 Update Profile settings 按钮,不久你将收到一封发送至你提供的地址的确认电子邮件...要确认你的帐户,请按照电子邮件中提供的说明进行操作。 3. 更改用户名 要访问个人资料页面,请单击Account左侧垂直导航菜单中的链接。...你还可以启用双因素身份验证,下次登录 GitLab 仪表板时,你需要输入新用户名。 4.

    1.5K30

    现代浏览器内部机制 Part 2 | 导航这件小事

    在上一篇文章中,我们了解了线程和进程在浏览器中的不同,而在这篇文章中,我们会更加深入的了解当浏览器为用户呈现一个页面时,这些进程和线程之间是如何通信的。...当你将一个网站的 url 输入到浏览器的地址栏时,此刻正是浏览器进程中的 UI 线程在起作用。...在 Step 2 中,当 UI 线程将需要请求的 url 告诉网络线程时,其实它本身已经知道要导航到哪个网站了,于是 UI 线程在把 url 传递给网络线程的同时,会尝试启动一个渲染进程。...导航到另一个网站 一次简单的导航截至目前已经完成了。假如这时用户输入了一个不同的 url 会发生什么呢?其实也没啥,浏览器进程会按照上面的步骤导航到这个网站。...当导航发生时,网络线程会依据域名在已注册的 Service Worker 作用域集合中查询,如果找到某个对应的 Service Worker,UI 线程会发起一个渲染进程去执行 Service Worker

    1.2K30

    常见分布式应用系统设计图解(十五):支付系统

    如果我们考虑用户在一家电商买东西,在结账的时候,借助电商支持的支付系统(Payment Service Provider)来完成支付行为。 支付系统需要结合商家(包含卖家和买家)一起来看。...图中用两条虚线分隔出了 3 列,最左边是用户,中间是电商系统(比如 Amazon),右边是 Payment Service Provider(PSP,比如 PayPal)。...再根据这个 token 生成一个跳转到 PSP 网页的 URL,于是这个 URL 重定向用户的请求到了 PSP 的支付页面。...Payment Worker 会异步地和信用卡公司通信并完成支付行为,更新账本 Ledger 系统,并放入一个通知事件到 Notification Queue 中。...这个 queue 会有不同的消费者,其中一个是 Webhook Worker,将成功的消息告知 store(或者是通知支付页处理完成的消息,用户就被重定向到 store 的订单支付完成页面)。

    70310

    如何在Ubuntu 16.04使用Buildbot建立持续集成系统

    我们可以通过将做到这一点buildbot用户的docker组: $ sudo usermod -aG docker buildbot 下次重新启动Buildbot主服务器时,这个新组将可用于Buildbot...为了定义我们的worker,我们创建一个worker.DockerLatentWorker实例并将其追加到worker列表中。...最后,我们定义当更改符合我们的条件时应该使用的构建器的名称(我们将暂时定义此为构建器)。 为Node.js项目配置构建工厂 接下来,我们将配置一个用于处理Node.js项目的构建工厂。...在Web浏览器中,导航到示例项目存储库的fork: https://github.com/your_github_user/hello_hapi 单击“设置”选项卡以查看项目设置。...目前,我们为不再使用的工作人员定义了buildbot-worker服务(我们的Docker工作程序在需要时自动启动)。 我们应该停止并禁用old worker。

    1.8K30

    WorkBox 之底层逻辑Service Worker

    客户端 当说一个service worker正在控制一个页面时,实际上「是在控制一个客户端」。客户端是指URL位于该service worker作用域内的「任何打开的页面」。...更新发生的时机 浏览器会在以下情况下检查service worker的更新: 用户导航到service worker作用域内的页面。...()并「传入与已安装的 service worker 相同的 URL」,但具有「不同的作用域」。...当导航到service worker作用域内的新页面时,浏览器会自动执行更新检查。 手动触发更新检查 关于更新,注册逻辑通常不应更改。然而,一个例外情况可能是「网站上的会话持续时间很长」。...仅缓存(Cache only) 展示了从页面到service worker到缓存的流程。 「仅缓存」运作方式:当service worker控制页面时,「匹配的请求只会进入缓存」。

    44120

    窥探现代浏览器架构(二)

    例如在第二步中当UI线程发送URL链接给网络线程后,它其实已经知晓它们要被导航到哪个站点了,所以在网络线程干活的时候,UI线程会主动地为这个网络请求启动一个渲染线程。...不过如果发生诸如网站被重定向到不同站点的情况,刚刚那个渲染进程就不能被使用了,它会被摒弃,一个新的渲染进程会被启动。...渲染进程通过IPC告诉浏览器进程页面已经加载完成了 导航到不同的站点 一个最简单的导航情景已经描述完了!可是如果这时用户在导航栏上输入一个不一样的URL会发生什么呢?...那么问题来了,当导航开始的时候,浏览器进程是如何判断要导航的站点存不存在对应的service worker并启动一个渲染进程去执行它的呢?...service worker启动的时间其实增加了页面导航的时延。

    67010

    h5的Notification 、web Push介绍

    当它被触发时,它将显示在通知窗口的顶部。...请参阅Sitepoint ISO 2字母语言代码页面,以获得简单的参考。 badge: 一个 USVString 包含用于表示通知的图像的URL, 当没有足够的空间来显示通知本身时。...sound:一个 USVString 包含通知触发时要播放的音频文件的URL。 noscreen: 一个 Boolean 指定通知触发是否应启用设备的屏幕。...Service Worker由于它可以在浏览器页面未打开,浏览器未打开时执行,因此一般选择它完成web push的最后一步,即响应push事件完成展示通知等业务逻辑。...除了控制它的视图层以外,也可以控制它的逻辑层, 例如点击消息通知后进行某些操作等等,在先前调用showNotification时可以传入一些参数, 例如,根据不同的action执行不同的操作: self.addEventListener

    4.8K20

    一篇文章带你揭 秘现代浏览器原理与方法_浏览器发送请求原理

    这样做的主要原因是让Chrome在不同性能的硬件上有不同的表现。当Chrome运行在一些性能比较 好的硬件时,浏览器进程相关的服务会被放在不同的进程运行以提高系统的稳定性。...这里chrome有个小优化 因为网络请求的耗时可能会很⻓, 所以第二步中当UI线程发送URL链接给网络进程后,它其实已经知 晓它们要被导航到哪个站点了。...不过如果发生诸如网站被重定向到不同站点的情况,刚刚那个渲染进程就不能被使用了,它会被摒弃,一个新的渲染进程会被启动。...如果有命中该URL的service worker,UI线程就会为这个service worker启 动一个渲染进程(renderer process)来执行它的代码。...service worker启动的时间其实增加了⻚面导航的时延。

    44720

    W3C TPAC 大会上的 Service workers 内容总结

    将状态附加到客户端 当我们讨论页面生命周期的内容时,Facebook 的同事提到了他们如何用 postMessage 向客户询问其状态,例如“用户当前是否在键入消息?”。...立即注销 worker 如前所述,如果你注销 service workers 注册,则会从注册列表中将其删除,但是它将慧继续控制现有页面。这意味着它不会中断正在进行的提取等操作。...当用户处于“在线”状态时,后台同步会为你提供 service worker 事件,该事件可能会立即消失,也可能会在用户离开站点后的某个时间出现。...由于用户已经作为顶级页面访问了该网站(例如原始位置在URL栏中,而不是 iframe),因此 Chrome 很高兴在以后允许一个小的,保守的执行窗口。...例如,当用户单击指向你网站的链接,但是没有明确建议网站应如何打开(例如“在新窗口中打开”)时,如果开发人员可以决定是将焦点集中在网站使用的现有窗口上还是打开新窗口,那将是很好的选择。

    84810

    如何在Ubuntu 16.04上使用Alerta监视Zabbix警报

    在本教程中,您将设置Alerta并将其配置为显示来自Zabbix监控系统的通知。...现在启用它: sudo systemctl enable alerta-app 最后,我们必须配置Nginx将所有your_alerta_server_ip/api的请求重定向到正在运行的uWSGI服务器...单击“ 添加”按钮以创建新的媒体类型。 然后为您的用户帐户添加新媒体。在主菜单中选择“ 管理 ”,然后选择“ 用户”。单击您的用户名,然后选择“ 媒体”选项卡。...当问题消失时,将发送此消息。 接下来,通过单击“ 操作”字段中的“ 新建”来创建新操作。对于“ 操作类型”,从下拉框中选择“ 发送恢复消息 ”。 单击“ 添加”按钮完成配置。...您的可用空间可能不同。

    4.2K40
    领券