페이지 성능 최적화 방법 요약

이 글은 페이지 성능 최적화 방법을 요약한 것입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

인터넷에는 유명한 8초 법칙이 있습니다. 사용자는 웹페이지를 방문할 때 로딩 시간이 8초 이상 걸리면 초조함을 느끼며 방문을 포기하게 됩니다. 대부분의 사용자는 웹페이지가 2초 이내에 로드되기를 기대합니다. 실제로 로드 시간이 1초 늘어날 때마다 사용자의 7%가 손실됩니다. 8초는 정확히 8초가 아니며 웹사이트 개발자에게 로딩 시간의 중요성을 보여줄 뿐입니다. 그렇다면 페이지 성능을 최적화하고 페이지 로딩 속도를 개선하려면 어떻게 해야 할까요? 이것이 이 기사에서 논의할 주요 문제입니다. 그러나 성능 최적화는 포괄적인 문제입니다. 다음은 성능 최적화를 위한 일반적인 방법을 요약한 것입니다.

1. 리소스 압축 및 병합

주로 다음 측면이 포함됩니다. #🎜 🎜#html 압축, CSS 압축, js 압축 및 혼동 및 파일 병합 . 리소스 압축은 파일에서 캐리지 리턴 및 공백과 같은 중복 문자를 제거할 수 있습니다. 편집기에서 코드를 작성할 때 들여쓰기와 주석을 사용하면 의심할 여지 없이 코드가 간결해지고 읽기 쉬워지지만 문서에 추가 바이트도 추가됩니다.

1.html 압축

html 코드 압축은 공백, 탭, 개행 문자 등을 포함하여 텍스트 파일에서는 의미가 있지만 HTML에는 표시되지 않는 문자를 압축하는 것입니다. , HTML 주석과 같이 다른 의미를 갖는 일부 문자도 압축할 수 있습니다.

html 압축 방법:

1. 압축을 위해 온라인 웹사이트 사용(일반적으로 개발 중에는 사용하지 않음) # 🎜🎜#

nodejs는 html 축소 도구를 제공합니다
백엔드 템플릿 엔진 렌더링 압축
3. #🎜 🎜#
   2.css 코드 압축:

css 코드 압축은 단순히 잘못된 코드 삭제 및 CSS 의미 병합입니다.

방법 CSS 압축:

압축을 위해 온라인 웹사이트 사용(일반적으로 개발 중에는 사용되지 않음)

1. # 🎜 🎜#html-minifier 도구 사용

2. clean-css를 사용하여 CSS 압축

3. #🎜🎜 #

3.js 압축 및 혼동 js 압축 및 혼동에는 주로 다음 부분이 포함됩니다. #🎜 🎜##🎜 🎜#

잘못된 문자 삭제

댓글 제거

1. 코드 의미 감소 및 최적화# 🎜🎜#

2. 코드 보호(코드 논리가 혼란스러워지고 코드의 가독성이 떨어지므로 매우 중요합니다. 이는 매우 중요합니다.)

# 🎜🎜##🎜 🎜#
3. js 압축 및 스크램블 방법

4. 압축에는 온라인 웹사이트 사용(일반적으로 개발 중에는 사용하지 않음)

   # 🎜🎜#

html 축소 도구 사용

uglifyjs2를 사용하여 js 압축

#🎜🎜 #
1. # 🎜🎜#

   사실 CSS 압축과 JS의 압축과 혼동은 HTML 압축보다 훨씬 큽니다. 동시에 CSS 압축과 JS 압축을 통해 CSS 코드도 훨씬 더 큽니다. 트래픽 감소는 매우 분명할 것입니다. 그래서 대기업의 경우 html압축은 선택사항이지만 css압축과 js압축과 혼동은 필수!

2. 4. 파일 병합

#🎜 🎜#위 그림에서 볼 수 있듯이 요청을 병합하지 않으면 다음과 같은 단점이 있습니다.

파일 사이에 업스트림 요청이 삽입되어 N-1 네트워크 지연이 추가됩니다. # 🎜🎜#

패킷 손실로 인해 더 심각한 영향

keep-alive 방법에 문제가 있을 수 있음, 프록시를 통해 서버 연결이 끊어질 수 있습니다. 즉, 항상 연결 유지 상태를 유지할 수는 없지만 파일을 병합하면 첫 번째 화면 렌더링 및 캐시 무효화 문제

와 같은 문제가 발생할 수 있습니다. 그렇다면 이 문제를 어떻게 처리해야 할까요? ----공공 도서관의 다양한 페이지 병합 및 병합.

파일 병합 방법

• 온라인 웹사이트를 사용하여 파일 병합
#🎜🎜 #

• nodejs를 사용하여 파일 병합 구현(gulp, fis3)

• 2. 비핵심 코드 비동기 로딩 비동기 로딩 방법#🎜 🎜## 🎜🎜#1. 비동기 로딩 방법

세 가지 비동기 로딩 방법 - 비동기 및 지연, 동적 스크립트 생성

#🎜 🎜#① 비동기 방법

비동기 속성은 HTML5의 새로운 속성이며 Chrome, FireFox 및 IE9+ 브라우저에서 지원되어야 합니다#🎜🎜 #

1. 비동기 속성은 스크립트를 사용할 수 있게 되면 스크립트가 비동기식으로 실행되도록 지정합니다.

2. 비동기 속성만 적용됩니다 외부 스크립트로

스크립트가 여러 개인 경우 이 방법은 스크립트가 순서대로 실행된다고 보장할 수 없습니다

<script></script>

# ㅋㅋㅋ defer 속성은 페이지가 로드될 때까지 스크립트 실행을 지연할지 여부를 지정합니다.

如果是多个脚本，该方法可以确保所有设置了defer属性的脚本按顺序执行

如果脚本不会改变文档的内容，可将defer属性加入到script标签中，以便加快处理文档的速度

③动态创建script标签
在还没定义defer和async前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中,具体代码如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}

2、异步加载的区别

1)defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行

2)async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

其中蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

三、利用浏览器缓存

对于web应用来说，缓存是提升页面性能同时减少服务器压力的利器。

浏览器缓存类型

1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache；

相关的header:

Expires ：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。它的值为一个绝对时间的GMT格式的时间字符串， 比如Expires:Thu,21 Jan 2018 23:39:02 GMT

Cache-Control ：这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示。当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。比如Cache-Control:max-age=300，

简单概括：其实这两者差别不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容，那我们如何获知服务器端内容较客户端是否已经发生了更新呢？此时我们需要协商缓存策略。

2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；另外协商缓存需要与cache-control共同使用。

相关的header:

①Last-Modified和If-Modified-Since：当第一次请求资源时，服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端。

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

客户端会为资源标记上该信息，下次再次请求时，会把该信息附带在请求报文中一并带给服务器去做检查，若传递的时间值与服务器上该资源最终修改时间是一致的，则说明该资源没有被修改过，直接返回304状态码，内容为空，这样就节省了传输数据量 。如果两个时间不一致，则服务器会发回该资源并返回200状态码，和第一次请求时类似。这样保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。一个304响应比一个静态资源通常小得多，这样就节省了网络带宽。

但last-modified 存在一些缺点：

Ⅰ.某些服务端不能获取精确的修改时间

Ⅱ.文件修改时间改了，但文件内容却没有变

既然根据文件修改时间来决定是否缓存尚有不足，能否可以直接根据文件内容是否修改来决定缓存策略？----ETag和If-None-Match

②ETag 및 If-None-Match: Etag는 리소스가 마지막으로 로드되었을 때 서버에서 반환된 응답 헤더입니다. 리소스가 변경되는 한 Etag는 다시 생성됩니다. 브라우저가 다음에 리소스를 로드하고 서버에 요청을 보낼 때, 서버는 요청 헤더의 If-None-Match에 마지막으로 반환된 Etag 값을 넣습니다. 서버는 보낸 If-None-Match만 비교하면 됩니다. 리소스의 ETag가 일관성이 있는지 여부를 사용하여 클라이언트를 기준으로 리소스가 수정되었는지 확인할 수 있습니다. 서버가 ETag가 일치하지 않는 것을 발견하면 일반 GET 200 반환 패킷 형식으로 새 리소스(새 ETag 포함)를 클라이언트에 직접 보냅니다. ETag가 일치하면 직접 304를 반환합니다. 클라이언트에게 직접 알리십시오. 로컬 캐시를 사용하십시오.

둘의 비교:
우선 정확성 측면에서 Etag가 Last-Modified보다 낫습니다. Last-Modified의 시간 단위는 초입니다. 파일이 1초 내에 여러 번 변경되면 Last-Modified는 실제로 수정 사항을 반영하지 않지만, 로드 밸런싱된 서버인 경우 Etag는 정확성을 보장하기 위해 매번 변경됩니다. , 각 서버에서 생성된 Last-Modified도 일관성이 없을 수 있습니다.
둘째, 성능 측면에서 Etag는 Last-Modified보다 열등합니다. 결국 Last-Modified는 시간만 기록하면 되지만 Etag는 서버가 알고리즘을 통해 해시 값을 계산해야 합니다.
셋째, 우선순위 측면에서 서버 확인은 Etag

캐싱 메커니즘

강제 캐싱(Expires 및 Cache-Control)이 적용되는 경우 캐시가 사용됩니다. 그렇지 않은 경우 캐시가 직접 사용됩니다. 유효한 경우 협상 캐싱(Last-Modified/If-Modified-Since 및 Etag/If-None-Match)이 사용 여부를 서버에서 결정합니다. 협상 캐시가 유효하지 않으면 요청을 나타내는 캐시가 유효하지 않으며 요청이 다시 획득됩니다. 결과가 적용되면 304가 반환되고 캐시가 계속됩니다. 사용됩니다. 주요 프로세스는 다음과 같습니다.

사용자 행동이 브라우저 캐시에 미치는 영향

1. 주소 표시줄 액세스 및 링크 점프는 일반적인 사용자 행동이며 브라우저 캐시 메커니즘

2.F5 새로 고침을 실행합니다. , 브라우저는 max-age=0으로 설정하고 강력한 캐시 판단을 건너뛰고 협상된 캐시 판단을 수행합니다.

3.ctrl+F5 새로 고침, 강력한 캐시 및 협상된 캐시를 건너뛰고 서버에서 직접 리소스를 가져옵니다.

캐싱 메커니즘에 대해 더 알고 싶다면

브라우저의 캐싱 메커니즘을 자세히 이해하려면 여기를 클릭하세요

4. CDN을 사용하세요

대규모 웹 애플리케이션의 속도 추구는 단지 사용하는 데서 끝나지 않습니다. 브라우저 캐시는 항상 2차 액세스 속도를 향상시키기 위한 것이기 때문에 첫 번째 액세스를 가속화하려면 가장 일반적인 방법은 CDN(Content Delivery Network, 콘텐츠 배포 네트워크) 가속입니다. .

사용자와 매우 가까운 동일한 네트워크 사업자의 CDN 노드에 정적 리소스(예: javascript, css, 이미지 등)를 캐싱함으로써 사용자의 액세스 속도를 향상시킬 수 있을 뿐만 아니라 서버의 대역폭 소비도 절약할 수 있습니다. 그리고 부하를 줄이세요.

CDN은 어떻게 가속화를 달성하나요?

실제로 이는 전국 여러 지역에 컴퓨팅 노드를 배포하는 CDN 서비스 제공업체입니다. CDN 가속은 웹사이트의 콘텐츠를 네트워크 가장자리에 캐시합니다. 다른 지역의 사용자는 동일한 네트워크 회선의 CDN 노드에 액세스합니다. 요청이 도달하면 CDN 노드가 설치된 후 노드는 해당 콘텐츠 캐시가 유효한지 확인하고 캐시된 콘텐츠에 즉시 응답하므로 응답 속도가 빨라집니다. CDN 노드의 캐시에 장애가 발생하면 서비스 구성에 따라 당사의 콘텐츠 소스 서버로 이동하여 사용자에 대한 최신 리소스 응답을 얻고, 후속 사용자에게 응답하기 위해 콘텐츠를 캐시합니다.

따라서 한 지역의 한 사용자가 먼저 리소스를 로드하고 CDN에 캐시를 설정하면 해당 지역의 다른 후속 사용자가 이 혜택을 누릴 수 있습니다

.

5. 사전 확인된 DNS

리소스 사전 로드는 특정 리소스가 향후 사용될 수 있음을 브라우저에 미리 알리는 데 사용할 수 있는 또 다른 성능 최적화 기술입니다.

DNS 사전 확인을 사용하여 나중에 특정 URL에서 리소스를 얻을 수 있음을 브라우저에 알립니다. 브라우저가 실제로 이 도메인의 리소스를 사용하면 DNS 확인이 최대한 빨리 완료될 수 있습니다. 예를 들어, 나중에 example.com에서 이미지나 오디오 리소스를 얻을 수 있다면 문서 상단의

태그에 다음 콘텐츠를 추가할 수 있습니다.

<link>

当我们从该 URL 请求一个资源时，就不再需要等待 DNS 的解析过程。该技术对使用第三方资源特别有用。通过简单的一行代码就可以告知那些兼容的浏览器进行 DNS 预解析，这意味着当浏览器真正请求该域中的某个资源时，DNS 的解析就已经完成了,从而节省了宝贵的时间。
另外需要注意的是，浏览器会对a标签的href自动启用DNS Prefetching，所以a标签里包含的域名不需要在head中手动设置link。但是在HTTPS下不起作用，需要meta来强制开启功能。这个限制的原因是防止窃听者根据DNS Prefetching推断显示在HTTPS页面中超链接的主机名。下面这句话作用是强制打开a标签域名解析

<meta>

위 내용은 페이지 성능 최적화 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!