前端笔记第二期(JS常用知识点)
输入URL后,将页面展示出来需要如下步骤
- 将url解析为IP地址
- tcp建立链接
- 服务器将js、HTML、css等脚本资源返回
- 解析js,参考js时间线
- 渲染,将HTML和css展现出来 --> 渲染引擎
- 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操作,从而导致性能的消耗