运行环境介绍:
- 浏览器可以通过访问链接来得到页面内容
- 通过绘制和渲染,显示出页面的最终样子,有视觉效果的样子
- 整个过程中,我们要考虑什么问题 ? 如下:
问题
1.从输入url到得到HTML的详细过程
2.window.onload和DOMContentLoaded的区别
3.性能优化的几个示例
知识点
1: 页面加载过程
2: 性能优化
3: 安全性
1: 页面加载,渲染过程
- 加载资源的形式
- 输入url（或跳转页面）加载HTML //www.greatytc.com
- 加载 html 中的静态资源
<img src = 'loding.jpg'>
加载一个资源的过程
(从输入URL 到得到 html 的详细过程)浏览器根据 DNS 服务器解析得到与域名相对应的 IP 地址 (输入的域名会被解析成 IP的)
向这个 IP 的机器发送 http(s) 请求
服务器收到,处理并返回 http 请求(返回的可能是一个html页面,可能是一张图片...)
浏览器得到返回的内容
浏览器渲染页面的过程
根据 html 结构生成 DOM Tree
根据 css 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到
<script>时,会执行script代码并阻塞渲染script有权限改变dom结构补充:为什么把
script标签放到body后面呢? 1: 因为script标签会阻塞代码的渲染,放在下面不会阻塞上面一些代码的渲染,能让页面更快的出来,能提升性能; 2: 放在下面, script 代码能拿到上面所有的标签DOMContentLoaded 与window.onload区别
<body>
<p>test</p>
<p></p>
<p>test</p>
</body>
window.onloadListener('load',function(){
//页面的全部资源加载完后才会执行,包括图片视频等
})
window.onloadListener('load',function(){
// DOM 渲染完即开始执行,此时的图片,视频可能还没有加载完
})
jQuory 和 zepto 使用的是 DOMContentLoaded;
2: 性能优化
加载资源优化
- 静态资源的压缩合并
- 静态资源缓存
- 使用 CDN 让资源加载更快
- 使用 SSr 后端渲染,数据直接输出到 html 中
渲染优化
- CSS 放前面,JS 放后面
- 懒加载(图片懒加载, 下拉加载更多)
- 减少DOM 查询,对DOM 查询做缓存
- 减少DOM 操作,多个操作尽量合并在一起
- 事件节流
- 尽早执行操作 (如 DOMContentLoaded)
示例
-
合并合并js文件，减少请求次数 -
缓存通过连接名称控制缓存<script src="abc_1.js"></script>, 只有内容改变时才更改链接名称<script src="abc_2.js"></script> -
CDNbootcss - 懒加载
<script>
var img1 = document.getElementById('img1')
img1.src = img1.setAttribute('data-bigsrc')
</script>
- 缓存 DOM 查询
//未缓存 DOM 查询
var i
for (var i = 0; i < document.getElementByTagName('p').length; i++) {
// todo
}
//缓存了 DOM 查询
var pList = document.getElementByTagName('p');
var i
for (var i = 0; i < pList.length; i++) {
// todo
}
- 合并DOM插入
var listNode = document.getElementById('list')
//插入10个li标签
var frag = document.createDocumentFragment();
var x, li
for (x = 0; x < 10; x++) {
li = document.createElement('li')
li.innerHTML = 'List item' + x
frag.appendChild(li)
}
listNode.appendChild(frag)
- 事件节流
//在快速操作时不执行事件，在停顿时执行，以减少计算次数
var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup', function() {
if (timeoutId) {
clearTimeout(timeoutId)
}
timeoutId = setTimeout(function() {
//触发change事件
}, 100);
})
- 尽早执行操作 (如 DOMContentLoaded)
window.onloadListener('load',function(){
//页面的全部资源加载完后才会执行,包括图片视频等
})
window.onloadListener('load',function(){
// DOM 渲染完即开始执行,此时的图片,视频可能还没有加载完
})
