带你读《2022技术人的百宝黑皮书》——跨桌面端Web容器演进(4)

简介: 带你读《2022技术人的百宝黑皮书》——跨桌面端Web容器演进(4)

带你读《2022技术人的百宝黑皮书》——跨桌面端Web容器演进(3)https://developer.aliyun.com/article/1340343?groupCode=taobaotech

容器的功能增强和稳定性保障

Render分组优化

 

image.png在Browser进程隔离完成后,我们对Render进程也做了分组优化。在之前的Chromiun的多进程图中,我们知道Chromium会根据页面的不同,创建多个Render进程。Chromium的Render进程分组策略是由站点的Origin决定的,Origin是url的scheme和host的组合,不同的Origin对应Siteinstance不同,进而对应的Render进程就会不同。但这种策略在千牛中却显的不是很合适。因为多个Render进程势必会照成一些不必要的开销和内存的浪费。为此我们设计了一种新的策略,为Render分组,在创建WebView的时候即指定RenderID,       在此Webview上的的页面和子iframe都会在RenderID对应的Render进程中运行。基于这个特性,我们将千牛聊天记录页面放到一个 专属的Render进程中,千牛的二方页面放在一个独立的Render进程,还有三方页面,插件页面,小程序页面等都 进行了分组。这样做既节省内存开销,同时保证了核心页面的稳定性,还大大额方便了问题定位和调试。

Render分组

 

 

网络收口,打造安全容器

 

近年来,黑灰产日益猖獗,对我们的容器安全性带来了一定的挑战。因为H5过于开放的模式,导致我们的数据被泄露。为此我们决定管控我们端侧的容器的所有网络请求,包括WebSocketXMLhttpReqest。而原生的Chromi-    um内核并未开放拦截的卡口,所以CEF也并未支持WebSocket的拦截,仅支持网络资源的请求的拦截。为此我们   打算通过定制内核,提供统一的网络收口,并联合白名单机制,打造一个安全的web跨端容器。并且为了支持二次开放等多样化的拦截需求,我们还支持ifame级别的拦截,使用方可以根据iframe的id来做区分。

image.png

 

 

 

DNS解析拦截,支持AMDC


网络拦截的内部流程

 

 

image.pngDNS在互联网中的一个很重要的服务,dns解析出现异常,任务服务再强大也无法访问。历史上也出现了很多因为DNS异常导致的故障。为了重点保障我们的核心页面,我们希望能够在DNS异常的情况下,仍然能够证确的访问  目标。为此我们拦截的内核的DNS解析流程,通过AMDC的动态配置,保障我们的核心域名稳定。通过引入AMDC HTTPDNS方案 整体千牛mtop网关成功率从99.6%提升到99.8%

DNS解析拦截流程

 

 

HTML Node节点打印功能

 

千牛打单可谓是千牛商家非常常用的功能了,因为发货单或者快递单的特殊性,客户往往不需要打印整个页面。开发者需要打印当前页面的一个html  node节点,比如某个iframe,或者某个div。但原生的chromium支持整页打印的。我们需要为小程序提供node节点打印,为此我们深入定制了内核打印接口。

image.png

 

 

CefClient内的打印流程

 

 

带你读《2022技术人的百宝黑皮书》——跨桌面端Web容器演进(5)https://developer.aliyun.com/article/1340341?groupCode=taobaotech

相关文章
|
1天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
12 3
|
1天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12 4
|
3天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
3天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
3天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
3天前
|
敏捷开发 运维 测试技术
构建高效自动化运维体系:基于容器技术的持续集成与持续部署实践
【4月更文挑战第30天】在数字化转型的浪潮中,企业对软件交付速度和质量的要求日益提高。自动化运维作为提升效率、确保稳定性的关键手段,其重要性不言而喻。本文将探讨如何利用容器技术构建一个高效的自动化运维体系,实现从代码提交到产品上线的持续集成(CI)与持续部署(CD)。通过分析现代容器技术与传统虚拟化的差异,阐述容器化带来的轻量化、快速部署及易于管理的优势,并结合实例讲解如何在实际环境中搭建起一套完善的CI/CD流程。
|
3天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
3天前
|
Linux 开发者 Docker
Docker容器化技术详解
【4月更文挑战第30天】Docker,一个开源的容器化平台,助力开发者通过轻量级容器打包应用及依赖,实现跨平台快速部署。核心概念包括:容器(可执行的软件包)、镜像(只读模板)、Dockerfile(构建镜像的指令文件)和仓库(存储镜像的地方)。Docker利用Linux内核功能隔离容器,采用联合文件系统构建镜像。广泛应用包括开发测试一致性、微服务部署、CI/CD以及本地到远程部署。通过安装Docker,编写Dockerfile,构建&运行容器,可实现高效灵活的应用管理。随着容器技术进步,Docker在云计算和DevOps中的角色日益重要。
|
3天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。
|
3天前
|
运维 Kubernetes 持续交付
构建高效自动化运维系统:基于容器技术的持续集成与持续部署实践
【4月更文挑战第30天】 在快速发展的云计算时代,传统的运维模式已无法满足敏捷开发和快速迭代的需求。本文将介绍如何利用容器技术搭建一套高效自动化运维系统,实现软件的持续集成(CI)与持续部署(CD)。文章首先探讨了现代运维面临的挑战,接着详细阐述了容器技术的核心组件和工作原理,最后通过实际案例展示了如何整合这些组件来构建一个可靠、可扩展的自动化运维平台。