최근에 나는 NDC Sydney에서 인터넷 성능에 관한 강연을 발표할 기회가 있어서 좋은 피드백을 받았다.
이것은 내가 강연에서 언급한 모든 주제에 관한 일련의 게시물을 썼다는 것을 깨우쳐 주었다. 누가 알겠는가. 아마도 언젠가는 이 게시물 중의 하나하나가 그들 자신의 강연일 것이다😃.
기타 모든 부분:
우리가 오랜 친구인 자바스크립트를 위해 무엇을 할 수 있는지 볼 때가 되었다.시작합시다.

HTTP/2로 전환

점점 더 많은 위탁 관리 공급자 지원HTTP/2에 따라 지금은 이 협의를 사용하고 다중 복용 특성에서 이익을 얻을 수 있는 좋은 시기가 되고 있다.성능에 있어서, 이것은 서버에 대한 호출 수를 줄이기 위해 모든 JavaScript를 대형 번들에 묶을 필요가 없다는 것을 의미한다.
대량의 요청을 처리하기 위해 설계된 HTTP/2를 사용하면 페이지를 표시하는 데 필요한 파일 수를 늘릴 수 있습니다.너무 많이tho:

Too much of a good thing is a bad thing.

비동기식 지연 시간

앞서 언급한 바와 같이 JavaScript와 CSS는 렌더링 블록 요소입니다.이것은 브라우저가 불러오기와 실행을 기다려야 문서의 나머지 부분을 해석할 수 있다는 것을 의미할 뿐이다.
이것은 우리의 First Meaningful Pain 를 크게 증가시켰다.이 문제를 해결하기 위해 우리는 그 중의 두 가지 기능을 사용할 수 있다. 이 두 가지 기능은 많은 사람들이 사용하는 것은 아니지만 매우 효과적이다.

정상 실행

HTML를 사용하여 JavaScript 파일을 로드하면 문서에 대한 확인이 중단됩니다.브라우저에서 리소스를 가져와서 이 작업을 수행한 다음 쌍을 계속 맞춥니다.

<script> 속성

Async 속성은 이 자원이 비동기적으로 실행될 수 있음을 표시하는 데 사용됩니다.분석은 멈추지 않고 네트워크에서 자원을 얻고 준비가 된 후에 바로 완성할 수 있습니다.

<script async src="script.js">

이 속성은 외부 JavaScript 파일에만 사용할 수 있습니다.파일이 병렬 다운로드되고 다운로드가 완료되면 스크립트를 실행하기 위해 확인을 일시 중지합니다.

비동기식 속성

Defer 속성은 브라우저가 전체 문서를 분석한 후에 이 스크립트를 실행하는 것을 알려 줍니다.

<script defer src="script.js">

Defer와 유사하게 이 파일은 병렬 다운로드가 가능하지만 전체 Async 문서를 해석할 때만 실행됩니다.

마지막으로 모든 HTML 표시를 script 의 끝에 두어 해석 body 시 더 많은 지연을 방지하는 것을 기억하십시오.
브라우저 지원에 관해서는 다행히도 모든 주요 속성이 이 속성들을 완전히 지원한다.

코드 분할

대부분의 현대 사이트는 모든 JavaScript를 한데 묶어서 불러오는 시간이 증가하고 불러오는 성능에 영향을 미친다.
코드 분할을 사용하면 응용 프로그램 코드를 단독 블록으로 분할하고 필요할 때 불러오는 것을 늦출 수 있습니다.이것은 클라이언트가 필요로 하는 코드가 가장 적고 페이지의 불러오는 시간을 높인다는 것을 의미한다.
코드를 세 영역으로 나눌 수 있습니다.

공급업체 코드

입구점

동적 분할

공급업체 코드

공급업체 코드, 예를 들어 각도, 반응, 모멘트 등은 주 코드에서 분리할 수 있다.Webpack 이 방법과 기타 방법을 완전히 지원합니다.응용 프로그램이나 공급업체 코드가 서로 독립적으로 변경될 때, 이 기술은 패키지의 캐시 실효를 더욱 잘 제어할 수 있습니다.
이것은 모든 응용 프로그램이 마땅히 해야 할 일이다.

입구점

이런 기술은 응용 프로그램의 입구점을 통해 코드를 구분한다.이것은 웹 팩과 같은 패키지가 응용 프로그램 의존 트리를 구축할 때의 출발점이다.
이것은 코드를 분할하는 가장 간단한 방법이지만, 이것은 수동적이며, 약간의 결함이 있다.

포털 점 사이에 중복된 모듈이 있으면 두 포털 점 사이에 번들로 묶여 있습니다.

동적 분할 응용 프로그램 논리의 코드에 사용할 수 없을 정도로 유연하지 않다.

이 기술은 클라이언트 루트나 서버 측 렌더링과 한 페이지 응용 프로그램이 혼합되어 사용되는 경우에 적용되지 않는다.

동적 분할

동적HTML을 사용할 때 단독 코드입니다.이것은 한 페이지 응용 프로그램의 가장 좋은 선택이다.SPA에서 서로 다른 노선에 서로 다른 모듈을 제공하는 것이 예입니다.

코드 분할까지 필요합니까?

이것은 내가 상황을 보고 결정해야 한다고 말한 것을 여러 번 들었을 때 중의 하나이다😉). 만약 당신의 응용 프로그램이 독립적인 기능을 가진 루트가 많고 프레임워크와 라이브러리를 대량으로 사용한다면, 이 답안은 긍정적일 가능성이 높다.
그러나 그것이 필요한지 여부는 응용 프로그램 구조와 코드에 대한 이해에 달려 있다.

현명하게 가져오기

의존항을 관리하기 위해 import 또는 다른 패키지 관리 시스템을 사용하면buid 폴더에 추가적이고 필요하지 않은 파일이 많습니다.
프레임이나 라이브러리를 사용할 때, 가져올 수 있는 단독 모듈이 있는지 확인하고, 있는 경우 필요한 모듈만 가져오십시오.
예를 들어, underscore 를 사용하고 있지만 npm, groupBy 및 shuffle 만 사용하고 있다고 가정합니다.대부분의 사람들은 이렇게 전체 라이브러리를 가져옵니다.

import * as _ from 'underscore'

대신 원하는 내용만 가져올 수 있습니다.

import {
  groupBy,
  shuffle,
  partition,
} from 'underscore'

이렇게 하면 너는 네가 필요로 하는 물건만 가지고 나머지는 묶음상에게 맡길 수 있다.따라서 페이지 로드 시간이 줄어듭니다.

절류와 탈온스

자, 사이즈에 관해서 성능을 향상시킬 수 있는 곳이 또 어디 있는지 봅시다.
웹 페이지를 스크롤하는 것과 같은 이벤트 모니터를 추가해야 할 때가 많다.그리고 우리는 사건을 촉발할 때마다 탐지기가 촉발하는 것을 잊어버렸다.

window.addEventListener('scroll', function() {
  console.log('page scrolled')
})

위의 예시에서 스크롤할 때마다 메시지가 컨트롤러에 인쇄됩니다.가령 리셋 함수에서 약간의 복잡한 조작이 있다고 가정하면 이것은 매우 큰 성능 병목이 될 것이다.
이 이벤트 탐지기를 삭제하고 다른 방법을 사용할 수 없으면 partition 또는 debounce 을 사용하여 이 상황을 완화할 수 있습니다.

탈온스

이 기능의 강제 함수 호출은 지난번 호출 후 일정 시간이 지나야 발생합니다.예를 들어 지난번에 호출한 지 100밀리초가 지났다면 이 함수를 호출합니다.
밑줄로 보면 다음과 같습니다.

const debounce = (func, delay) => {
  let inDebounce
  return function() {
    const context = this
    const args = arguments
    clearTimeout(inDebounce)
    inDebounce = setTimeout(
      () => func.apply(context, args),
      delay
    )
  }
}

이제 100밀리초마다 이벤트 탐지기를 떨 수 있습니다.

var efficientScrollListener = debounce(
  function() {
    console.log('page scrolled')
  },
  100
)

window.addEventListener(
  'scroll',
  efficientScrollListener
)

목을 졸라 죽이다

절류는 떨리는 것과 유사하지만, 일정 시간 동안 함수를 호출하는 최대 횟수를 강제하기 때문에 다르다.예를 들어 100밀리초마다 이 함수를 실행합니다.
다음은 간단한 실현이다.

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(
        () => (inThrottle = false),
        limit
      )
    }
  }
}

이제 스크롤 이벤트 탐지기를 제한할 수 있습니다.

var efficientScrollListener = throttle(
  function() {
    console.log('page scrolled')
  },
  100
)

window.addEventListener(
  'scroll',
  efficientScrollListener
)

뭐 공부 해요?

자바스크립트를 사용할 때 응용 프로그램의 성능을 중점적으로 향상시킬 수 있는 몇 가지 측면을 소개하기 위해 충분한 정보를 제공해 드렸으면 합니다.만약 당신이 다른 화제를 토론하고 싶다면 아래에 평론을 발표해 주십시오. 저는 여기나 다른 댓글에 추가할 것입니다.
여느 때와 마찬가지로 나누는 것을 잊지 마라❤️.