加载html中的静态资源
其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到、处理并返回http请求,浏览器得到返回http请求.
浏览器渲染页面的过程
- 根据HTML 结构生成DOM Tree
- 根据CSS 生成 CSSOM
- 将DOM和CSSOM结合生成RenderTree
- 浏览器根据RenderTree开始渲染和展示
- 遇到<script> 时,会执行并阻塞渲染
window.onload // 页面的全部资源全部渲染完
documnet.addEventListener('DOMContentLoaded',function(){
// dom 渲染完即可执行,此时图片和视频可能§§还没加载完
})
性能优化
原则
多使用内存、缓存或者其他方法减少CPU计算、减少网络请求
解决
加载资源优化
- 静态资源的压缩合并(webpack 构建工具)
- 静态资源缓存(内容改变,链接名字才会改变)
- 使用CDN让资源加载更快(内容分发网络)
- 使用SSR后端渲染,数据直接输出到html中(例如react 的renderToString)
渲染优化
CSS放前面,JS放后面
懒加载(图片懒加载、下拉加载更多)
<img src="preview.png" date-realsrc="abc.png"> //date-realsrc 真正的图片
<script type="text/javascript">
var img1=document.getElementsByTagName('img')[0];
img1.src=img1.getAttribute('date-realsrc')
</script>
减少dom查询,对dom查询做缓存
for 每次循环都需要dom查询 document.getElementsByTagName('img')
如果var domList = document.getElementsByTagName('img');只要一次dom查询
减少dom操作,多个操作尽量合并到一起
var frag = document.createDocumentFragment();不属于主dom中,通常用于片段的处理
案例:
let ul = document.querySelector(`[data-uid="ul"]`),
docfrag = document.createDocumentFragment(); const browserList = [
"Internet Explorer",
"Mozilla Firefox",
"Safari",
"Chrome",
"Opera"
]; browserList.forEach((e) => {
let li = document.createElement("li");
li.textContent = e;
docfrag.appendChild(li);
});
ul.appendChild(docfrag);
事件节流
var searchTimeout = null;
$('#input').on('keyup', function(event) {
//每次keyup时直接取消上次计时器，只有当keyup超过100ms时才执行handler
clearTimeout(searchTimeout);
searchTimeout = setTimeout(function() {
handler();
}, 100);
});
尽早执行操作(DOMContentLoaded)
window.addEventListener('load',function(){
// 页面的全部资源全部渲染完
............
})
documnet.addEventListener('DOMContentLoaded',function(){
.....
// dom 渲染完即可执行,此时图片和视频可能§§还没加载完
})