总结

  • 一、浏览器的基本组成
  • 二、渲染引擎-渲染模式
  • 1.网址到页面的内部过程
  • 2.渲染模式的历史意义
  • 三、Label标签
  • 四、属性和特性
  • 五、预加载+懒加载


一、浏览器的基本组成

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

二、渲染引擎-渲染模式

1.网址到页面的内部过程

  1. 输入网址：DNS解析，域名-IP地址
  2. 负载均衡：找到那一方服务器处理请求
  3. Tomcat服务器创建连接：TCP三次握手，建立Socket
  4. Tomcat中connection组件监听端口获取数据流：创建request.response对象
  5. container拿到request.response对象：找到Wrapper执行方法
  6. 将Response传到前台在页面显示

渲染: 在电脑绘图中是指用软件从模型生成图像的过程。
渲染引擎: 其职责就是渲染，即在浏览器窗口中显示所请求的内容。
过程：解析html从而构建DOM树->CSS Rule 树->构建Render树->布局Render树->绘制Render树

2.渲染模式的历史意义

随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。

但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪异模式）。
html页面顶部标签<!DOCTYPE html>不完整即可进入怪异模式

三、Label标签

java 将值进行js渲染 javascript渲染_预加载


在某些注册页面，你会看到你鼠标在用户名上时，input输入栏就会聚焦

label实现方法

<label for="demo">用户名</label>
<input type="text" id="demo">

四、属性和特性

java 将值进行js渲染 javascript渲染_渲染引擎_02


上面的

属性：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 = "#";

配合懒加载，即对长内容展示网页，先预加载，如果用户往下继续浏览时，再加载出来，优化用户体验。