慕课网《前端JavaScript面试技巧》学习笔记（10）-页面
2017-07-17 本文已影响0人
Yangkeloff
1.从输入url到得到HTML的详细过程
2.window.onload和DOMContentLoaded的区别
3.性能优化的几个示例
知识点#####
-
加载资源的形式
- 输入url（或跳转页面）加载HTML
http://xxxxx.com - 加载HTML中的静态资源
<script> <link> <img>等
- 输入url（或跳转页面）加载HTML
-
加载一个资源的过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容
-
浏览器渲染页面的过程
- 根据HTML结构生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合成RenderTree
- 根据RenderTree渲染和展示
- 遇到
<script>时，会执行并阻塞渲染，所以<script>放在<body>即将结束的位置因为js有权利改变dom结构，如果同时进行会发生冲突
-
性能优化
-
原则
多使用内存、缓存或其他方法减少CPU计算和网络请求 -
静态资源的压缩合并（如webpack的
plugins:[new webpack.optimize.UglifyJsPlugin()]） -
静态资源缓存
-
使用CDN让资源加载更快
-
使用SSR(server side rendering)后端渲染，数据直接输出到HTML
-
渲染优化：
-
CSS放前面，JS放后面
-
懒加载（图片懒加载、下拉加载更多）
-
减少DOM查询，对DOM查询做缓存
-
减少DOM操作，多个操作尽量合并在一起执行
-
事件节流
-
尽早执行操作（如DOMContentLoaded）
-
解题#####
1.从输入url到得到HTML的详细过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容并渲染页面
2.window.onload和DOMContentLoaded的区别
window.onload，页面的全部资源加载完成才会执行，包括图片视频等
DOMContentLoaded，DOM渲染完即可执行，此时图片视频等可能还没加载完
3.性能优化的几个示例
- 合并js文件，减少请求次数
- 通过连接名称控制缓存
<script src="abc_1.js"></script>只有内容改变时才更改名称<script src="abc_2.js"></script> - 使用CDN
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> - 使用SSR后端渲染（Vue、React）
- 懒加载
<script type="text/javascript">
var img1=document.getElementById('img1')
img1.src=img1.setAttribute('data-realsrc')
</script>
- 缓存DOM查询
var x=document.getElementBy...这样可以避免多次执行DOM查询 - 合并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);
})
- 尽早操作
window.addEventListener('load',function(){
//页面的全部资源加载完成才会执行，包括图片视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行，此时图片视频等可能还没加载完
})
