一、浏览器的基本组成
- 用户界面
- 浏览器引擎
- 渲染引擎
- 网络
- UI后端
- Js引擎
- 数据存储
二、渲染引擎-渲染模式
1.网址到页面的内部过程
- 输入网址：DNS解析，域名-IP地址
- 负载均衡：找到那一方服务器处理请求
- Tomcat服务器创建连接：TCP三次握手，建立Socket
- Tomcat中connection组件监听端口获取数据流：创建request.response对象
- container拿到request.response对象：找到Wrapper执行方法
- 将Response传到前台在页面显示
渲染: 在电脑绘图中是指用软件从模型生成图像的过程。
渲染引擎: 其职责就是渲染，即在浏览器窗口中显示所请求的内容。
过程：解析html从而构建DOM树->CSS Rule 树->构建Render树->布局Render树->绘制Render树
2.渲染模式的历史意义
随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。
但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪异模式）。
html页面顶部标签<!DOCTYPE html>不完整即可进入怪异模式
三、Label标签
在某些注册页面，你会看到你鼠标在用户名上时，input输入栏就会聚焦
label实现方法
<label for="demo">用户名</label>
<input type="text" id="demo">
四、属性和特性
上面的
属性：data jimo
特性：type value id class
这里的特性 DOM对象 === input 一一对应，有映射关系
例：
var int = document.getElementsByTagName('input')[0];
int.value = 10;//原来的'请输入'会赋值10
int.data = 10;//无效，因为不是特性，没有映射关系
五、预加载+懒加载
网页中的图片如果不经过优化，如果网速较慢或者图片较大，会出现一点点出现的情况，造成不友好的用户体验。这里应用预加载解决（ 提前加载图片，当用户需要查看时可直接从本地缓存中渲染）。
var img = document.createElement('img');
img.onload = function (){
var div = document.getElementById('demo');//将图片放入目标容器中
div.appendChild(this);
}
img.src = "#";
配合懒加载，即对长内容展示网页，先预加载，如果用户往下继续浏览时，再加载出来，优化用户体验。
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
