2 post(s) tagged with "chromium"

View All Tags

Chrome 79 의 새로운 변경점들

Jimmy Moon

Jimmy Moon

Chief Editor

New in Chrome 79 의 내용을 번역, 요약, 정리 한 것이다.

Maskable Icons

Android O 로 넘어가면서 Progressive Web App 아이콘이 원형에 맞게 이쁘게 보이지 않는 경우가 생겼는데 이를 해결 하기 위해서 Chrome 79 에서는 Manifest 의 Icon 값에 새로운 프로퍼티 purpose 를 사용 할 수 있다.

{
...
"icons": [
...
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
]
...
}

maskable 값을 셋팅하면 투명 배경이나 이미지의 중앙을 중심으로 80% 정도의 세이프 존 영역을 보여준다. purpose아이콘이 어플리케이션에서 사용 될 수 있는 badge, 와 any 를 제공한다.

WebXR Device API

WebXR 은 웹에서도 VR 경험을 사용 할 수 있도록 도와준다. 이번 크롬 79 의 새로운 Experimental 기능이기 때문에 Origin Trial 프로그램을 통해서 API 를 사용 할 수 있다. 신청하면 origin-trial 을 위한 토큰을 발급 받아서 사용한다. 다음은 immersive-vr세션 생성을 요청하는 예제 코드다.

if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-vr')
if (supported) {
xrButton.addEventListener('click', onButtonClicked)
xrButton.textContent = 'Enter VR'
xrButton.disabled = false
}
}

Wake Lock API

Wake Lock API 를 사용하여 이제 웹앱/페이지에서도 스크린 세이버와 같이 스크린이 꺼지는 것을 막을 수 있다.

// WakeLockSentinel 오브젝트를 저장한다.
let wakeLock = null
// Wake Lock 요청
const requestWakeLock = async () => {
try {
// Wake Lock 을 요청하여 WakeLockSentinel 리턴 받는다/
wakeLock = await navigator.wakeLock.request('screen')
// Wake Lock 이 릴리즈 되었을 때 처리할 이벤트
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released')
})
console.log('Wake Lock is active')
} catch (err) {
console.error(`${err.name}, ${err.message}`)
}
}
// Wake Lock 릴리즈
const releaseWakeLock = async () => {
if (!wakeLock) {
return
}
try {
// wakeLock.request 에서 리턴받은 WakeLockSentinel 를 통해서
// 락킹의 해제한다.
await wakeLock.release()
wakeLock = null
} catch (err) {
console.error(`${err.name}, ${err.message}`)
}
}

rendersubtree attribute

rendersubtree 속성을 사용하면 해당 DOM 의 서브-트리의 렌더링의 여부와 히팅-테스트를 조절할 수 있다. 예를 들면 스크롤을 하고 있을 때 리스트 아이템의 DOM 을 렌더링하지 않게 할 수 있다. display:none 과 비슷하지만 브라우저의 Find 등의 동작이나 히팅-테스트여부등이 다른 점이다. 더 자세한 내용은 Display locking 스펙에 설명이 있다. 아래 예제에서 보면 div 의 서브-트리는 바로 렌더링 되지 않는다 이후 스크립트로 rendersubtree 속성을 초기화 하면 그때 렌더링 된다. 다양한 사용예제들이 있으니 참고하자.

만약 의도한 대로 동작하지 않는다면 chrome://flags 에서 #enable-display-locking 를 확인하자

<div id="target" rendersubtree="invisible skip-activation">
...content...
</div>
<script>
target.setAttribute('rendersubtree', '')
</script>

V8 이 V8.0 을 릴리즈

Jimmy Moon

Jimmy Moon

Chief Editor

V8 이 V8.0 을 릴리즈 했다. V8 이름 덕분에 여러가지 버전명이 예상 되었지만 V8.0 으로 릴리즈 되었다. 특별하게 추가 된 기능이나 컴파일러 소식은 없지만 퍼포먼스와 메모리 관리에 향상이 있었다.

Pointer compression

V8 의 힙 메모리에서 대부분을 차지하는 Tagged value 포인터의 비트를 절약하는 방법을 찾아내어 힙메모리가 평균 40% 정도 절약 되었다. 이에 따라서 페이스북, CNN 그리고 구글 맵스와 같은 사이트의 수행 시간이 각각 모바일, 테스크탑에서 4~10% 가량 줄었고 가비지 콜렉팅의 시간이 10% ~ 20% 가량 줄었다.

Optimizing higher-order builtins

기존에 사용자-정의 함수으로 일반 적으로 호출 되던 higher-order builtins 함수가 아래와 같다면,

const charCodeAt = Function.prototype.call.bind(String.prototype.charCodeAt)
charCodeAt(string, 8)

TurboFan 의 최적화를 통해서 실제 내장 함수를 호출 하도록 변경되어 직접 실제 내장 함수를 호출하는 것과 같은 성능을 보여준다. Function.prototype.apply, Reflect.apply 그리고 Array.prototype.map 등이 영향을 받는다

string.charCodeAt(8)

Option chaining

체이닝 프로퍼티 접근 시에 아래처럼 매번 값의 null 또는 undefined 를 검사하거나 에러를 무시하고 접근 했다면

// Error prone-version, could throw.
const nameLength = db.user.name.length
// Less error-prone, but harder to read.
let nameLength
if (db && db.user && db.user.name) nameLength = db.user.name.length

Optional chaining 연산자 ?. 는 값의 검사와 할당을 동시에 할 수 있다. 만약 값이 기대한 값을 가지고 있지 않다면 아래 표현은 undefined 로 평가 된다.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length

Nullish coalescing

Nullish coalescing 기본값을 다룰 수 있는 새로운 이항 연산자가 추가. 기존에 || 과 용법은 비슷하지만 Nullish (null or undefined) 에만 false 로 판단 된다. 아래 예제를 참고하자

false ?? true // => false
0 ?? 1 // => 0
'' ?? 'default' // => ''
null ?? [] // => []
undefined ?? [] // => []