- 浏览器可以通过访问链接来得到页面的内容
- 通过绘制和渲染，显示出页面最终的样子
- 整个过程中，我们需要考虑什么问题
知识点
- 页面加载过程
- 性能优化
- 安全性
1、页面加载
题目
- 从输入url到得到html的详细过程
- DNS解析得到IP地址
- 向IP地址服务器发送HTTP请求
- 服务器收到处理并返回HTTP请求，浏览器收到html
- window.onload和DOMContentLoaded的区别
- window.onload页面的全部资源加载完才会执行，包括图片、视频等
- DOM渲染完即可执行，此时图片视频可能没有加载完
知识点
1、加载资源的形式
- 输入url（页面跳转）加载html
- 加载html中的静态资源
<script src="./static/jquery.js"></script>
2、加载一个资源的过程 - 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP对应的服务器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回的内容
3、浏览器渲染页面的过程 - 根据HTML生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合形成Render Tree
- 根据Render Tree开始渲染跟展示
- 遇到<script>时，会执行并阻塞渲染
2、性能优化
原则：
- 多使用内存、缓存或者其他方法
- 减少CPU计算、减少网络
从哪里入手：
- 加载页面和静态资源
- 页面渲染
加载资源优化
- 静态资源的压缩合并
- 静态资源缓存
- 使用CDN让资源加载更快
- 使用SSR（server side render）后端渲染，数据直接输出到HTML中
渲染优化
- CSS放前面，JS放后面
- 懒加载（图片懒加载、下拉加载更多）
<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script>
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc')
</script>
- 减少DOM查询，对DOM查询做缓存
//未缓存DOM查询
var i
for (i=0; i<document.getElementByTagName('p').length; i++){
//todo
}
//缓存DOM查询
var pList = document.getElementByTagName('p')；
var i;
for (i=0; i<pList.length; i++){
//todo
}
- 减少DOM操作，多个操作尽量合并在一起执行
var listNode = document.getElementById('list');
//要插入10个li标签
var frag = document.createDocumentFragment(); //记住这个API~
var x, li;
for(x = 0; x<10;x++){
li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li); //这里其实并不会执行DOM操作
}
listNode.appenChild(frag);
- 事件节流xxx修正为防抖
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function(){
if(timeoutId){
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function(){
//todo
}, 100);
})
- 尽早执行操作
window.addEventListener('load', function(){
//页面的全部资源加载完才会执行，包括图片、视频等
});
window.addEventListener('DOMContentLoaded', function(){
//DOM渲染完即可执行，此时图片视频可能没有加载完
});
