728x90
꼭 CSS, JS를 항상 import 해야할까??
안녕하세요 프론트엔드개발자 웹코기입니다.
프로젝트 규모가 커지다보면 css, js 파일의 개수가 많아지게 되는데요.
프로젝트의 페이지를 하나씩 열때마다 모든 css, js가 읽히는 것이 너무 비효율적이라고 생각했습니다.
해당 페이지에 들어갔는데 그 페이지에 필요없는 코드도 읽어버리면 그만큼 속도가 느려지게 될테니까요...!!
react와 같은 프론트엔드 프레임워크를 사용하면 이 문제가 자연스럽게 해결되겠지만 ...
그렇지 않은 경우에는
1) <head>태그안에 마냥 다 집어넣어버리거나,
2) 해당페이지 파일안에 <script>또는 <link> 구문을 넣어 import를 하는 방법을 사용해야 하는데
2번 방법을 사용하게 되면 브라우저가 DOM트리를 다시 짜야해서 속도가 느려지게 됩니다. (제가 쓰려는 방법도 똑같을지도 ㅎ...)
또한 흩어진 script, link파일이 여기저기에 붙어있는 것이 관리상 어렵고 지저분하게 보이기도 합니다.
script, link에 조건걸기
그래서 제가 생각한 해결책은 !!
if문으로 조건을 걸고, 그 조건이 통과가 되면 script,link파일을 만들어서 넣어주는 것입니다.
<head>
<title>홈페이지 제목 </title>
<link rel="stylesheet" href="/css/common.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
...
<script>
// 경로가 /chatting 인 폴더안의 파일에만 적용하고 싶다...!!
if( location.pathname.split('/')[1]=='chatting' ){
// css
var link = document.createElement('link');
link.href = '/chatting/css/chatting.css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
// js
var srcArr = [
'/chatting/js/chatting.js',
'/chatting/js/ws.js',
'/chatting/js/ws_message.js',
'/chatting/js/ws_utility.js',
'/chatting/js/ws_action.js'
];
srcArr.forEach(function(e){
var sc = document.createElement('script');
sc.src = e;
sc.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(sc);
});
}
</script>
</head>
<body>
...
대신 이렇게 할 경우, 내부 함수를 즉시 사용하려면 DOM이 모두 준비됐을 때 실행해야 먹힙니다.
따라서 함수를 사용하려면 window.load안에다가 꼭 넣어줍시다.
$(document).ready(function(){
// 여기에선 먹히지 않음..
});
$(window).load(function(){
// 여기에 넣어야 동작 !
});
728x90
'Language > HTML' 카테고리의 다른 글
| google material-icons 홈페이지에 적용하기 (outlined, filed, Rounded, sharp, tow tone) (0) | 2021.06.04 |
|---|---|
| HTML 특수문자코드표(2) (0) | 2018.07.04 |
| HTML 특수문자코드표 (0) | 2018.07.03 |
| [table] colgroup 속성 (span, width 사용하기) (0) | 2018.07.02 |
| [table] thead, tbody, tfoot 어떻게 써야 할까? (1) | 2018.07.01 |