나는 1 년 이상 프론트 엔드 개발을 해왔으며 여전히 프론트 엔드에 대한 통찰력을 가지고 있습니다. 오늘 나는 당신과 공유 할 것입니다.
프론트 엔드 개발에는 다양한 강력한 도구가 없어야합니다. 예를 들어, 저는 Google 브라우저와 중장기 Fiddller를 사용하는 데 익숙합니다.
1 : 원래 상황
먼저 다음 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "default.aspx.cs"inherits = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head ID = "Head">
<제목> </title>
<link href = "styles/site.css"rel = "Stylesheet"type = "text/css"/>
<script src = "jquery/jquery-1.4.1.js"type = "text/javaScript"> </script>
<script src = "js/hello.js"type = "text/javaScript"> </script>
<script src = "js/world.js"type = "text/javaScript"> </script>
</head>
<body>
<img src = "1.jpg" />
</body>
</html>
프로그래머의 90%가 JS 파일을 헤드에 넣을 것으로 추정되지만이를 탐구 한 적이 있습니까? 많은 브라우저는 단일 스레드를 사용하여 "인터페이스 UI 업데이트"및 "JS 스크립트 처리"를 수행합니다.
즉, 실행 엔진이 "<cript>"를 만나면 페이지의 다운로드 및 렌더링은 <cript>의 실행이 완료되기를 기다려야합니다. 그런 다음 잠긴 페이지를보고 사용자에게 슬픈 일입니다.
현재 사용자는 아마도 당신을 위해 꺼질 것입니다.
위의 폭포 다이어그램에서 우리는 두 가지 점을 볼 수 있습니다.
첫 번째:
3 개의 JS 파일이 병렬로 다운로드되지만 위의 이론에 따르면 JS는 하나씩 실행해야합니다. 그러나 IE8에서 Firefox 3.5 및 Chrome 2는 모두 JS의 병렬 다운로드를 구현합니다.
이것은 꽤 좋지만 여전히 사진과 같은 다른 리소스의 다운로드를 방해합니다.
두번째:
이미지 1.JPG의 다운로드는 JS 실행이 완료된 후 트리거되며, 위에서 언급 한 상황을 확인하고 이미지가로드되는 것을 방지합니다.
둘 : 첫 번째 단계는 최적화입니다
JS는 UI 렌더링을 방지하기 때문에 </body> 앞에 JS를 넣는 것을 고려할 수 있으므로 <cript> 이전의 HTML을 사용자에게 빈 페이지 대기를 볼 수 있도록 완벽하게 렌더링 할 수 있습니다.
고민 된 상황은 자연스럽게 우정을 증가시킵니다.
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "default.aspx.cs"inherits = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head ID = "Head">
<제목> </title>
<link href = "styles/site.css"rel = "Stylesheet"type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jquery/jquery-1.4.1.js"type = "text/javaScript"> </script>
<script src = "js/hello.js"type = "text/javaScript"> </script>
<script src = "js/world.js"type = "text/javaScript"> </script>
</body>
</html>
아래 그림은 1.JPG와 3 개의 JS가 거의 평행하게 다운로드되어 실행된다는 것을 보여줍니다. 시간은 위의 "469ms+"에서 "326ms"로 줄어 듭니다.
3 : 최적화의 두 번째 단계
위의 "폭포 다이어그램"을 살펴보면 모든 사람이 3 개의 JS 파일이 3 개의 "get"요청을했음을 알 수 있습니다. 모든 사람은 요청에 HTTP 헤더가 있어야한다는 것을 알고 있습니다.
따라서 시간이 걸리므로 우리가 채택한 솔루션은 자연스럽게 GET 요청을 줄입니다. 일반적으로 두 가지 옵션이 있습니다.
첫째 : 위의 "hello.js"및 "world.js"병합과 같은 JS 파일 병합이 병합됩니다.
둘째 : PHP의 Miniify와 같은 타사 도구를 사용하십시오.
두 번째 방법과 관련하여 Taobao는 많이 사용됩니다. 스크립트 중 하나를 살펴보고 3 개의 JS 파일을 적용합니다. 3 개의 GET 요청에서 1으로 변경합니다.
넷째 : 최적화의 세 번째 단계
JS 파일을 발 끝에 배치하든 3 개를 하나로 결합하든, 본질은 "차단 모드"이며, 이는 브라우저를 잠그는 것을 의미합니다. 웹 페이지가 점점 더 복잡해지면 점점 더 많은 JS 파일이 있거나
우리가 두통을 일으키는 것은 현재 JS 스크립트를로드하기 위해 "차단 모드 없음"을 옹호합니다.
추가 JS는 소위 "차단 없음"이지만주의를 기울여야하는 한 가지는 JS에 대한 요구 사항이 엄격한 순서인지 여부입니다.
첫째 : 주문 요구 사항이 없습니다. 예를 들어, "hello.js"및 "world.js"에 대한 주문 요구 사항이 없으면 jQuery를 사용하여 동적으로 추가 할 수 있습니다.
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "default.aspx.cs"inherits = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head ID = "Head">
<제목> </title>
<link href = "styles/site.css"rel = "Stylesheet"type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script src = "jquery/jquery-1.4.1.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
Window.onload = function () {
$ ( "#head"). Append ( "<script src = 'js/hello.js'type = 'text/javaScript'> <// script>")
$ ( "#head"). Append ( "<script src = 'js/world.js'type = 'text/javaScript'> <// script>");
}
</스크립트>
</body>
</html>
그림에서 볼 수 있듯이 "hello.js"와 "world.js"는 파란색 선에 나타납니다. 즉,이 두 JS가 DomContentLoad가 완료된 후로드되도록 트리거되어 페이지가 잠겨 있지 않습니다.
기다리다.
둘째 : 주문 요구 사항이 있습니다
주문을 받아야하는 이유는 무엇입니까? 위의 동적으로 추가 된 "2 JS"파일의 경우 IE 시리즈에서 Hello.js가 World.js보다 먼저 실행되도록 보장 할 수 없습니다.
서버 측에서 반환 한 순서대로 코드 만 실행합니다.
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "default.aspx.cs"inherits = "jsload.default" %>
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head ID = "Head">
<제목> </title>
<link href = "styles/site.css"rel = "Stylesheet"type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<script type = "text/javaScript">
함수로드 스크립트 (URL, 콜백) {
var script = document.createElement ( "스크립트");
script.type = "text/javaScript";
//즉
if (script.readystate) {
script.onreadyStateChange = function () {
if (script.readystate == "로드"|| script.readystate == "완료") {
script.onreadyStateChange = null;
콜백 ();
}
}
} 또 다른 {
// 비이
script.onload = function () {
콜백 ();
}
}
script.src = url;
document.getElementById ( "Head"). AppendChild (스크립트);
}
// 첫 번째 단계는 jQuery 클래스 라이브러리를로드하는 것입니다.
loadScript ( "jQuery/jQuery-1.4.1.js", function () {
// 두 번째 단계는 hello.js를로드하는 것입니다
loadScript ( "js/hello.js", function () {
// 세 번째 단계는 World.js를로드하는 것입니다
loadScript ( "js/world.js", function () {
});
});
});
</스크립트>
</body>
</html>
보시다시피, 페이지를 완전히로드하는 데 걸리는 시간은 실제로 약 310ms에 불과하므로 웹 페이지의 다운로드 및 친숙한 모양이 크게 향상됩니다.
당신은 또한 그가하는 일인 tencent.com을 확인할 수 있습니다.
그다지 유용하지 않습니까? 나는 여기서이 연구와 시험을하는 데 시간을 보냈습니다. 나는 당신이 당신의 마음에 그것을 볼 수 있기를 바랍니다. 결국, 이것은 또한 "Mahua Vine"회사의 솔루션이기도합니다. 참조하십시오.