一、浏览器的基本组成

用户界面
浏览器引擎
渲染引擎
网络
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 = "#";

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

JavaScript基础部分总结相关推荐

JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
javascript基础语法——表达式
前面的话一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

JavaScript基础部分总结

总结