HTML5의 성능 최적화에 대한 자세한 설명-HTML 튜토리얼-php.cn

HTML5 성능 최적화

--다시 그리기 감소

HTML 페이지가 표시된 후 페이지 요소를 동적으로 변경하거나 CSS 스타일을 조정하면 브라우저가 다시 그려지므로 성능 손실은 동적 변경 범위에 따라 달라집니다. : 요소 색상과 같은 정보를 변경하면 해당 요소만 다시 그려집니다. 노드를 추가 또는 삭제하거나 노드 위치를 조정하면 해당 형제 노드도 다시 그려집니다.

다시 그리기를 줄이는 것은 다시 그리는 것이 아니라 다시 그리기 범위에 주의를 기울이는 것을 의미합니다. ① DOM 요소가 깊게 변경될수록 영향이 작아지므로 더 깊은 노드 변경을 시도하세요. ② 여러 변경 사항을 일부에 병합해 보세요. DOM 스타일을 함께 수정합니다.

태그의 배경색, 너비, 색상을 변경하는 것을 예로 들어보겠습니다.

<a href="javascript:void(0);" id="example">传统的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.style.backgroundColor = "red"; 
 example.style.width = "200px"; 
 example.style.color = "white"; 
 } 
</script>

로그인 후 복사

위 내용은 3번 다시 그려지는데, 자바스크립트가 아닌 CSS를 통해 여러번 실행하면 1번만 다시 그려집니다.

<style> 
 .dblClick { 
 width: 200px; 
 background: red; 
 color: white; 
 } 
</style> 
<a href="javascript:;" id="example">CSS优化的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.className = "dblClick"; 
 } 
</script>

로그인 후 복사

스크립트 차단 로딩 방지

브라우저가 일반 스크립트 태그를 구문 분석할 때 구문 분석 및 실행 전에 스크립트가 다운로드될 때까지 기다려야 하며 후속 HTML 코드는 기다릴 수만 있습니다. CSS 파일 소개는 HTML 렌더링에 필요한 요소이므로 헤더에 배치해야 합니다. 로딩이 막히는 것을 방지하려면 스크립트를 문서 끝에 배치하고 CSS를 헤드에 배치해야 합니다!

<head>
<link rel="stylesheet" href="common.css">......<script src="example.js"></script>
</body>

로그인 후 복사

--깊은 수준의 노드 중첩을 피하세요

깊게 중첩된 노드는 초기 구성 중에 더 많은 메모리를 필요로 하는 경우가 많으며, 노드를 탐색할 때 속도가 느려지는데, 이는 탐색과 다릅니다. 메커니즘과 관련이 있습니다. 브라우저는 DOM 문서를 구성합니다. 브라우저는 전체 HTML 문서의 구조를 DOM "트리" 구조로 저장합니다. 문서 노드의 중첩 수준이 깊어지면 구성되는 DOM 트리의 수준도 깊어집니다.

다음 코드는

또는 태그 중 하나를 완전히 제거할 수 있습니다.

<p>
  <span>
    <label>嵌套</label>
  </span>
</p>

로그인 후 복사

페이지 캐시

일반적으로 캐시를 설정하지 않으면 페이지를 새로 고칠 때마다 서버의 파일을 다시 읽습니다. 그러나 캐시를 설정하면 모든 파일을 로컬에서 얻을 수 있습니다. 분명히 매우 편리합니다. 페이지 효율성이 크게 향상됩니다.

페이지 헤더에서 만료 시간을 설정하여 페이지 만료 시간을 정의할 수 있습니다. 만료 시간을 더 길게 설정하면 "영구적인" 캐싱을 달성할 수 있습니다.

<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

로그인 후 복사

물론 프로젝트 코드가 변경되면 클라이언트가 파일을 캐시하기 때문에 최신 파일을 얻을 수 없고 이로 인해 필연적으로 표시 오류가 발생합니다. 이 문제에 대한 해결책은 링크된 파일에 타임스탬프를 추가하는 것입니다. 타임스탬프가 변경되면 브라우저는 해당 파일을 새 파일로 간주하고 서버에 최신 파일을 요청합니다.

<script src="example2014-6-17.js">
</script>//如果是JSP，可以用EL表达式来取时间戳信息，这样管理更加方便
<script src="example${your time param}.js">
</script>//或者这样的写法更优秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>

로그인 후 복사

병합 파일 압축

자바스크립트 파일, CSS 파일, 이미지 파일 등 요청 데이터가 포함된 모든 파일은 최대한 압축해야 하며, 특히 고화질 요구사항이 없는 경우에는 더욱 그렇습니다. 다시 압축할 수 있습니다. 많은 양의 대용량 파일은 작은 크기의 파일 수보다 빠르므로 때로는 여러 JS 파일과 여러 CSS 파일을 함께 병합하는 것을 고려할 수 있습니다.

HTML 문서의 크기를 줄이는 것 외에도 다음과 같은 방법을 채택할 수도 있습니다.

① HTM 문서의 실행 결과에 영향을 주지 않는 공백, 빈 줄 및 주석을 삭제합니다.

② 테이블 레이아웃 방지

③ HTML5

사용 -HTML+CSS3+JavaScript의 의무

세 가지 요소 각각의 세 가지 요소가 고성능 웹 페이지를 만들도록 하세요. HTML은 페이지의 소스이자 콘텐츠의 소스입니다. CSS 및 JavaScript와 상호 작용할 수 있으며 CSS3는 프레젠테이션의 대가라고 할 수 있으며 점점 더 강력해지는 CSS는 그라데이션, 움직임 및 기타 동적 효과와 같은 많은 동적 작업을 수행할 수 있습니다. 브라우저는 동적 효과 표현을 완료하기 위해 js에 의존했지만 이제는 CSS js 작업도 완료할 수 있으므로 작업을 css에 맡기면 더 나은 성능을 얻을 수 있습니다. (좀 큽니다.)

--CSS Sprites를 구현하기 위한 이미지 병합

이미지 병합은 실제로 웹 페이지의 일부 배경 이미지를 이미지 파일로 통합한 다음 CSS "Background-image", " background-repeat"와 "ground-position"은 배경의 위치를 지정하는 데 사용됩니다. Background-position은 숫자를 사용하여 배경 이미지의 위치를 정확하게 찾을 수 있습니다.到 한 페이지에서는 여러 아이콘을 사용해야 합니다. 여러 아이콘을 그래프로 결합한 다음 사진 요청을 한 번만 보내고 CSS 위치 지정을 통해 분할 아이콘을 찾으면 됩니다.

--Iframe을 사용하지 마세요

使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，在页面加载过程中iframe元素还会阻塞父文档onload事件的触发。并且iframe是html标签中最消耗资源的标签，它的开销比p、SCRIPT、STYLE等DOM高1~2个数量级。

避免onload事件被阻塞，可使用JavaScript动态的加载iframe元素或动态设置iframe的src属性（但其仅在高级浏览器IE9及以上有效）。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

로그인 후 복사

--多域名请求

一般来说，浏览器对于相同域名的图片，最多用2-4个线程并行下载（不同浏览器的并发下载数是不同的）。而相同域名的其他图片，则要等到其他图片下载完后才会开始下载。

有时候，图片数据太多，一些公司的解决方法是将图片数据分到多个域名的服务器上，这在一方面是将服务器的请求压力分到多个硬件服务器上，另一方面，是利用了浏览器的特性。（大家可以去新浪、腾讯门户网站查看，这些大型站点同一页面加载的图片可能由多个站点提供）

注：一个HTML请求的域名也不要太多（2~3个差不多），多了可能造成不同服务器连接时间差异，反而影响速度。

--避免空链接属性

如这样的设置方式是非常不可取的，即使链接为空，在旧的浏览器也会以固定步骤发送请求信息。

另外也不可取，最好的方式是在链接中加一个空的js代码

--使用图像的BASE64编码

base64是一串字符串，他可以代表一个图片的所有信息，也就是可以通过（S表示一串base64码）来显示图片，这种方式不需要再向服务器发送请求，完全由浏览器解析成图片。

目前高级浏览器都支持此功能，但要注意两点：①低版本浏览器（如IE7）不支持；②base64字符串长度随图片的大小及复杂度成正比，base64也像URL一样，也有超出长度的情况（在IE8下很常见）。所以要根据情况来使用。

--显式设置图片的宽高

如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这会消耗额外时间。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

로그인 후 복사

--显式指定文档字符集

如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

로그인 후 복사

--渐进式增强设计

渐进式增强设计的通俗解释就是：首先写一段满足所有浏览器的基本样式，再在后面针对不同高级浏览器编写更漂亮的样式

如下代码，所有浏览器都支持background-color: #2067f5;满足了浏览器基本现实需求，而后面的background-image: -webkit-gradient等则为不同高级浏览器使用，只要浏览器识别就能执行这段代码（不识别，CSS也不会报错只会直接忽略）。

<p class="someClass"></p> 
.someClass 
{ width: 100px; 
 height: 100px; 
 background-color: #2067f5; 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5), 
to(#154096)); 
 background-image: -webkit-linear-gradient(top, #2067f5, #154096); 
 background-image: -moz-linear-gradient(top, #2067f5, #154096); 
 background-image: -ms-linear-gradient(top, #2067f5, #154096); 
 background-image: -o-linear-gradient(top, #2067f5, #154096); 
 background-image: linear-gradient(to bottom, #2067f5, #154096); 
}

로그인 후 복사

--懒加载与预加载

预加载和懒加载，是一种改善用户体验的策略，它实际上并不能提高程序性能，但是却可以明显改善用户体验或减轻服务器压力。

预加载表示当前用户在请求到需要的数据之后，页面自动预加载下一次用户可能要看的数据，这样用户下一次操作的时候就立刻呈现，依次类推。

懒加载表示用户请求什么再显示什么，如果一个请求要响应的时间非常长，就不推荐懒加载。

--Flush机制

페이지가 매우 크고 콘텐츠가 많이 포함된 경우 플러시 형식으로 페이지에 부분적으로 반환될 수 있습니다. 이렇게 하면 사용자에게 작업 중이며 콘텐츠의 일부를 표시하는 것이 기다리는 것보다 훨씬 낫다는 것을 알 수 있습니다. 빈 화면으로 오랜 시간을 보냈습니다. Java 웹 기술에서 Flush 구현은 매우 간단합니다. 로드된 콘텐츠를 클라이언트에 다시 작성하려면 HttpServletResponse.getWriter 출력 스트림의 플러시 메소드를 호출하기만 하면 됩니다.

이 방법은 반환되는 데이터가 많고 요청 시간이 특히 긴 상황에만 적합합니다. 일반 데이터의 경우 모든 데이터를 일반적인 실시간으로 반환하는 것이 가장 좋습니다. 이 구현 방법은 실제로 브라우저 렌더링 시간과 전체 사용자 대기 시간을 늘리지만 사용자 경험 측면에서는 더 좋습니다.

성능 서버 최적화

--CDN 메커니즘

소위 CDN은 지능형 라우팅 및 트래픽 관리 기술을 사용하여 적시에 감지하고 방문자에게 가장 빠른 응답을 제공하는 콘텐츠 배포 네트워크입니다. 가속 노드 , 방문자의 요청을 콘텐츠 서비스를 제공하는 가속 노드로 보냅니다. 대중적으로 말하면, 청두(브라우저)의 베이징 판매자(서버)로부터 제품을 구매했습니다. 베이징 판매자는 특급 배송(CDN 서비스)을 통해 소포를 보냈습니다. CND를 사용한 특급 배송은 이 배송 방법이 가장 빠르기 때문에 직항을 선택합니다.

물론 CDN을 사용할 때 주의할 점이 두 가지 있습니다.

1. CDN 가속 서비스는 매우 비쌉니다. 귀하의 웹 사이트와 같은 지역 웹 사이트의 경우 특정 지역 또는 근거리 네트워크에만 액세스 할 수 있습니다. 지역 네트워크가 매우 가깝기 때문에 CDN 가속이 필요하지 않습니다.

--HTTP 프로토콜의 합리적인 사용

브라우저 캐싱을 통한 성능 향상은 모두가 잘 알고 있지만, 브라우저의 캐시 만료 시간, 캐시 삭제, 어떤 페이지를 캐시할 수 있는지 등을 모르는 사람들이 많습니다. HTTP 프로토콜에 익숙하다면 브라우저를 쉽게 제어할 수 있습니다. 더 읽어보기: HTTP 프로토콜에 대한 심층적인 이해

--정적 콘텐츠와 동적 콘텐츠의 분리

소위 동적 콘텐츠와 정적 콘텐츠의 분리는 정적 콘텐츠와 동적 콘텐츠를 웹 애플리케이션에 배치하는 것입니다. 각각 다른 웹 서버를 사용하고 동적 콘텐츠를 타겟 방식으로 처리하고 정적 콘텐츠를 처리하여 성능을 향상시킵니다. HTML에 여러 도메인 이름이 있으면 데이터 파일에 대한 요청이 증가한다는 것을 알고 있습니다. Tomcat 서버는 정적 및 동시성 문제를 처리하는 데 상대적으로 취약하므로 사전 정적 및 동적 분리 방법은 일반적으로 Apache+Tomcat, Nginx+Tomcat입니다. , 등. Apache+Tomcat을 예로 들면, 작동 메커니즘은 다음과 같습니다. 페이지 요청이 먼저 Apache로 전송된 다음 Apache는 요청된 정보가 정적인지 동적인지 분석하여 로컬에서 정적 처리를 수행하고 동적 처리를 Apache로 넘겨줍니다. 수코양이.

이것은 실제로 로드 밸런싱의 프로토타입입니다. 이 구현에서는 개발자가 특별한 개발을 수행할 필요가 없습니다. 이 파일이 서버에 전달될 수 있습니다. Apache 또는 Tomcat Obtained에서 개발자는 전혀 주의를 기울일 필요가 없습니다.

--HTTP 영구 연결

영구 연결(Keep-Alive)은 TCP 연결 방식이라고도 하며 다음에 연결할 때 연결이 캐시됩니다. 동일한 서버, 캐시 연결이 재사용됩니다. HTTP의 상태 비저장 특성은 긴 연결에 속하지 않는다는 것을 의미하지만 HTTP/1.1은 긴 연결을 지원합니다(그러나 긴 연결 기능을 지원하려면 브라우저와 서버 모두에 의존해야 합니다). 긴 연결은 "Breakpoint Download"입니다.

브라우저는 요청 헤더에 Connection:Keep-Alive를 추가하여 서버에 "긴 연결을 지원합니다. 지원하는 경우 서버가 긴 연결을 지원하면 나와 긴 연결을 설정하세요."라고 알려줍니다. 헤더에 "Connection:Keep-Alive"를 추가하여 브라우저에 "지원하므로 긴 연결을 설정하겠습니다"라고 알려줍니다. 서버는 Keep-Alive:timeout=..., max=... 헤더를 통해 긴 연결 만료 시간을 브라우저에 알릴 수도 있습니다. 긴 연결을 구성하려면 일반적으로 서버 지원 설정이 필요합니다. 테스트 데이터에 따르면 긴 연결을 사용하는 경우와 사용하지 않는 경우의 성능을 비교하면 Tomcat이 maxKeepAliveRequests를 50으로 구성하면 효율성이 거의 5배 증가하는 것으로 나타났습니다.

--GZIP 압축 기술

HTTP 프로토콜은 GZIP 압축 형식을 지원합니다. 서버에서 반환된 HTML 정보 헤더에 Content-Encoding:gzip이 포함되어 있으면 응답 데이터가 GZIP 형식으로 압축되었음을 브라우저에 알려줍니다. . , 브라우저는 데이터를 얻은 후 압축 해제 작업을 수행해야 하며, 이는 서버가 데이터를 전송해야 하는 압력을 어느 정도 줄여줍니다.

很多服务器已经支持通过配置来自动将HTML信息压缩成GZIP，比如tomcat、又比如很火的Nginx。如果无法配置服务器级别的GZIP压缩机制，可以改为程序压缩。

 // 监视对 gzipCategory 文件夹的请求
 @WebFilter(urlPatterns = { "/gzipCategory/*" }) 
 public class GZIPFilter implements Filter { 

 @Override 
 public void doFilter(ServletRequest request, ServletResponse response, 
 FilterChain chain) throws IOException, ServletException { 
 String parameter = request.getParameter("gzip"); 
 // 判断是否包含了 Accept-Encoding 请求头部
 HttpServletRequest s = (HttpServletRequest)request; 
 String header = s.getHeader("Accept-Encoding"); 
 //"1".equals(parameter) 只是为了控制，如果传入 gzip=1，才执行压缩，目的是测试用
 if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) { 
 HttpServletResponse resp = (HttpServletResponse) response; 
 final ByteArrayOutputStream buffer = new ByteArrayOutputStream(); 

 HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper( 
 resp) { 

 @Override 
 public PrintWriter getWriter() throws IOException { 
 return new PrintWriter(new OutputStreamWriter(buffer, 
 getCharacterEncoding())); 
 } 

 @Override 
 public ServletOutputStream getOutputStream() throws IOException { 
 return new ServletOutputStream() { 

 @Override 
 public void write(int b) throws IOException { 
 buffer.write(b); 
 } 
 }; 
 } 

 }; 

 chain.doFilter(request, hsrw); 
 byte[] gzipData = gzip(buffer.toByteArray()); 
 resp.addHeader("Content-Encoding", "gzip"); 
 resp.setContentLength(gzipData.length); 
 ServletOutputStream output = response.getOutputStream(); 
 output.write(gzipData); 
 output.flush(); 
 } else { 
 chain.doFilter(request, response); 
 } 
 } 
 // 用 GZIP 压缩字节数组
 private byte[] gzip(byte[] data) { 
 ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240); 
 GZIPOutputStream output = null; 
 try { 
 output = new GZIPOutputStream(byteOutput); 
 output.write(data); 
 } catch (IOException e) { 
 } finally { 
 try { 
 output.close(); 
 } catch (IOException e) { 
 } 
 } 
 return byteOutput.toByteArray(); 
 } 
……
 }

로그인 후 복사