크롬 개발자 도구로 디버깅을 하던 도중, 작성한 파일명이 아닌 VM으로 시작하는 파일이 열리며 하이라이팅이 잘못 표시되는 현상이 발생했다. VM으로 시작하는 파일은 블랙박스로 간주되는 것으로 eval, iframe 등을 사용하면 나타난다고 하는데, 내 코드에는 그런 부분이 없었다. 같은 이름의 파일이 여러번 로드되면 그런 경우가 발생할 수도 있다고 하는데, 코드에서 여러번 같은 파일을 로드하지도 않았다. 중단점과 관련한 이슈가 많았는데 그런 경우에는 debugger라는 키워드를 코드에 삽입하여 코드를 중단시키면 된다는 것이었는데 나의 경우에는 중단점이 걸리긴 하나 중단점과 무관한 위치에서 코드가 멈추어 있었다. 개발자도구를 껐다가 다시 켜고, 캐시도 제거해보았으나 현상은 계속 발생하였다. 그러던 중 UR..
사이트 성능 측정을 위한 도구는 여러 가지가 있다. 대표적으로 webpagetest.org, 크롬의 개발자 도구에서 제공하고 있는 Lighthouse(구 Audits) 패널, sitespeed.io 등 사이트를 꼽을 수 있다. 사이트의 렌더링 성능 측정을 위해 위에서 나열한 도구들을 사용해보았다. 1. webpagetest.org 성능을 측정해주는 웹 서비스로써, 성능 테스트를 하길 원하는 사이트 URL을 입력하고 테스트 지역 / 브라우저 환경 등을 선택하면 테스트 결과를 보여준다. 이미 서비스 중이며 성능 개선 작업이 예정된 경우에 before 성능 기록 용도로 활용하면 좋다. 하지만 webpagetest에서 접근할 수 없는 사이트(공개되지 않은 사이트: 로컬/개발 환경 등)에 대해서는 활용이 불가하였..
Lighthouse를 실행하는 페이지 상에 WebGL 컨텐츠를 표시하는 canvas 엘리먼트(부모 노드 포함)만 존재할 경우, no_fcp 에러가 발생한다. 캔버스 내에 그려지는 요소들을 Lighthouse가 감지할 수 없기 때문에 발생하는 것으로 추정된다. 에러를 우회하려면 페이지에 캔버스 외에 빈 엘리먼트( 등..)를 추가하면되는데, 이는 발생하던 에러만 사라지게 하는것이지, 측정된 수치를 원했던 캔버스 내의 요소들이 그려지는 시점 등에 대한 결과는 제대로 얻을 수 없다는 한계가 있다.
- Total