HMTL5 API를 사용하여 프런트엔드 성능 모니터링
- 黄舟원래의
- 2018-05-19 14:31:372361검색
User Timing API는 웹 애플리케이션에서 사전 정의된 두 마커 간의 성능을 측정할 수 있습니다. 개발자는 측정의 시작 및 끝 마커만 별도로 정의하면 됩니다. 타이밍 위치는 JavaScript 객체 ""가 제공하는 기능을 통해 표시할 수 있습니다.
var measuring_start = performance.now();
"" 기능을 사용하면 웹 애플리케이션에서 타임아웃을 얻을 수 있습니다. 이 함수와 유사하게 현재 타임스탬프를 얻을 수도 있는 Date 개체가 있습니다. 둘 사이의 주요 차이점은 시간 정확도입니다. Now 함수의 반환 값에 대한 w3c 문서에서는 소수점 이하 1/1000까지 정확한 밀리초 값을 표현할 수 있어야 합니다. 또한 now 함수에 의해 반환되는 값은 브라우저의 "탐색 시작 이벤트(navigationStart)"부터 현재까지의 밀리초 수입니다.
performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478
이미지의 로딩 성능을 분석하려면 이미지의 로드 이벤트에 두 번째 태그를 설정하면 됩니다. 이미지를 로드하는 데 걸리는 시간은 두 변수 "measure_start"와 "measure_end" 간의 차이(밀리초)입니다.
<html>
<head>
<meta charset="utf-8" />
<title>test timing</title>
</head>
<body>
<img src="http://cdn3.infoqstatic.com/statics_s2_20150922 -0305u1/styles/i/logo_bigger.jpg" alt="image" >
<script type="text/javascript">
var measure_start = performance.now();
document.getElementsByTagName("img")[0].addEventListener ("load", function() {
var measure_end = performance.now();
console.log("image load time: " + (measure_end - measure_start) + "ms");
}, false);
</script>
</body>
</html>이 HTML에 액세스한 후 콘솔에서 출력을 볼 수 있습니다.
image load time: 24.395ms
동시에 Chrome 개발자 도구의 네트워크 탭 로딩 시간과 비교할 수 있습니다.
(이미지를 확대하려면 클릭하세요)
now 기능을 사용하여 타임스탬프를 직접 얻을 수 있는 것 외에도 Performance 인터페이스에서도 기능을 제공합니다. 개발자는 시간을 기록해야 할 때마다 마커를 만들고 지울 수 있습니다.
performance.mark("start"); … performance.mark("end");마크 함수는 어떤 값도 반환하지 않지만, 마크 이름을 통해 나중에 마크 데이터를 얻을 수 있습니다. 마커 간의 차이를 계산하려면 "측정" 기능을 사용하면 됩니다. 이 함수에는 세 개의 매개변수가 필요합니다. 첫 번째 매개변수는 차이의 이름을 정의하고 두 번째와 세 번째 변수는 마커의 이름을 지정합니다. 마찬가지로 이 함수는 어떤 값도 반환하지 않습니다.
performance.measure("difference", "start", "end");위의 예에서는 "start"와 "end"라는 두 태그 사이의 차이를 계산하고 차이 이름을 "difference"로 지정합니다. 여기에 동일한 이름이 기록되며 덮어쓰여지지 않는다는 점에 유의하는 것이 중요합니다.
앞서 언급했듯이 mark와 Measure 두 함수는 어떤 값도 반환하지 않습니다. 마커나 측정의 내용을 읽으려면 Performance 인터페이스에서 "getEntries", "getEntriesByType" 또는 "getEntriesByName"을 호출하여 읽어야 합니다. 그 중 "getEntries"는 현재 성능 개체에 저장된 모든 태그(웹 페이지에서 로드된 리소스 포함)와 측정 결과를 반환합니다. "getEntriesByType" 함수는 해당 태그(또는 측정 결과)를 가져옵니다. 이름 데이터. 이러한 함수의 반환 값은 이름, 시작 시간, 시간 소비 등과 같은 필드를 포함하는 목록입니다.
예를 들어 모든 마커나 측정 결과를 얻으려면 "getEntriesByType" 함수를 통해 얻을 수 있습니다.
performance.mark("start");
performance.mark("end");
performance.measure("difference", "start", "end");
var marks = performance.getEntriesByType("mark");
var measures = performance.getEntriesByType("measure");
console.log("===marks===:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })
console.log("===measures===:") measures.forEach(function(measure){
console.log(measure.name + ": " + measure.duration) })브라우저(Chrome) 콘솔에서 실행 후 출력은 다음과 같습니다. :
===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646
반환된 객체에서 name 필드가 설정된 마크(측정 결과)의 이름임을 알 수 있습니다. 마크의 경우 startTime을 통해 마크 시간을 얻을 수 있습니다(언급된 now 함수와 유사). 위에서 반환된 시간은 NavigationStart 이벤트와 관련이 있습니다. 계산 결과의 경우 기간 필드를 통해 계산 결과를 얻을 수 있습니다. 위의 예에서 사용된 "mark" 및 "measure" 유형 외에도 브라우저(Chrome, Firefox 등)는 이미 "resource" 유형을 지원합니다. 즉, 이러한 브라우저는 기본적으로 모든 외부 리소스를 로드하는 데 걸리는 시간을 측정하는 데 도움이 되었습니다. 이전 예제의 html(이미지에 대한 참조 포함)의 경우 브라우저 콘솔에서 다음 js 코드를 실행하면 이미지를 로드하는 데 걸리는 시간을 직접 확인할 수 있습니다.
performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })위 코드 출력(Chrome)
http://cdn3.infoqstatic.com/statics_s2_20150922- 0305u1/styles/i/logo_bigger.jpg: 21.696999901905656
이 데이터는 Chrome 개발자 도구의 네트워크 탭에 기록된 이 요청에 걸린 시간과 정확히 동일합니다.
마커와 측정 결과명을 통해 직접 데이터를 얻고 싶다면 getEntriesByName 함수를 통해 얻을 수 있습니다. 이 함수는 PerformanceEntry 개체의 배열도 반환하며 특정 데이터를 얻으려면 반복해야 한다는 점에 유의해야 합니다.
마찬가지로 Performance 인터페이스도 태그 제거를 위한 인터페이스를 제공합니다. 이전에 생성된 마크와 측정 결과는clearMarks 및clearMeasures 기능을 통해 삭제할 수 있습니다. 두 기능 모두 선택적 이름 매개변수를 수신합니다. 이름이 전달되면 지정된 이름의 데이터가 삭제되고, 그렇지 않으면 표시/측정 결과가 지워집니다.
performance.clearMarks();
performance.mark("start");
performance.mark("end");
var marks = performance.getEntriesByType("mark");
console.log("before clear:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })
performance.clearMarks("start");
marks = performance.getEntriesByType("mark");
console.log("after clear:") marks.forEach(function(mark) {
console.log(mark.name + ": " + mark.startTime); })위 코드를 실행한 후의 출력은 다음과 같습니다.
before clear: start: 9080690.565000001 end: 9080690.575000001 after clear: end: 9080690.575000001
즉,performance.clearMarks("start");를 실행한 후 "start" 표시가 지워집니다.
Browsing Timing API
Browsing Timing API는 웹 페이지 로딩 시작부터 완료까지 전체 프로세스에서 각 노드의 타임스탬프를 계산합니다. 사용자 타이밍 API와 달리 브라우저 타이밍 API의 시간은 표준 타임스탬프입니다. 각 노드의 타임스탬프는performance.timing 객체에 저장됩니다. 포함된 각 노드에 대해 아래 그림을 참조할 수 있습니다.
(이미지를 확대하려면 클릭하세요)
console.log(performance.timing.domLoading); console.log(performance.timing.domComplete);
console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));예를 들어 domComplete(DOM 구축이 완료됨)와 domComplete의 차이를 알 수 있습니다. domLoading(DOM 생성 시작) 값을 사용하여 DOM 트리를 구축하는 데 소요된 시간을 계산합니다.
타이밍 개체에 저장된 각 노드의 로딩 타임스탬프 외에도 성능 개체는 및 개체도 저장합니다. 현재 페이지의 로드 유형과 리디렉션 시간을 저장합니다. 그 중 로딩 유형 유형은 다음과 같습니다.
TYPE_NAVIGATE（type == 0）：通过点击链接、输入地址、表单提交、脚本初开启等方式加载
TYPE_RELOAD（type == 1）：通过重新加载或者location.reload()操作加载
TYPE_BACK_FORWARD（type == 2）：通过浏览器历史遍历操作加载
TYPE_RESERVED（type == 255）：上面没有定义的其他方式
如直接打开一个页面，在控制台中执行：
console.log(performance.navigation.type);
上述脚本执行后，控制台会输出0，表示这是直接打开的一个页面。再次刷新页面，重新执行上面的JavaScript片段，则会输出1，表示这是一次重新加载。
performance.timing.redirectCount 记录了当前页面经历的重定向次数。
浏览器支持
用户计时API已经支持，如IE10+、Chrome 25+、Firefox 15+等，但是Safari等浏览器还不支持。对于浏览计时API，更多的浏览器已经，包括Chrome、Firefox、IE9+、Safari 8+等等。
以上就是使用HMTL5 API监控前端性能的内容，更多相关内容请关注PHP中文网（www.php.cn）！