JavaScript（2）——网页解析过程
JavaScript 网页解析过程
前端编程工具：Visual Studio Code
快捷语法：Emmett语法
正题：
当我们在浏览器输入网址的时候，从服务器下载网页；这个文字经过HTML解析器的处理生成一大堆对象，因此打开一个网页的时候会占用很大的内存。网页最终变成一副图片。网页解析成对象后，这些对象会被HTML渲染器（Render）监视，然后把他们绘制成一张张图片；它会根据W3C去绘制，例如把button绘制成按钮，那么必须就绘制成按钮，绘制成怎样的按钮不做规定。HTML解析器不能渲染非常繁重的渲染任务，例如一秒渲染25张图片，这时候必须依靠底层的图形加速卡，早期的渲染器是没法支持图形加速卡的，所以没法一秒渲染25张图片。这时出现了flash插件，使得HTML渲染器能够支持图形加速卡，（现在HTML5已经能够直接访问3D加速卡）
JavaScript是脚本语言，能够直接修改浏览器内存，增加或删除一些对象，修改对象的属性，只要这些对象发生了修改，HTML渲染器就会感受到这个改变而重画界面。这就产生了动态页面；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#tab{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<body>
<div id="tab"></div>
<label>新的背景色</label><input type="text">
<button onclick="change_color()">change</button>
</body>
<script type="text/javascript">
function change_color(){
var btn = document.getElementById('tab');
var color = document.getElementsByTagName('input')[0].value
btn.style.backgroundColor = color
}
</script>
</html>
当鼠标或键盘事件出现时，先改变了相应的内存，渲染器马上重画界面，由于时间很短，感知不到这种延迟。当我们在输入框中输入值时，先修改内存的值，然后渲染器重画界面；
我们找到文本输入框对象，获取其中的值，使用这个值来决定div的背景颜色； 我们可以通过button标签的onclick触发点击事件来获取这个颜色的值并改变边框的背景；
JavaScript（2）——网页解析过程的更多相关文章
- 用户对动态PHP网页访问过程，以及nginx解析php步骤
www.example.com | Nginx | 路由到www.example.com/index.php | 加载nginx的fast-cgi模块 | fast-cgi监听127.0.0.1:90 ...
- javascript的解析过程
引言: javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的.(本身就是游览器可以直接识别,javascrip ...
- DNS原理及其解析过程 精彩剖析
本文章转自下面:http://369369.blog.51cto.com/319630/812889 DNS原理及其解析过程 精彩剖析 网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址 ...
- [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- DNS原理及其解析过程【精彩剖析】(转)
2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否 ...
- Python网页解析
续上篇文章,网页抓取到手之后就是解析网页了. 在Python中解析网页的库不少,我最开始使用的是BeautifulSoup,貌似这个也是Python中最知名的HTML解析库.它主要的特点就是容错性很好 ...
- javascript引擎执行的过程的理解--执行阶段
一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...
- 分析Json/Xml的解析过程
json和xml都是用来进行数据的传输和交换的,是目前用来传输数据用的最多的两种技术,下面我们分别来认识一下它们及其解析过程 一.json 1.json简介 JSON是一种基于文本的轻量级数据交换格式 ...
随机推荐
- BZOJ 1006 完美消除序列&最大势算法&弦图
K国是一个热衷三角形的国度,连人的交往也只喜欢三角原则.他们认为三角关系:即AB相互认识,BC相互认识,CA相互认识,是简洁高效的.为了巩固三角关系,K国禁止四边关系,五边关系等等的存在.所谓N边关系 ...
- html5测试
HTML5测试一 1. 问题:HTML5 之前的 HTML 版本是什么? A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 答案:A HTML5 是 HTML 最新 ...
- 【Share Code | HTML & CSS & Javascript】动画片段幻灯片
[查看demo & 下载资源](https://zhaoshuquan.com/posts/15 介绍 本文使用"Pieces"库轻松实现动画片段幻灯片效果. 今天我们想向 ...
- Web UI开发推荐！Kendo UI for jQuery自定义小部件——使用MVVM
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- python继承之super
super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重复调用( ...
- POJ-2752-Seek the Name(KMP, 循环节)
链接: https://vjudge.net/problem/POJ-2752#author=0 题意: 给定若干只含小写字母的字符串(这些字符串总长≤400000),在每个字符串中求出所有既是前缀又 ...
- app 移动支付
1.微信 多个端单独对用appid 多个appid 对应到一个商户 先创建appid 然后再关联商户 2.支付宝 多个aliPrivateKey,这个可以生成pkcs8,是用在java里面.非 ...
- JavaScript基础之变量的自增与自减
一.自增(++) ⑴什么是自增? 通过自增运算符可以使变量在自身的基础上加一: 对于一个变量自增以后,原变量的值会立即自增一: 示例: <!DOCTYPE html> <html l ...
- js上传超大文件解决方案
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- 2018蓝桥杯C/C++组第4题第几个幸运数
题目4标题:第几个幸运数 到x星球旅行的游客都被发给一个整数,作为游客编号.x星的国王有个怪癖,他只喜欢数字3,5和7.国王规定,游客的编号如果只含有因子:3,5,7,就可以获得一份奖品. 我们来看前 ...