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）——网页解析过程的更多相关文章

  1. 用户对动态PHP网页访问过程，以及nginx解析php步骤

    www.example.com | Nginx | 路由到www.example.com/index.php | 加载nginx的fast-cgi模块 | fast-cgi监听127.0.0.1:90 ...

  2. javascript的解析过程

    引言: javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的.(本身就是游览器可以直接识别,javascrip ...

  3. DNS原理及其解析过程 精彩剖析

    本文章转自下面:http://369369.blog.51cto.com/319630/812889 DNS原理及其解析过程 精彩剖析 网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址 ...

  4. [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  5. [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢?   原因在于: ...

  6. DNS原理及其解析过程【精彩剖析】(转)

      2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否 ...

  7. Python网页解析

    续上篇文章,网页抓取到手之后就是解析网页了. 在Python中解析网页的库不少,我最开始使用的是BeautifulSoup,貌似这个也是Python中最知名的HTML解析库.它主要的特点就是容错性很好 ...

  8. javascript引擎执行的过程的理解--执行阶段

    一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...

  9. 分析Json/Xml的解析过程

    json和xml都是用来进行数据的传输和交换的,是目前用来传输数据用的最多的两种技术,下面我们分别来认识一下它们及其解析过程 一.json 1.json简介 JSON是一种基于文本的轻量级数据交换格式 ...

随机推荐

  1. ribbon负载均衡循环策略源码

    (原) 在用ribbon负载均衡取eureka注册中心中的地址时,默认采用循环策略,例如商品服务有3个,分别为URL1,URL2,URL3,那么在客户端第一次取时,会取到URL1,第二次取时取到URL ...

  2. 块格式化上下文（Block Formatting Context，BFC）

    块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...

  3. inclusion_tag模块

    目录 inclusion_tag模块 inclusion_tag模块 1.当页面上某一块区域的内容需要在多个页面上展示的使用,并且该区域的内容需要通过传参数才能正常显示,那么我们可以优先考虑inclu ...

  4. 编译gpu集群版caffe

    在这个版本安装之前,要先装好opencv,openmpi等. 下载地址:https://github.com/yjxiong/caffe.git 我的opencv是2.4.12版本 编译是用了: cm ...

  5. C++中虚函数继承类的内存占用大小计算

    计算一个类对象的大小时的规律: 1.空类.单一继承的空类.多重继承的空类所占空间大小为:1(字节,下同): 2.一个类中,虚函数本身.成员函数(包括静态与非静态)和静态数据成员都是不占用类对象的存储空 ...

  6. Qbxt AH d4 && day-6

    /* 这两天考试直接呵呵了. 赶脚对qbxt的题目无感. 同时也发现了自己的一些问题. 一些思路题总是自己傻逼的挖个坑跳进去. 这两天场场倒数ORZ. 始终是最弱的.... 然后NOIP光荣三等奖了吧 ...

  7. Android中关于回调概念的笔记

    一.回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调 ...

  8. PHP中try catch的用法

    异常(Exception)用于在指定的错误发生时改变脚本的正常流程. 什么是异常? PHP 5 提供了一种新的面向对象的错误处理方法. 异常处理用于在指定的错误(异常)情况发生时改变脚本的正常流程.这 ...

  9. linux vim的全目录搜索 和 hostname的设置?

    vim下的搜索命令是: vimgrep, 简写就是vim. 关于这个全局搜索的用法根grep的差不多, 但是, 如果你直接使用 grep的话 就会在vim的外部执行, 根vim内部就没有什么关系了, ...

  10. js 里面call（）的使用

    call 是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向.JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」 ...