주간 플랫폼 뉴스 : Firefox에서 레이아웃 교대, 고소화 된 고소도 비디오, 스크린 샷

이번 주 웹 플랫폼 뉴스는 레이아웃 시프트 디버깅, 이질적인 비디오 문제 및 새로운 Firefox 스크린 샷 기능을 다룹니다. 다이빙하자!

WebPagetest로 레이아웃 이동을 진단합니다

WebPagetest는 이제 페이지로드 중에 레이아웃이 이동하는 데 도움이됩니다. 방법은 다음과 같습니다.

1 단계 : 사용자 정의 메트릭을 추가하십시오

WebPageTest의 "고급 설정"( 사용자 정의 탭) 에서이 코드를 "사용자 정의 메트릭"필드에 붙여 넣습니다. 크롬이 브라우저로 선택되었는지 확인하십시오.

 <code>[LayoutShifts] return new Promise(resolve => { new PerformanceObserver(list => { resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput))); }).observe({type: "layout-shift", buffered: true}); });</code>

2 단계 : 결과를 조사하십시오

테스트 후 "사용자 정의 메트릭"페이지에서 "LayoutShifts"항목을 확인하십시오 ( "세부 사항"섹션에서 링크).

3 단계 : 필름 스트립 분석

"STARTTIME"및 "VALUE"데이터를 사용하여 WebPageTest FilmStrip의 변화를 찾아서 원인을 식별하십시오.

(Rick Viscomi를 통해)

높은 비트 전질 비디오 및 3G 재생

1.5Mbps를 초과하는 비트 레이트가있는 자체 호스팅 비디오는 3G 네트워크에서 재생 스톨을 유발할 수 있습니다. FFMPEG 및 StreamClarity.com과 같은 도구는 비트 전송률을 모니터링하는 데 도움이 될 수 있습니다. 한 연구에 따르면 비디오의 절반 이상이 3G 다운로드 속도를 초과하는 비트 전송률이있어 재생 지연과 스톨이 있습니다.

(Doug Sillars를 통해)

Firefox의 향상된 스크린 샷 명령

Firefox DevTools는 이제 강력한 :screenshot 명령을 ​​제공합니다. Chrome의 기능 (요소, 뷰포트, 전체 페이지 스크린 샷)을 반영하지만 장치 픽셀 비율 및 지연 옵션을 추가합니다.

 <code>// Full-page screenshot at 2x DPR :screenshot --fullpage --dpr 2 // Viewport screenshot with 5-second delay :screenshot --delay 5</code>

(Reddit을 통해)

더 많은 웹 플랫폼 뉴스를 보려면 매주 월요일 아침에 배달되는 주간 일요일 이메일 뉴스 레터를 구독하십시오.

웹 플랫폼 뉴스 : 일요일 문제 →

위 내용은 주간 플랫폼 뉴스 : Firefox에서 레이아웃 교대, 고소화 된 고소도 비디오, 스크린 샷의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!