JavaScript(2)——网页解析过程

JavaScript 网页解析过程

前端编程工具:Visual Studio Code

快捷语法:Emmett语法

正题:

  当我们在浏览器输入网址的时候,从服务器下载网页;这个文字经过HTML解析器的处理生成一大堆对象,因此打开一个网页的时候会占用很大的内存。网页最终变成一副图片。网页解析成对象后,这些对象会被HTML渲染器(Rander)监视,然后把他们绘制成一张张图片;它会根据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触发点击事件来获取这个颜色的值并改变边框的背景;

原文地址:https://www.cnblogs.com/Magic-Dev/p/11524230.html

时间: 2024-10-12 02:31:15

JavaScript(2)——网页解析过程的相关文章

phantomjs介绍-(js网页截屏、javascript网页解析渲染工具)

phantomjs介绍-(js网页截屏.javascript网页解析渲染工具) phantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,这样访问网页就省去了浏览器的界面绘制所消耗的系统资源,比较适合用于网络测试等应用 .利用这个工具,我们可以轻松的搭建一个接口用于获取我们想要的url的整页截屏. PhantomJS is a headless WebKit with JavaScript API. It has fast and native support

从var func=function 和 function func()区别谈Javascript的预解析机制

var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function xx(){return 5;} } 不会出错,而 { var k = xx(); var xx = function(){return 5;} } 则会出错. 为什么会这样呢?这就要引出javascript中的预解析机制来解释了. JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个

html dom与javascript的关系 -我们用JavaScript对网页(HTML)进行的所有操作都是通过DOM进行的

一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应该理解为是一个规范,定义了HTML和XML文档的逻辑结构和文档操作的编程接口. 文档逻辑结构 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象,以树状的结构组织(本文称之为"文档树",树中的对象称为"节点").每个文档包含1个document节点,0

转:Python网页解析:BeautifulSoup vs lxml.html

转自:http://www.cnblogs.com/rzhang/archive/2011/12/29/python-html-parsing.html Python里常用的网页解析库有BeautifulSoup和lxml.html,其中前者可能更知名一点吧,熊猫开始也是使用的BeautifulSoup,但是发现它实在有几个问题绕不过去,因此最后采用的还是lxml:  1. BeautifulSoup太慢.熊猫原来写的程序是需要提取不定网页里的正文,因此需要对网页进行很多DOM解析工作,经过测试

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

DNS原理及其解析过程 精彩剖析 网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如“202.96.134.133”之类的 IP地址,而不能认识域名.我们无法记住10个以上IP地址的网站,所以我们访问网站时,更多的是在浏览器地址栏中输入域名,就能看到所需要的页面,这是 因为有一个叫“DNS服务器”的计算机自动把我们的域名“翻译”成了相应的IP地址,然后调出IP地址所对应的网页. 什么是DNS?     DNS( Domain Name  S

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

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285人阅读 评论(1) 收藏 举报  分类: Webkit(34)  JavascriptCore/JIT(3)  版权声明:本文为博主原创文章,未经博主允许不得转载. 看到HorkeyChen写的文章<[WebKit] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现>

ios非UTF-8格式的网页解析

网上有很多关于ios xml解析的方法,关于非UTF-8格式的网页解析也不少,我也试着看了好几个,但都没成功.今天无意中却弄好了,所以想和大家分享下.其实很简单,下面说下怎么得到非UTF-8格式的网页要解析的代码内容,这也是比较关键的一步,剩余的解析过程网上很多,这里就不在赘述了,如果实在有需要得话,再跟我联系. 1.以百度(http://www.baidu.com)为例,其网页格式为gb2312,新建一个项目project,在-(void)viewDidLoad内输入一下内容: 1NSURL

关于Python json解析过程遇到的TypeError: expected string or buffer

关于Python json解析过程遇到的问题:(爬取天气json数据所遇到的问题http://tianqi.2345.com/) part.1 url--http://tianqi.2345.com/t/wea_history/js/201708/60061_201708.js 返回的数据如下: 这就尴尬了,直接json.loads是返回错误的. 对比了其他网页返回的--http://www.toutiao.com/search_content/?offset=0&format=json&

DNS解析过程原理

DNS解析原理及过程. 当用户访问我们网站一个网页时,他需要经过以下步骤: 1)找到这个网页的存放服务器: 2)服务器将用户的请求信息接入: 3)服务器通过文件路径(URL)查找用户请求网页: 4)用户将该网页内容下载到自己电脑上. 我们所讲的DNS解析主要是第一个步骤,即让用户通过URL找到文件存放的服务器. 1.为什么要有DNS解析? 让用户电脑和服务器(网页存放电脑)连接起来并不是靠域名进行,网络上计算机之间实现连接是通过每台计算机在网络中拥有的惟一的IP地址来完成的.但IP地址并不便于记