');-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 0;-webkit-mask-size:.5em 1em;-webkit-clip-path:inset(0 0 calc(1em - .5em) 0)padding-box;clip-path:inset(0 0 calc(1em - .5em) 0)padding-box;background-color:currentColor!important;margin-left:.125rem;padding:0 .25em;opacity:.84}code,pre{font-family:fira code,monospace;color:#212121}pre{overflow:auto;margin:0}code{font-size:85%;background-color:#f8f8f8;border-radius:6px;padding:.2em .4em;margin:0}.highlight{position:relative}.highlight pre{background-color:#f8f8f8!important;border-radius:8px}.highlight code{display:table;width:100%;padding:16px;font-size:13px;line-height:1.6;text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}.btn{display:inline-block;background-color:#055deb;color:#fff;font-size:16px;line-height:1.5;font-weight:700;text-align:center;text-decoration:none;padding:14px 24px;border-radius:28px;vertical-align:middle;border:2px solid transparent;will-change:background-color,color}.btn.btn-small{padding:10px 24px}@media screen and (max-width:640px){.btn{padding:14px 16px}}.btn.product-bg{background-color:var(--product-color)}.btn-bordered{background-color:transparent;border-color:#055deb;color:#055deb}.btn-white-bordered{background-color:transparent;border-color:#fff;color:#fff}.icon-button{position:relative;width:48px;height:48px;border-radius:50%}.icon-button .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#055deb}.arrow-link{display:inline-flex;align-items:center;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2;margin:0;padding:0}.arrow-link span{color:inherit;border-bottom:1px solid transparent}.arrow-link svg{width:20px;height:20px}.arrow-link.prev span{margin-left:4px;padding-top:2px;order:2}#cookie-notice{display:none;position:fixed;background-color:rgba(35,37,38,.97);left:0;right:0;bottom:-200px;box-shadow:0 -1px 14px rgba(0,0,0,6%),0 -1px 2px rgba(0,0,0,4%),0 -5px 15px rgba(0,0,0,4%);transform:translateZ(0);animation:slideUpCookieNotice .6s 1s ease-in forwards;z-index:100}#cookie-notice .cookie-content{position:relative;display:flex;align-items:center;justify-content:center;padding-top:12px;padding-bottom:12px}#cookie-notice .cookie-text{color:rgba(255,255,255,.7);font-size:14px}#cookie-notice .cookie-text a{text-decoration:none;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.54)}@media screen and (max-width:576px){#cookie-notice .cookie-text{padding-right:146px}}#cookie-notice .agree-btn{margin:0 0 0 24px;padding:12px 24px}@media screen and (max-width:576px){#cookie-notice .agree-btn{position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0;bottom:0;padding:12px 16px;border-radius:0}}@keyframes slideUpCookieNotice{100%{bottom:0}}input,textarea{font-family:pragmatica,Helvetica,Arial,sans-serif;font-size:16px;padding:12px 16px;border-radius:3px;border:1px solid #c6c6c6;margin-bottom:28px}input::-moz-placeholder,textarea::-moz-placeholder{color:#8f95a3}input::-moz-placeholder,textarea::-moz-placeholder{color:#8f95a3}input~.error-message{visibility:hidden;color:#ff4a4a;font-size:13px;line-height:16px;margin-top:-24px;margin-bottom:8px}@media screen and (max-width:640px){input~.error-message{display:none}}input:not(:focus):not(:placeholder-shown):valid{border-color:#c6c6c6}textarea{overflow:auto;overflow-wrap:break-word;resize:none}select{display:none}.with-tooltip{--tooltip-bg-color:rgba(35, 37, 38, .87);--tooltip-font-size:14px;--tooltip-font-weight:700;--tooltip-text-color:white;--tooltip-strong-text-color:white;--tooltip-border-radius:3px;--tooltip-padding:12px;--tooltip-border-width:1px;--tooltip-border-color:transparent;--tooltip-box-shadow:none;position:relative}.with-tooltip.idea-style{--tooltip-bg-color:#f7f7f7;--tooltip-font-size:12px;--tooltip-font-weight:400;--tooltip-text-color:#666;--tooltip-strong-text-color:#212121;--tooltip-padding:8px 12px 10px;--tooltip-border-color:#bdbdbd;--tooltip-box-shadow:0 2px 6px 0 rgba(0, 0, 0, .19)}.with-tooltip.idea-style .tooltip-text strong{font-weight:400}.with-tooltip .tooltip-text{font-family:pragmatica,Helvetica,Arial,sans-serif;position:absolute;visibility:hidden;overflow:visible;opacity:0;bottom:109%;left:0;padding:var(--tooltip-padding);background-color:var(--tooltip-bg-color);font-size:var(--tooltip-font-size);font-weight:var(--tooltip-font-weight);color:var(--tooltip-text-color);border-radius:var(--tooltip-border-radius);border:var(--tooltip-border-width)solid var(--tooltip-border-color);box-shadow:var(--tooltip-box-shadow);width:auto;min-width:240px;z-index:1000}.with-tooltip .tooltip-text strong{color:var(--tooltip-strong-text-color)}.with-tooltip.arrow-tooltip .tooltip-text{left:50%;transform:translateX(-50%);bottom:116%}.with-tooltip.arrow-tooltip .tooltip-text:before{content:'';position:absolute;width:0;height:0;bottom:-8px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tooltip-bg-color)}.with-tooltip.arrow-tooltip .tooltip-text:after{content:'';position:absolute;width:0;height:0;bottom:-9px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tooltip-border-color);z-index:-1}form{display:flex;flex-direction:column;text-align:left}form label{display:block;font-size:14px;color:#212121;font-weight:700;margin-bottom:4px}form .form-actions{margin-top:32px}form .form-actions .submit-holder .btn{width:100%}.loading-screen{display:none}.loading-screen .loading-screen-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(255,255,255,.95);z-index:1001;text-align:center}.loading-screen .sending .text{margin-top:12px;margin-left:10px}.loading-screen .error{display:none;max-width:640px;margin:0 auto}.loading-screen .error .title{font-size:30px;font-weight:300;padding-top:32px;margin-bottom:16px}.loading-screen .error .btn-back .arrow-link{margin-top:40px;margin-left:-24px}.expandable-section .expandable-section-link .link-show-more [class*=text-]{border-bottom:2px solid transparent}.expandable-section .expandable-section-link .link-show-more .text-hide{display:none}.animated-arrow-icon.to-left{transform:scaleX(-1)}.animated-arrow-icon .arrow-container{transform:translateX(-4px)}.animated-arrow-icon .arrow-line{stroke-dasharray:13px;stroke-dashoffset:13px}body,html{height:100%;margin:0;padding:0;color:#212121;font-family:pragmatica,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}html{scroll-padding-top:64px}.wrapper{min-height:100%;display:flex;flex-direction:column;align-items:stretch}.main{flex-grow:1}.content-holder{position:relative;max-width:1260px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px}@media screen and (max-width:768px){.content-holder{padding-right:32px;padding-left:32px}}@media screen and (max-width:480px){.content-holder{padding-right:20px;padding-left:20px}}.section-content{padding-top:80px;padding-bottom:80px}@media screen and (max-width:768px){.section-content{padding-top:56px;padding-bottom:56px}}.page-content{padding-top:calc(var(--navbar-height) + 40px);padding-bottom:80px}@media screen and (max-width:768px){.page-content{padding-top:calc(var(--navbar-height) + 24px);padding-bottom:56px}}#navbar{position:absolute;width:100%;height:var(--navbar-height);z-index:1000;background-color:var(--navbar-color)}#navbar .content-holder{height:100%}#navbar .nav-container{display:flex;height:100%;align-items:center}.navigation{height:100%}@media screen and (max-width:876px){.navigation{display:none}}.navigation .nav-list{display:flex;height:100%;list-style:none}#navbar{--navbar-item-bg:rgba(255, 255, 255, .12);--navbar-item-underline:rgba(255, 255, 255, .75)}.nav-item{display:flex;align-items:center;padding:0 22px;border-radius:0 0 8px 8px;-webkit-transform:translateZ(0)}@media screen and (max-width:1200px){.nav-item{padding:0 14px}}@media screen and (max-width:1024px){.nav-item{padding:0 10px}}.nav-item:last-child.button{padding:0 0 0 10px}.nav-item:last-child.link{padding:0 0 0 22px}.nav-item.opens-subnav{border-radius:0}.nav-item .nav-link{text-decoration:none;font-size:15px;color:var(--navbar-link-color);font-weight:700;line-height:20px;opacity:.75}@media screen and (min-width:961px){.nav-item .nav-link{font-size:16px}}.nav-item .nav-link span{padding-bottom:1px;border-bottom:1px solid transparent}.nav-item .nav-link.with-caret-icon:after{content:'';display:inline-block;vertical-align:middle;margin:-3px 0 0 6px;border-bottom:2px solid #fff;border-right:2px solid #fff;width:6px;height:6px;transform:rotate(45deg);transform-origin:66% 66%}.nav-item .nav-link.with-caret-icon span{border-style:dotted}.nav-item .nav-link.external-link{display:flex}.nav-item .nav-link.external-link span{margin-bottom:-2px}.nav-item .nav-link.dotted-underline span{border-style:dotted}.nav-item .nav-button{padding:10px 20px;line-height:1.2}@media screen and (max-width:1024px){.nav-item .nav-button{padding:8px 12px}}@media screen and (max-width:991px){.nav-item .nav-button{font-size:14px;padding:8px}}@media screen and (min-width:1101px){.nav-item .short-name{display:none}}@media screen and (max-width:1100px){.nav-item .short-name+span{display:none}}.mobile-subnav .subsection-holder .subsection-title,.subnav-topbar .title-holder .title{color:rgba(0,0,0,.38);font-size:20px;font-weight:300}.subnav{visibility:hidden;opacity:0;background-color:#fff;will-change:opacity}@media screen and (max-width:876px){.subnav{width:100%;overflow-x:hidden}}.subnav .desktop-subnav,.subnav .mobile-subnav{display:none;height:100%}@media screen and (min-width:877px){.subnav .desktop-subnav{display:block}}.subnav .desktop-subnav .subsection{display:none}@media screen and (max-width:876px){.subnav .mobile-subnav{display:block}}.subnav .content-holder{overflow:auto}@media screen and (min-width:877px){.subnav .content-holder{padding-top:32px}}.subnav .navigation{display:block;padding-bottom:32px;height:auto}@media screen and (min-width:877px){.subnav .navigation{border-bottom:1px dotted rgba(0,0,0,.16);margin-bottom:32px}}.subnav .navigation .nav-list .nav-item{padding:0 32px 0 0}.subnav .navigation .nav-list .nav-item .nav-link{font-size:16px;font-weight:400;color:#212121;opacity:1}.subnav .navigation .nav-list .nav-item .nav-link.with-caret-icon:after{display:none}.mobile-subnav .subnav-body{display:flex;width:200%;height:calc(var(--app-window-height) - var(--navbar-height) - 72px);will-change:transform}.mobile-subnav .nav-holder,.mobile-subnav .subsection-holder{width:100%}.mobile-subnav .subsection-holder{will-change:transform}.mobile-subnav .subsection-holder .subsection{display:none}.mobile-subnav .subsection-holder .subsection-title{margin:16px 0 12px}.mobile-subnav .navigation{padding:0 0 12px}.mobile-subnav .navigation .nav-list{flex-direction:column}.mobile-subnav .navigation .nav-list .nav-item{padding:0;margin:0 -16px}.mobile-subnav .navigation .nav-list .nav-item .nav-link{width:100%;padding:20px 16px;border-radius:3px}.mobile-subnav .navigation .nav-list .nav-item .nav-button{color:#055deb;border:1px solid;margin:8px 16px;padding:12px 32px;min-width:220px}@media screen and (max-width:480px){.mobile-subnav .navigation .nav-list .nav-item .nav-button{width:100%}}.subnav-topbar{position:relative;padding:12px 0}@media screen and (min-width:877px){.subnav-topbar{display:none}}.subnav-topbar .subnav-underline{position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 50%,transparent 0,transparent);background-size:6px 1px}.subnav-topbar .topbar-holder{display:flex;align-items:center;justify-content:space-between}.subnav-topbar .title-holder{display:flex;align-items:center}.subnav-topbar .title-holder .arrow-link{display:none}.subnav-topbar .close-btn{margin-right:-6px}.subnav-topbar .close-btn .icon-button .icon{color:rgba(0,0,0,.26)}@media screen and (max-width:876px){.subnav-content{margin-top:16px}}@media screen and (min-width:877px){.subnav-content.services .category-products{flex-direction:row}.subnav-content.services .category-products .product-item:not(:first-child){margin-left:24px}}.subnav-content .section .heading{color:#055deb;font-size:24px;font-weight:300;padding-top:0;margin-bottom:24px}@media screen and (min-width:877px){.subnav-content .section .heading{display:none}}@media screen and (max-width:876px){.subnav-content .section .heading{color:#8f95a3;font-size:20px}}.subnav-content .section .heading+.category{margin-top:-16px}.subnav-content ul{list-style:none}.subnav-content .categories{display:flex;flex-direction:row;-moz-column-gap:32px;column-gap:32px}@media screen and (max-width:876px){.subnav-content .categories{flex-direction:column}}.subnav-content .category{padding:0 40px 40px 0}@media screen and (max-width:876px){.subnav-content .category{padding-bottom:24px;padding-right:0}}.subnav-content .category .subheading{color:#8f95a3;font-size:14px;margin-bottom:10px}@media screen and (min-width:877px){.subnav-content .category .subheading{font-size:16px}}.subnav-content .category-products{display:flex;flex-direction:column}.product-item:not(:last-child){margin-bottom:6px}@media screen and (min-width:877px){.product-item{margin-left:-16px}}@media screen and (max-width:876px){.product-item{margin-right:0}}.product-item .product-link{display:flex;flex-direction:row;align-items:center;padding:16px;border-radius:8px;min-width:100px;text-decoration:none}@media screen and (min-width:877px){.product-item .product-link{max-width:400px}}@media screen and (max-width:876px){.product-item .product-link{padding:14px 16px;margin-left:-16px;margin-right:-16px}}.product-item .product-link.with-description{align-items:flex-start}.product-item .product-link .external-link{display:flex}.product-item .product-link svg{flex-shrink:0;margin-right:12px;width:44px;height:44px}@media screen and (max-width:876px){.product-item .product-link svg{margin:0 16px 0 0;width:32px;height:32px}}.product-item .product-link span{font-size:15px;color:#212121}@media screen and (max-width:876px){.product-item .product-link span{font-size:16px}}.product-item .product-link .description{font-size:14px;color:#6a707f;margin-top:4px}#navbar{--logo-underline:white;--product-main-logo:white;--menu-icon:white;--menu-icon-border:rgba(255, 255, 255, .54)}.logo .logo-nav-link .icon-menu{font-size:24px;color:var(--menu-icon)}.logo .logo-nav-link .icon-menu:before{display:flex;align-items:center;justify-content:center;height:40px;width:40px}.logo{height:100%;margin-right:auto}.logo .logo-nav-link{display:flex;align-items:center;text-decoration:none;height:100%;padding:0 20px;margin-left:-20px;will-change:width}@media screen and (max-width:876px){.logo .logo-nav-link{display:flex;align-items:center;height:100%}}.logo .logo-nav-link .main-logo{height:30px}@media screen and (max-width:876px){.logo .logo-nav-link .main-logo{height:24px}}@media screen and (min-width:877px){.logo .logo-nav-link .icon-menu{display:none}}.logo .logo-nav-link.product-logo{position:relative}.logo .logo-nav-link.product-logo .main-logo{position:absolute;top:0;width:100px;transform-origin:left;transform:scale(.45)translateY(0)translateZ(0);will-change:transform}.logo .logo-nav-link.product-logo .main-logo svg path{fill:var(--product-main-logo)}.logo .logo-nav-link.product-logo .icon-menu{border:1px solid var(--menu-icon-border);margin:-1px}.logo .logo-nav-link.product-logo .product-sign{flex-shrink:0;display:inline-block;width:40px;height:40px;vertical-align:middle}.logo .logo-nav-link.product-logo .product-sign svg path{fill:#fff}.logo .logo-nav-link.product-logo .product-name{text-decoration:none;font-size:30px;font-weight:300;color:var(--navbar-logo-text-color);line-height:1;margin:3px 0 0 8px;vertical-align:middle;border-bottom:1px dotted transparent}@media screen and (max-width:1080px){.logo .logo-nav-link.product-logo .product-name{font-size:26px;margin-top:1px}}@media screen and (max-width:960px){.logo .logo-nav-link.product-logo .product-name{font-size:20px}}@media screen and (max-width:876px){.logo .logo-nav-link.product-logo .icon-menu,.logo .logo-nav-link.product-logo .main-logo{display:none}}@media screen and (max-width:480px){.logo .logo-nav-link.product-logo{width:126px}.logo .logo-nav-link.product-logo .icon-menu{display:block;border-color:transparent}.logo .logo-nav-link.product-logo .product-sign{margin-left:6px}.logo .logo-nav-link.product-logo .product-name{display:none}}#navbar{--lang-select-arrow-color:rgba(255, 255, 255, .64);--lang-select-bg-color:rgba(255, 255, 255, .12)}.language-select-holder{position:relative;margin:0 -10px 0 20px}@media screen and (max-width:1024px){.language-select-holder{margin-left:8px}}@media screen and (max-width:768px){.language-select-holder{margin-left:auto}}@media screen and (min-width:877px){.mobile-arrow-nav-item{display:none}}.mobile-arrow-nav-item .nav-link{display:flex;align-items:center;flex-direction:row;justify-content:space-between;padding:22px 0;color:#212121;border-top:1px dotted rgba(0,0,0,.16)}.mobile-arrow-nav-item .icon{font-size:24px;color:rgba(0,0,0,.26);margin-right:6px}:root{--snackbar-bottom-position:20px}.common-tab-content{display:none;opacity:0}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;z-index:1003;animation:animateTop .2s}.modal .modal-content{display:flex;flex-direction:column;background-color:#fff;border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,.38);max-width:600px;max-height:calc(100vh - 2 * 40px);margin:40px auto;color:#212121}@media screen and (max-width:640px){.modal .modal-content{margin:40px 16px}}.modal .modal-header{flex-shrink:0;display:flex;justify-content:space-between;padding:16px 32px}.modal .modal-header .modal-title{color:#212121;font-size:24px;font-weight:300;line-height:1.2;padding-top:8px;margin-bottom:0}.modal .modal-body{display:flex;flex-direction:column;flex-grow:1;overflow:auto;padding:0 32px 16px}.modal .modal-footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:16px 32px}@keyframes animateTop{0%{top:-300px;opacity:0}100%{top:0;opacity:1}}.code-editor{position:relative;display:block;font-family:fira code,monospace;font-size:13px;background-color:#fff;font-weight:400;border-radius:4px;padding:0 0 0 30px;margin-bottom:20px;box-shadow:0 1px 3px rgba(200,221,255,.6),0 4px 25px #c8ddff}@media screen and (max-width:640px){.code-editor{padding-left:15px}}@media screen and (max-width:576px){.code-editor{white-space:normal;word-wrap:break-word}}.code-editor .hide{display:none!important}.code-editor .scroll{overflow:auto;max-height:680px;padding-left:5px;margin-left:-5px}@media screen and (max-width:640px){.code-editor .scroll{padding-left:10px;margin-left:-10px}}.code-editor:before{position:absolute;content:'';top:0;left:0;background:#f0f0f0;border-right:1px solid #d0d0d0;width:30px;height:100%;border-radius:4px 0 0 4px;z-index:2}@media screen and (max-width:640px){.code-editor:before{width:15px}}.code-editor .comments{color:gray;font-weight:500;font-style:italic;white-space:nowrap}.code-editor .keyword{color:navy;font-weight:500}.code-editor .value{color:#00f;font-weight:500;background:0 0}.code-editor .variable{color:#660e7a;font-weight:500;font-style:italic}.code-editor .variable-thin{color:#660e7a}.code-editor .annotation{color:#807f17;font-weight:500}.code-editor .string{color:#397f00;font-weight:500;background-color:transparent}.code-editor.kotlin .constant{color:#4782e2}.ul-tree{position:relative;padding-left:0;margin:0}@media screen and (max-width:576px){.ul-tree{background-color:#fff}}.ul-tree ul{position:relative;margin:0;padding-left:0}.ul-tree ul:last-child{margin-bottom:0}.ul-tree .second-level,.ul-tree .third-level{padding-left:12px}.ul-tree .bordered-level{border-left:1px solid #e6e6e6}.ul-tree .comments li{line-height:20px}.ul-tree .active>.shortening{display:none}.ul-tree .active>.filling{background-color:transparent}.ul-tree .active>.left-brace,.ul-tree .active>.right-brace{margin:0}.ul-tree .filling{background-color:#ecfaeb}.ul-tree .no-shift{padding:0}.ul-tree .no-shift li{padding:0}.ul-tree .right-brace{margin-left:-8px;padding-right:1px}.ul-tree li{position:relative;list-style:none outside none;margin:0;padding-left:14px;line-height:20px;white-space:nowrap}@media screen and (max-width:640px){.ul-tree li{line-height:18px}}.ul-tree>li{padding-left:8px}@media screen and (max-width:640px){.ul-tree>li{line-height:18px}}.ul-tree .empty-line{line-height:19px}@media screen and (max-width:640px){.ul-tree .empty-line{line-height:18px}}.ul-tree.ul-tree-drop .drop{position:absolute;width:11px;height:11px;top:6px;left:-5px;background:url(/images/icons/code-collapse-controls.png)no-repeat;z-index:2}.ul-tree.ul-tree-drop .second-level .drop{top:5px;left:-25px}.ul-tree.ul-tree-drop .second-level .drop-bottom{left:-25px;bottom:6px}.ul-tree.ul-tree-drop .drop-bottom{position:absolute;display:inline-block;width:11px;height:11px;bottom:5px;left:-5px;background:url(/images/icons/code-collapse-controls.png)-22px 0 no-repeat;z-index:2}.ul-tree.ul-tree-drop .active>.drop{background-position:-11px 0}.chroma{background-color:#fff}.chroma .line{display:flex}.chroma .k{color:#00f}.chroma .kc{color:#00f}.chroma .kd{color:#00f}.chroma .nc{color:#2b91af}.chroma .s{color:#397f00;font-weight:500}.chroma .s2{color:#397f00;font-weight:500}#redirect-suggestion .modal-content{max-width:500px}#redirect-suggestion .modal-footer{gap:16px;justify-content:flex-end}@media screen and (max-width:480px){#redirect-suggestion .modal-footer{flex-direction:column;margin-bottom:16px}}#redirect-suggestion .modal-footer .btn{padding:8px 20px}#redirect-suggestion .modal-footer .btn-no{min-width:96px}.additional-field{height:0;font-size:0;line-height:0;padding:0;margin:0;border:none;overflow:hidden}.thank-you-section{display:none}.thank-you-section .thank-you-holder{max-width:460px;margin:0 auto;text-align:center}.thank-you-section .icon{font-size:64px;color:#055deb}.thank-you-section .title{font-size:30px;font-weight:700;padding-top:8px;margin-bottom:8px}:root{--hero-overlay-color:black}.jxbrowser .hero.product{background-image:url(/images/product-visuals/jxbrowser.webp)}@media screen and (max-width:768px){.jxbrowser .hero.product{background-image:url(/images/product-visuals/jxbrowser-mobile.webp)}}.hero.product{position:relative;background-position:50% 60%;background-repeat:no-repeat;background-size:cover}.hero.product:before{content:'';position:absolute;background:linear-gradient(to right,var(--hero-overlay-color) 20%,transparent 100%)no-repeat;background-size:cover;opacity:.8;width:100%;height:100%;top:0;left:0;right:0;bottom:0}@media screen and (max-width:768px){.hero.product:before{background:#000;opacity:.65}}.hero.product .page-content{color:#fff;padding-bottom:48px}.hero.product .page-content .title{font-size:30px;color:#fff;font-weight:700;margin-bottom:24px;line-height:1.3}@media screen and (max-width:960px){.hero.product .page-content .title br{content:""}.hero.product .page-content .title br:after{content:" "}}@media screen and (max-width:480px){.hero.product .page-content .title{font-size:24px}}.hero.product .page-content .mobile-product-name{font-size:40px;font-weight:300;color:#fff}@media screen and (min-width:481px){.hero.product .page-content .mobile-product-name{display:none}}.hero.product .page-content .requirements{text-shadow:0 1px 2px rgba(0,0,0,.6);margin-bottom:40px}@media screen and (max-width:480px){.hero.product .page-content .hero-btn{width:100%}}.hero.product .page-content .release-info{display:flex;flex-wrap:wrap;margin-top:40px;list-style:none;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.2px}@media screen and (max-width:640px){.hero.product .page-content .release-info{flex-direction:column}}.hero.product .page-content .release-info li{margin-right:24px;margin-top:8px}.hero.product .page-content a:not(.btn){color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}.why-product .row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 80px}@media screen and (max-width:768px){.why-product .row{grid-template-columns:1fr}}.why-product .row .why-item{position:relative}.why-product .row .why-item .icon{font-size:32px;color:#055deb}@media screen and (max-width:768px){.why-product .row .why-item .icon{position:absolute}}.why-product .row .why-item .info-block{padding-top:10px}@media screen and (max-width:768px){.why-product .row .why-item .info-block{padding-top:6px;padding-left:56px}}.why-product .row .why-item .title{font-size:18px;padding-top:0;margin-bottom:8px}@media screen and (min-width:1025px){.jxbrowser .features.bento-layout .feature-list .feature-card:first-child{grid-area:a}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(2){grid-area:b}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(3){grid-area:c}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(4){grid-area:d}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(5){grid-area:e}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(6){grid-area:f}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(7){grid-area:g}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(8){grid-area:h}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(9){grid-area:i}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(10){grid-area:j}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(11){grid-area:k}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(12){grid-area:l}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(13){grid-area:m}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(14){grid-area:n}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(15){grid-area:o}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(16){grid-area:p}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(17){grid-area:q}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(18){grid-area:r}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(19){grid-area:s}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(20){grid-area:t}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(21){grid-area:u}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(22){grid-area:v}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(23){grid-area:w}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(24){grid-area:x}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(25){grid-area:y}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(26){grid-area:z}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(27){grid-area:aa}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(28){grid-area:bb}}@media screen and (min-width:1025px){.dotnetbrowser .features.bento-layout .feature-list .feature-card:first-child{grid-area:a}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(2){grid-area:b}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(3){grid-area:c}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(4){grid-area:d}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(5){grid-area:e}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(6){grid-area:f}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(7){grid-area:g}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(8){grid-area:h}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(9){grid-area:i}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(10){grid-area:j}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(11){grid-area:k}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(12){grid-area:l}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(13){grid-area:m}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(14){grid-area:n}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(15){grid-area:o}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(16){grid-area:p}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(17){grid-area:q}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(18){grid-area:r}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(19){grid-area:s}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(20){grid-area:t}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(21){grid-area:u}}.features .feature-list .feature-backdrop{position:fixed;background-color:#000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate3d(0,0,0);top:0;right:0;bottom:0;left:0;opacity:0;z-index:1002}@media screen and (max-width:640px){.feature-card .content-container .modal-content{margin-top:16px}}.feature-card .modal-content{display:none}.feature-card .modal-content.middle-content{height:100%}.feature-card .modal-content .learn-more-btn{display:flex;float:right;margin-top:16px}@media screen and (max-width:640px){.feature-card .modal-content .learn-more-btn{margin-top:24px}}.feature-card .middle-content-holder{display:flex;flex-direction:column;height:100%}.feature-card .image-holder{display:flex;height:100%;align-items:center;padding:20px 0}@media screen and (max-width:576px){.feature-card .image-holder{height:auto}}.feature-card .feature-image{display:block;max-height:430px;margin:0 auto}.feature-card .feature-image.full-width{width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.feature-card .feature-image.with-border-radius{border-radius:8px}.feature-card .feature-image.with-shadow{box-shadow:0 5px 14px rgba(68,101,128,.4)}.getting-help .support-plans .body .btn{display:inline-flex;justify-content:center;width:100%}@media screen and (max-width:768px){.getting-help .support-plans .body .btn{font-size:14px;padding:12px 10px}}.integration-services textarea{height:200px}.integration-services .contact-us .label{margin-top:20px;font-size:15px;color:#6a707f;text-align:center}.integration-services .contact-us .email-and-phone{display:flex;justify-content:center;align-items:center;margin:6px auto 16px;padding-right:12px}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone{flex-direction:column;padding-right:0}}.integration-services .contact-us .email-and-phone .divider{display:block;margin:0 12px;color:#b5bac7}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone .divider{display:none}}.integration-services .contact-us .email-and-phone .phone-number{white-space:nowrap}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone .phone-number{margin-top:6px}}.pricing .price-options .option-actions .btn{width:100%}.support-pricing .action .btn{width:100%}.simple-integration .common-tab-content .content-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}@media screen and (max-width:860px){.simple-integration .common-tab-content .content-row{display:block;max-width:620px;margin:0 auto}.simple-integration .common-tab-content .content-row .col{margin-bottom:32px}}.simple-integration .common-tab-content .guide-button{display:flex;flex-direction:column;align-items:center;margin:40px 0 24px}.simple-integration .demo{position:relative;padding-top:56px}@media screen and (min-width:1201px){.simple-integration .demo{margin:0 32px}}.simple-integration .demo .documentation-link,.simple-integration .demo .window-link{position:absolute;font-size:14px}.simple-integration .demo .documentation-link .arrow,.simple-integration .demo .window-link .arrow{position:absolute;z-index:3}.simple-integration .demo .window-link{left:0;top:16px;color:#212121;font-style:italic;padding-bottom:1px;border-bottom:1px dotted}.simple-integration .demo .window-link .arrow{width:38px;height:44px;top:25px;left:45px}@media screen and (max-width:400px){.simple-integration .demo .window-link .arrow{left:16px}}.simple-integration .demo .documentation-link{right:0;top:40px}@media screen and (max-width:400px){.simple-integration .demo .documentation-link{left:32px;top:44px}}.simple-integration .demo .documentation-link a{font-family:fira code,monospace;padding-bottom:1px;border-bottom:1px dotted}@media(min-width:861px) and (max-width:1024px){.simple-integration .demo .documentation-link a{font-size:12px}}@media screen and (max-width:576px){.simple-integration .demo .documentation-link a{font-size:11px}}@media screen and (max-width:400px){.simple-integration .demo .documentation-link a{overflow:hidden}.simple-integration .demo .documentation-link a span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.simple-integration .demo .documentation-link .arrow{width:48px;height:130px;top:25px;right:64px}.simple-integration .demo .documentation-link .tooltip-text{width:100%}.simple-integration .demo .demo-image{position:relative;border-radius:4px;overflow:hidden;margin:16px auto 0;box-shadow:0 1px 3px rgba(200,221,255,.6),0 4px 25px #c8ddff}.simple-integration .demo .demo-image:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1}.simple-integration .demo .demo-image .app-content,.simple-integration .demo .demo-image .app-window{position:relative;display:block;width:100%;height:auto}.simple-integration .demo .demo-image .app-content{position:absolute;top:0;left:0}.simple-integration .demo .demo-image .app-content-area,.simple-integration .demo .demo-image .app-window-area{position:absolute;left:0;width:100%;background-color:transparent;z-index:4}.simple-integration .demo .demo-image .app-window-area{top:0;height:4%}.simple-integration .demo .demo-image .app-content-area{bottom:0;height:96%}.simple-integration #compose .demo-image .app-window-area{height:4.3%}.simple-integration #compose .demo-image .app-content-area{height:95.7%}@media screen and (min-width:861px){.simple-integration #javafx .demo-image{max-height:360px}}.modal.contact-modal .modal-body{padding-bottom:32px}.modal form .form-actions{margin-top:0}.modal .thank-you-section .section-content{padding-top:20px}.teaser-html-css-javascript{--max-value-right-offset:62px;--max-axis-height:374px}@media screen and (max-width:640px){.teaser-html-css-javascript{--max-axis-height:506px}}.teaser-html-css-javascript .chart .browser-scores .system .score-line .score,.teaser-html-css-javascript .max-score-value .value{font-family:fira code,monospace;font-size:12px;font-weight:600}.teaser-html-css-javascript .chart-container{overflow-x:auto;margin-top:16px}.teaser-html-css-javascript .chart{position:relative;display:grid;grid-template-columns:1fr;row-gap:12px;padding-top:10px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart{grid-template-columns:max-content minmax(120px,555px)max-content;max-width:-moz-fit-content;max-width:fit-content;row-gap:16px}}.teaser-html-css-javascript .chart .browser-name{grid-column:1;font-size:14px;color:#8f95a3;align-self:center;justify-self:end;margin-right:16px}@media screen and (max-width:640px){.teaser-html-css-javascript .chart .browser-name{justify-self:start}}.teaser-html-css-javascript .chart .browser-name.product{display:flex;align-items:center;font-weight:700;color:#212121}.teaser-html-css-javascript .chart .browser-name.product img{display:block;margin-right:6px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart .browser-scores{grid-column:2/span 1}}.teaser-html-css-javascript .chart .browser-scores .system.windows{background-color:rgba(218,215,255,.2)}.teaser-html-css-javascript .chart .browser-scores .system.windows .score-line{background-color:#dad7ff}.teaser-html-css-javascript .chart .browser-scores .system.macos{background-color:rgba(154,199,255,.2)}.teaser-html-css-javascript .chart .browser-scores .system.macos .score-line{background-color:#9ac7ff}.teaser-html-css-javascript .chart .browser-scores .system.linux{background-color:rgba(186,240,241,.2)}.teaser-html-css-javascript .chart .browser-scores .system.linux .score-line{background-color:#baf0f1}.teaser-html-css-javascript .chart .browser-scores .system .score-line{display:flex;align-items:center;justify-content:flex-end;height:16px;padding-right:6px}.teaser-html-css-javascript .chart .browser-scores .system .score-line .score{color:#212121;opacity:.7}.teaser-html-css-javascript .max-score-line{position:absolute;height:var(--max-axis-height);width:1px;right:var(--max-value-right-offset);border-right:1px dashed #b5bac7}@media screen and (max-width:640px){.teaser-html-css-javascript .max-score-line{top:30px;right:0}}.teaser-html-css-javascript .max-score-value{justify-self:end}@media screen and (min-width:641px){.teaser-html-css-javascript .max-score-value{grid-column:3;grid-row:7;margin-left:-12px}}.teaser-html-css-javascript .max-score-value p{font-size:14px;color:#8f95a3}.teaser-html-css-javascript .max-score-value .value{line-height:1}.teaser-html-css-javascript .chart-info{display:flex;justify-content:space-between;margin-right:16px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart-info{grid-column:2}}@media screen and (min-width:641px){.teaser-html-css-javascript .footnote{grid-column:2}.teaser-html-css-javascript .footnote p{margin-top:-8px}}.teaser-html-css-javascript .footnote p{font-size:14px;color:#8f95a3}.teaser-html-css-javascript .legend{display:flex;flex-wrap:wrap}@media screen and (max-width:640px){.teaser-html-css-javascript .legend{flex-direction:column}}.teaser-html-css-javascript .legend .item{font-size:14px;margin-right:16px}.teaser-html-css-javascript .legend .item:before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px}.teaser-html-css-javascript .legend .item.windows:before{background-color:#dad7ff}.teaser-html-css-javascript .legend .item.macos:before{background-color:#9ac7ff}.teaser-html-css-javascript .legend .item.linux:before{background-color:#baf0f1}.teaser-java-javascript{display:flex;margin-top:16px}@media screen and (max-width:860px){.teaser-java-javascript{flex-direction:column}}.teaser-java-javascript .code-column{width:60%}@media screen and (max-width:860px){.teaser-java-javascript .code-column{width:100%}}.teaser-java-javascript .code-column pre code{font-size:13px;line-height:1.5;padding:14px}.teaser-java-javascript .code-column p{font-size:14px;margin-bottom:8px;color:#6a707f}.teaser-java-javascript .code-column p:not(:first-child){margin-top:12px}.teaser-java-javascript .example-column{width:40%;margin-left:24px;margin-top:29px}@media screen and (max-width:860px){.teaser-java-javascript .example-column{width:100%;margin-left:0}}.teaser-java-javascript .example-column .java-javascript-image-holder{display:flex;height:100%;align-items:center;border-radius:8px;background-color:#f8f8f8;padding:8px}@media screen and (max-width:960px){.teaser-java-javascript .example-column .java-javascript-image-holder{align-items:flex-start}}@media screen and (max-width:860px){.teaser-java-javascript .example-column .java-javascript-image-holder{justify-content:center;padding:24px 24px 8px}.teaser-java-javascript .example-column .java-javascript-image-holder img{max-width:400px;width:100%}}.teaser-java-javascript .example-column .java-javascript-image-holder img{display:block;border-radius:8px}.teaser-latest-security-updates{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px 0}.teaser-latest-security-updates .bar-cell .bar-line .bar-score,.teaser-latest-security-updates .version-cell span{font-family:fira code,monospace;color:#212121;font-size:12px;font-weight:700;line-height:1}.teaser-latest-security-updates .chart-container{width:100%}.teaser-latest-security-updates .chart{position:relative;display:grid;grid-template-columns:min-content 1fr}.teaser-latest-security-updates .axis-names,.teaser-latest-security-updates .bar-column{display:grid;grid-template-rows:200px 36px 24px}.teaser-latest-security-updates .data{display:grid;grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){.teaser-latest-security-updates .data{grid-template-columns:repeat(6,1fr)}}@media screen and (max-width:768px){.teaser-latest-security-updates .data{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:430px){.teaser-latest-security-updates .data{grid-template-columns:repeat(3,1fr)}}.teaser-latest-security-updates .y-axis{display:flex;align-items:center;justify-content:flex-end;border-right:1px solid #b5bac7;border-bottom:1px solid #b5bac7}.teaser-latest-security-updates .y-axis .y-label-container{position:relative;height:200px;width:24px}.teaser-latest-security-updates .y-axis .y-label-container .y-label{position:absolute;font-size:14px;color:#8f95a3;transform-origin:bottom left;transform:rotate(270deg);text-align:center;width:200px;line-height:24px;bottom:0;left:22px}.teaser-latest-security-updates .product-name{display:flex;align-items:center;padding-right:24px}@media screen and (max-width:640px){.teaser-latest-security-updates .product-name{padding-right:6px}.teaser-latest-security-updates .product-name span{display:none}}.teaser-latest-security-updates .product-name span{font-size:14px;color:#8f95a3;line-height:1;margin-left:8px}.teaser-latest-security-updates .product-name.chromium i{position:relative;font-size:22px;color:#6094ef}.teaser-latest-security-updates .bar-column:last-child .version-cell.product{border-right:inherit}@media screen and (max-width:960px){.teaser-latest-security-updates .bar-column:nth-child(-n+4){display:none}}@media screen and (max-width:768px){.teaser-latest-security-updates .bar-column:nth-child(-n+6){display:none}}@media screen and (max-width:430px){.teaser-latest-security-updates .bar-column:nth-child(-n+7){display:none}}.teaser-latest-security-updates .version-cell{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;border-right:2px solid var(--product-color)}.teaser-latest-security-updates .version-cell span{text-align:right;margin-top:2px}.teaser-latest-security-updates .version-cell.product{background-color:var(--product-color);border-right:2px solid #fff}.teaser-latest-security-updates .version-cell.product span{color:#fff}.teaser-latest-security-updates .bar-cell{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;width:100%;height:100%;border-bottom:1px solid #b5bac7}.teaser-latest-security-updates .bar-cell:after{content:'';position:absolute;width:2px;height:1px;right:0;bottom:-1px;background-color:#fff}.teaser-latest-security-updates .bar-cell .bar-container{min-height:16%;border-right:2px solid var(--product-color)}.teaser-latest-security-updates .bar-cell .bar-line{display:flex;justify-content:center;background-color:#9ac7ff;width:46px;height:100%;margin:0 2px}.teaser-latest-security-updates .bar-cell .bar-line .bar-score{margin-top:12px}.teaser-latest-security-updates .chart-legend{display:flex;margin-top:24px}@media screen and (max-width:400px){.teaser-latest-security-updates .chart-legend{flex-wrap:wrap}}.teaser-latest-security-updates .chart-legend .item{display:flex;font-size:14px;color:#212121}@media screen and (min-width:401px){.teaser-latest-security-updates .chart-legend .item:not(:first-child){margin-left:16px}}.teaser-latest-security-updates .chart-legend .item:before{content:'';display:inline-block;flex-shrink:0;width:12px;height:12px;margin:4px 8px 0 0;border-radius:2px}@media screen and (max-width:400px){.teaser-latest-security-updates .chart-legend .item.chromium{margin-bottom:6px}.teaser-latest-security-updates .chart-legend .item.chromium:before{margin-right:20px}}.teaser-latest-security-updates .chart-legend .item.chromium:before{background-color:#9ac7ff}.teaser-latest-security-updates .chart-legend .item.product:before{width:calc(2 * 12px);background-color:var(--product-color)}@media screen and (max-width:768px){[data-hash="#latest-security-updates"] .modal-content p br{content:""}[data-hash="#latest-security-updates"] .modal-content p br:after{content:" "}}#span-9aefcb2c.cloaked-e-mail:before{content:attr(data-domain)"\0040" attr(data-user);unicode-bidi:bidi-override;direction:rtl}
返回博客使用 CALayer 进行跨进程渲染
2021年6月18日Kyrylo Pshenychnyi
您是否希望开发一个具有多进程架构的 macOS 应用程序,其中一个进程负责生成图片,而另一个进程则负责在窗口中渲染这些图片? 如果您的应用需求不仅限于展示静态图片,而是要播放 60fps 的 4k 全屏视频,同时,您还希望在这一过程中不会对用户的 Mac 造成过高的 CPU 负载,如果以上是您所期望的,那么本篇文章就是为你准备的。
我叫 Kyrylo,多年来,我一直致力于开发一个商业化的跨平台库,该库允许将 Chromium 网络浏览器控件集成到 Java 和 .NET 桌面应用程序中。为了将 Chromium 集成到第三方应用程序中,我们不得不面临和克服一系列复杂且具有挑战性的技术难题。
其中,渲染是最重要且最具挑战性的任务之一。其复杂性源于 Chromium 的多进程架构。Chromium 在独立的 GPU 进程中渲染网页内容,而我们需要在另一个 Java 或 .NET 进程中显示这些内容。关于这个问题可以这样描述:在进程 B 中显示进程 A 的图形内容。
与不同进程共享渲染结果
每个支持的平台解决此任务的方式都不同。例如,在 Windows 和 Linux 上,这是通过将 Chromium
窗口嵌入到目标应用程序窗口中来完成的。这是本机
API 的常见用例:Win32 API’ SetParent
或 XLib’ ReparentWindow
函数。
遗憾的是,这种方法在 macOS 上并不适用。macOS
不允许将一个进程的窗口嵌入到另一个进程的窗口中。不过,我们仍有办法解决这一问题。
在本篇文章中,我将展示如何使用
CALayer
共享方法在 macOS
上将在一个进程中创建的内容渲染到另一个进程的窗口中。我将通过一个简单的应用程序来说明这一概念。
Chromium 多进程架构
在本节中,让我们简要回顾一下 Chromium 架构。
Chromium 的主要思想是使用单独的进程来显示网页。每个进程与其他进程和系统其余部分都是隔离的。
在下面的图片中,Browser
代表主进程(顶级窗口)。Renderer
负责解释和布局 HTML(浏览器标签页)。
这是出于安全原因的设计, 使得 Chromium 与操作系统的设计理念相似:即使某个应用程序(如 GPU 或渲染进程,等等)崩溃,也不会导致整个系统崩溃。
Chromium 多进程架构(引自此处)
同样的概念也适用于图形处理。Chromium 为 GPU 相关操作托管了一个单独的进程。
Chromium GPU 进程
纹理共享
让我们回到最初的任务,即从不同的进程中获取像素。在深入研究实现细节之前,了解 macOS
中用于渲染的实体是至关重要的。
简化的 CoreAnimation 模型
在上面的图片中,您可以看到用于显示图形内容的主要对象及它们之间的关系:
NSWindow
表示屏幕上的窗口。该类为嵌入其他视图提供了一个区域,接受并分发由用户通过鼠标和键盘引起的交互事件;UIView
— 渲染其内容边界内内容的基本构建块。这是诸如标签、按钮、滑块等 UI 控件的基类;CALayer
— 用于为视图提供后备存储的对象。即使没有父视图,也可以利用 CALayer
实例来显示视觉内容。图层用于视图的自定义,例如添加半径、阴影、高亮等。
我们之所以对 CALayer
感兴趣,是因为它为内容显示提供了更多的灵活性。确切地说,我们将使用其子类 — CALayerHost
, 这个子类对于纹理共享至关重要。那么,“纹理共享” 是什么呢?
纹理共享指的是一个进程创建的图形内容能够被另一个进程所使用的过程。这一过程正是本文所阐述的多进程架构概念的具体实践。
在一个进程中创建图形内容 — 在另一个进程中显示
IOSurface
苹果公司为实现上述目的提供了方法,即 IOSurface
框架。该 API 基于
IOSurface
可以通过名为 mach_ports 的 macOS 低级内核原语从远程进程访问。Chromium
使用了 IOSurface
方法,我们在项目中也用了很长一段时间。它具有良好的性能和稳定的
API。然而,过了一段时间后,我们就遇到了问题,即在 Chromium 中启用 IOSurface
渲染流程时,一些网站无法正确显示。这促使我们调查了 macOS 上
Chromium 的默认方法 — CALayerHost
CALayerHost
正如我前面提到的,CALayerHost
是 CALayer
的子类,用于渲染另一个图层的渲染上下文。通过
CALayerHost
进行的纹理共享涉及以下实体:
CAContext
— CoreAnimation 对象, 用于表示有关环境的信息,以及用于在进程之间共享 CALayer
。CALayerHost
— CALayer
的子类,可以渲染远程图层的内容;CAContextID
— 全局唯一标识符, 用于标识 CAContext
。这个 token 可以直接在不同的进程之间传递,而 mach_port
的传递则需要额外的操作。
渲染共享所需的类
示例
我将用一个简单的应用程序来说明纹理共享的概念。这个应用程序将类似于
Chromium 的结构,即为不同的目标设置单独的进程。
GPU 进程将使用 CALayer
作为后备缓冲区来完成所有的绘制工作。绘制完成后,此 CALayer
的 CAContextID
将被发送到主进程。主进程将使用 CAContextID 来创建 CALayerHost
对象,以便在创建的 NSWindow 对象上显示内容。
实施细节
这个应用程序由两个进程组成:
- Renderer App(渲染应用程序) — 负责创建要共享的纹理;
- Host App(宿主应用程序) — 显示在 Renderer App 中创建的内容。
进程之间的通信是通过一个简单的进程间通信(IPC)库来实现的。
示例应用程序架构
上述架构采用了传统的客户端-服务器模式, 其中 Host App
向 Renderer App 发送相应的请求。
让我们快速浏览一下应用程序的主要部分。
主函数随后启动这两个进程。要渲染的纹理数量由常量变量配置:
int main(int argc, char* argv[]) {
constexpr int kNumberWindows = 2;
if (ipc::Ipc::instance().fork_process()) {
HostApp server_app;
server_app.run(kNumberWindows);
} else {
RendererApp client_app;
client_app.run(kNumberWindows);
}
}
声明必要的 API
CALayerHost
类以及其他用于图层共享的对象都是运行时
API。因此,它们必须在我们的代码中显式声明。
// CGSConnectionID 用于在一个进程中创建 CAContext,
// 该进程将要共享其渲染的 CALayer 给另一个进程
// 以供显示。
extern "C" {
typedef uint32_t CGSConnectionID;
CGSConnectionID CGSMainConnectionID(void);
};
// CAContextID 类型用于跨进程标识 CAContext。
// 这是一个 token,
// 从共享正在渲染 CALayer 的进程
// 传递到将要显示该 CALayer 的进程。
typedef uint32_t CAContextID;
// CAContext 具有静态的 CAContextID,可以将其发送到另一个进程。
// 当在另一个进程中使用该 CAContextID 创建
// CALayerHost 时,该 CALayerHost 显示的内容将是设置为
// CAContext 上 // layer| 属性的 CALayer 的内容。
@interface CAContext : NSObject
+ (id)contextWithCGSConnection:(CAContextID)contextId options:
(NSDictionary*)optionsDict;
@property(readonly) CAContextID contextId;
@property(retain) CALayer *layer;
@end
// CALayerHost 是在将显示另一个进程渲染的内容的进程中创建的。
// 在这个类的对象上设置 |contextId| 属性后,
// 该层将展示在图层共享过程中
// 与具有该 CAContextID 的 CAContext
// 相关联的 CALayer 的内容。
@interface CALayerHost : CALayer
@property CAContextID contextId;
@end
Renderer App (渲染应用程序)
Renderer App 主要完成两项任务:
- 通过 OpenGL API 进行内容渲染。 这是在
ClientGlLayer
类中完成的,该类继承自 CAOpenGLLayer
- 通过
CAContext
和 IPC 库,将新创建的图层暴露给 Host App。
void RendererApp::exportLayer(CALayer* gl_layer) {
NSDictionary* dict = [[NSDictionary alloc] init];
CGSConnectionID connection_id = CGSMainConnectionID();
CAContext* remoteContext = [CAContext
contextWithCGSConnection:connection_id options:dict];
printf("Renderer: 将 CAContext 的图层设置为要导出的 CALayer。\n");
[remoteContext setLayer:gl_layer];
printf("Renderer: 将上下文 ID 发送回服务器。\n");
CAContextID contextId = [remoteContext contextId];
// 将 contextId 发送到 HostApp。
ipc::Ipc::instance().write_data(&contextId);
}
共享 CALayer 的代码很简单:
- 初始化
CAContext
; - 通过
CAContext::setLayer()
方法将图层暴露以供导出; - 通过 IPC 库将
CAContext
的标识符传递给 Renderer App。在那里,它将用于创建 CALayerHost
实例。
Host App(宿主应用程序)
Host App 的主要目标是显示 Renderer App 中渲染的内容。每个图层都由一个单独的
NSWindow
服务。首先,我们需要使用从 Renderer App 进程接收到的 CAContextID
来初始化一个 CALayerHost
:
CALayerHost*HostApp::getLayerHost() {
if (context_id_ == 0) {
ipc::Ipc::instance().read_data(&context_id_);
}
CALayerHost* layer_host = [[CALayerHost alloc] init];
[layer_host setContextId:context_id_];
return layer_host;
}
为了方便起见,我们将接收到的 id 保存到 context_id
字段中。接着,我们需要将
CALayerHost
嵌入到新创建的窗口的 NSView 中:
[window setTitle:@"CARemoteLayer Example"];
[window makeKeyAndOrderFront:nil];
NSView* view = [window contentView];
[view setWantsLayer:YES];
CALayerHost* layer_host = getLayerHost();
[[[window contentView] layer] addSublayer:layer_host];
[layer_host setPosition:CGPointMake(240, 240)];
printf("Host: 已将图层添加到视图层次结构中。\n");
重要提示: 必须将 setWantsLayer
属性设置为 YES
, 这样视图才能通过
CALayer
来管理其渲染的内容。
下面您可以看到两个窗口的应用程序结果。 请注意,这两个窗口在 Render App
中使用的是同一个 CALayer
。
运行具有两个窗口的应用程序
您可以在此处找到示例应用程序的完整源代码,以及构建说明。
结论
将 GPU 渲染置于单独的进程中是 Chromium
等大型项目中常用的做法。这种做法不仅提高了产品的整体安全性,还增强了代码的可维护性。在本文中, 我们测试了基于
CALayer
共享的方法。其核心思想在于,有一个进程专门负责在 CALayer
上进行绘制,并将最终图层共享给另一个或多个进程,这些进程随后可以在目标视图中展示这些已渲染的图层。
teamdev.cn
使用 cookie 来存储信息。您可以在我们的隐私声明中了解更多详情。 我了解