前端笔记第二期（JS常用知识点）

输入URL后，将页面展示出来需要如下步骤

1. 将url解析为IP地址
2. tcp建立链接
3. 服务器将js、HTML、css等脚本资源返回
4. 解析js，参考js时间线
5. 渲染，将HTML和css展现出来 --> 渲染引擎
6. tcp四次挥手

浏览器的基本组成

1. 用户界面
2. 浏览器引擎
3. 渲染引擎
4. 网络
5. UI后端
6. Js引擎
7. 数据存储

渲染模式（历史）

• IE6以前，各个浏览器都处于封闭的发展中，并没有兼容性可言
• 为了解决兼容性的问题，各厂商发布了按照标准模式工作的浏览器
• 考虑到之前建设的网站不支持标准模式，所以同时也保留了非统一的怪异模式
• 标准模式写法：<! DOCTYPE html >

渲染引擎

什么是渲染

在电脑绘图中，指软件从模型生成图像的过程

渲染过程

解析html → 构建DOM树 → css rule树 → 构建Render树 → 布局Render树 → 绘制Render树

Label标签

用户名密码等输入框，鼠标点击输入框时，光标会移动到输入框中，点击用户名等文字，也会移动到输入框中
Label标签可与input标签进行事件绑定

属性和特性

• 特性包含在属性之中，特性是属性的一个小范围
• 特性天生就可以具有的

图片预加载和懒加载

懒加载

• 只有当图片出现在浏览器的可视区域内的时候，才设置图片的真正路径，将图片加载出来
• 商城页面等，图片数量很多且较大的时候，无法让页面一次性加载完毕
• 可以减轻服务器的压力，节约流量，页面加载速度快，用户体验好

预加载

• 提前加载图片，用户需要查看时，可以直接从本地缓存中渲染
• 对于图片占据很大比例的网站来说，保证了图片快速、无缝的发布，用户体验更好

Math.random( )应用

生成随机数，生成数字区间为 [0, 1)

文档碎片

解决频繁的dom操作，从而导致性能的消耗