프런트엔드 성능

프런트엔드 개발에는 다음과 같은 여러 가지 성능 문제가 있습니다.
1. 연결 프로세스
1).브라우저에 웹 주소를 입력하고 리턴을 누르십시오.
2).브라우저가 이 URL과 연결을 시도합니다.성공하면 셋, 성공하지 못하면 끝난다.
3).브라우저가 서버에 요청 메시지를 보냅니다.
4).서버가 요청을 받은 후 응답을 되돌려줍니다.
5).브라우저는 서버에서 응답을 받은 후 데이터를 해석하여 실행합니다.
우리가 요청한 네트워크 파일에 많은 그림이 필요할 때 브라우저는 서버와 자주 연결되고 연결을 해제합니다. 이것은 시간이 많이 걸리고 성능 부담이 발생합니다.http://write.blog.csdn.net/postedit/39005461
네트워크 속도가 같은 조건에서 100k의 그림을 다운로드하는 것은 50l의 두 개의 그림을 다운로드하는 것보다 빠르다. 요청 http는 시간이 많이 걸리는 과정이기 때문에 http 요청을 줄여야 한다.
해결: csssprites, cssjs 파일 통합, 파일 압축,lazyload.
그 중에서 lazyload는 다음과 같이 말할 필요가 있다. lazyload는 웹 페이지를 처음 불러올 때 많은 js를 사용하지 않았다. 사용하지 않는 js를 잠시 불러오지 않으면 다운로드 시간을 단축하고 웹 페이지의 렌더링 효율을 높일 수 있다.lazyload.js(urls, fn, scope); lazyload 사용법 참조 가능
2.dom에 대한 접근을 줄인다.조회할 때 그 값을 국부 변수에 부여할 수 있습니다.

// ：
$("#mydom").click(function(){...});
$("#mydom").mouseenter(function(){...});
$("#mydom").hover(function(){...});
...
// dom
// 
var mydom = $('#mydom');//  dom
mydom.click.....
mydom.mouseenter......
mydom.hover.....

3. json을 사용하여 데이터 교환을 한다.이것은 자바스크립트의 원본 형식입니다. 처리할 때 다른utility의 지원이 필요하지 않습니다.
4. 캐시
개념: 서버에서 빈번하게 접근하여 만들어진 임시 메모리를 피한다.그것의 접근 속도는 매우 빠르지만 용량은 좀 적을 것이다.(공간 교환)
전단 캐시는 일반적으로 사용하는 cdn 기술로 이해할 수 있다. squid 등을 이용하여 전단 버퍼 기술을 하는데 주로 정적 파일 형식, 예를 들어 그림, css, js, html 등 정적 파일을 대상으로 한다.폐단은 수정 후 캐시가 업데이트되지 않아 페이지가 변하지 않는다는 것이다.
5. 스타일시트를 위쪽에, 스크립트를 페이지 아래쪽에 배치하고 외부 JavaScript와 CSS를 최대한 사용합니다.
스타일시트: 아래쪽에 놓으면 많은 브라우저 (특히 IE 브라우저) 가 스타일시트를 로드할 때까지 모든 내용을 표시하지 못하게 합니다.사용자는 공백이 있는 페이지를 보고 모든 불러오기가 끝날 때까지 기다렸다가 갑자기 많은 내용이 그의 앞에 나타날 수도 있다.이것은 우호적이지 않다.그리고 css 불러오기가 끝난 후에 페이지를 다시 렌더링해야 할 수도 있습니다.
스크립트: 스크립트를 페이지 밑에 놓으면 페이지가 불러오는 병행 속도를 높일 수 있습니다.(또는 머리에 놓고 defer 속성을 설정하지만 모든 브라우저가 지원하는 것은 아닙니다.) 스크립트에서 때때로dom를 찾아야 하지만 머리에 놓으면 페이지가 구성되지 않아서dom가 존재하지 않으면 오류가 발생합니다.
6. CSS 표현식 사용하지 않기 (Expression)
7. @import 8 대신 사용하기필터 사용하지 않기 9.중복 스크립트 제거
이 문장은 정말 전면적이니 이것을 보는 것이 좋겠다.mark 하나