JavaScript: Tối ưu hoá phân phối CSS
Giả sử bạn có một tập tin CSS.css và bạn tải tập tin này vào trang web (thiết lập liên kết tới trang web) bằng hình thức sau:
<link rel="stylesheet" href="CSS.css">
, thì hình thức này sẽ làm giảm tốc độ tải (load) nội dung trang web của bạn.
Cách khắc phục:
Bạn có thể khắc phục vấn đề trên để cải thiện tốc độ load trang web của bạn bằng cách đặt đoạn JavaScript sau đây vào thẻ <head>:
<script>
var cb = function(){
var l = document.createElement('link');
l.rel = 'stylesheet';
l.href = 'CSS.css';
var h = document.getElementsByTagName('head')[0];
h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf){
raf(cb);
}
else{
window.addEventListener('load', cb);
}
</script>