《前端JavaScript面试技巧》学习笔记(13) 页面加载与

2017-09-25 本文已影响109人一杯浊酒

运行环境介绍:

浏览器可以通过访问链接来得到页面内容
通过绘制和渲染,显示出页面的最终样子,有视觉效果的样子
整个过程中,我们要考虑什么问题 ? 如下:

问题

1.从输入url到得到HTML的详细过程
2.window.onload和DOMContentLoaded的区别
3.性能优化的几个示例

知识点

1: 页面加载过程
2: 性能优化
3: 安全性

1: 页面加载,渲染过程

加载资源的形式

输入url（或跳转页面）加载HTML http://jianshu.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>![](loding.jpg)</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>
CDN bootcss
懒加载

![](min.png)
<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 渲染完即开始执行,此时的图片,视频可能还没有加载完
})

《前端JavaScript面试技巧》学习笔记(13) 页面加载与

问题

知识点

猜你喜欢

热点阅读