2018년 4월 23일 월요일

자바스크립트 성능개선 참고



High Performance JavaScript 2011 from Nicholas Zakas
https://www.slideshare.net/nzakas/high-performance-javascript-2011
자바 스크립트 속도 개선.

1.필요한 시점에 동적으로 파일을 로딩한다. 으잉 ? 진짜로 ?
만일 바로 태그에 넣으면 로딩되는 시간까지 렌더링이 기다리지만
아래처럼하면, 일단 html 표시됨,.
77 페이지 참고.
<script>
var script = document.createElement("script"),body;
script.type="text/javascrpit"
scrpit.src= "foo.js"
body.insertBefore(script,body.firstChild)
</script>

2.defer 를 사용하면 일단 다운로드 하고 UI 업데이트 될때 실행함.
<script defer src="ff.js">>

3.for 문에서 append 쓰는 reflow 가 발생.
-detach, display, decumentFragment 를 사용해

4.style 을 각각주면 repaint 가 발생
모아서 한번에 줄수 있또록.



성능 덕후를 위한 javascript 패턴
https://joshuajangblog.wordpress.com/2016/11/21/javascript-coding-pattern-for-junior-web-developer/

0 comments:

댓글 쓰기