浏览器解析原理

曾经有人说过,作为一个程序员搞前端不应该以美工的心态来对待,而是应该是一个程序按的常识去看待。

先前一开始学习web前端的时候,由于学得不怎么扎实,很多东西都是靠敲多了,也就自然记住了,很多原理性的东西都不懂,所以一旦生疏了,

很多前端的东西搞起来就非常耗时耗力,前段时间了解了一旦浏览器的制作原理之后,用一个程序员的心态来看待代码,就感觉轻松了很多。

浏览器的制作原理:

其实我们在浏览器中的每一个标签都可以理解为一个对象,经过浏览器解析器解析后变成一个对象,然后存储在内存堆中,例如下面标签

<input type="text" name="stuName"/>   被解析器解析成类似下面代码   Input input=new Input();  input.setType("text");  input.setName("stuName");  然后在内存堆中存储。

我们经常开一个浏览器会占用大量内存使电脑非常卡,大概是因为html中含有大量的  <input type=""  name=""/>  <div></div>  <body></body>标签的缘故,每个标签都是一个

对象,这些对象存储在内存堆中,使用电脑变卡。然后也许会问这些代码是怎么显示在浏览器上的,其实浏览器中有个渲染引擎,该引擎时刻监视着堆中的每一个对象的变化,包括对象的生成,销毁,改变等,一旦对象发生了变化,浏览器渲染引擎就会监视到该对象的变化,然后在浏览器中重构该图片。下面用图片来看下也许会更清晰点。

对于JAVASCRIPT而言,JAVASCRIPT一般则是在内存堆中找到对象,然后修改对象的属性,一般常用的寻找对象有

3,4个方法

var object1=document.getElementById(id);

var object2=document.getElementByname(id);

var object3=document.getElementByTagname(id);

然后通过样式表修改对象的属性

object1.style.color="red"等等或者从某个对象获取值赋值给其他对象也是可以的。

关于前端的一些知识,楼主以后有再有了解会再次更新

时间: 2024-11-08 03:18:24

浏览器解析原理的相关文章

JS作用域,浏览器解析原理

---恢复内容开始--- 浏览器: JS解析器:这儿理解为两步1)JS的预解析:“找一些东西”:var function 参数:   (1)所有的变量,在正式运行代码之前,都提前赋一个值:未定义   a=undefined:(2)所有的函数,在正式运行代码之前,都是整个函数块  fn1=function fn1(){alert(2);} 2)逐行解读代码(在第一步形成的仓库的基础上解读)表达式:= + - * / % !++ -- ......逐行读到表达式的时候会改变与预解析中变量的值 注:J

浏览器渲染原理解析

作者:贝程学院 浏览器内核分为两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎.早期渲染引擎和 JS 引擎并没有明显区分,随着 JS 引擎越来越独立,内核逐渐变成了渲染引擎的代名词.渲染引擎包括: HTML 解释器 CSS 解释器 布局 网络 存储 图形 音视频 图片解码器 等等 渲染引擎简介 浏览器——Firefox.Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safa

浏览器工作原理

浏览器工作原理的实质就是实现http协议的通讯,具体过程如下: HTTP通信的流程,大体分为三个阶段:1. 连接 服务器通过一个ServerSocket类对象对8000端口进行监听,监听到之后建立连接,打开一个socket虚拟文件.2. 请求 创建与建立socket连接相关的流对象后,浏览器获取请求,为GET请求,则从请求信息中获取所访问的HTML文件名,向服务器发送请求.3. 应答 服务收到请求后,搜索相关目录文件,若不存在,返回错误信息.若存在,则想html文件,进行加HTTP头等处理后响应

浏览器工作原理及相关内核、技术介绍

好吧,我最喜欢的就是原理方面的介绍了..好处有两个:1.了解原因更方便与工(zhuang)作(bi):2.原理都是相同的,大道归一啊(吐) 正文开始: 一.浏览器工作原理(简化版) 1.浏览器用来干什么用 浏览器的主要功能是将用户请求访问的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF.image及其他格式.用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置. HTML和CSS

JS代码预解析原理、函数相关、面向对象

JS重要知识点 这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************//*JS代码预解析.变量作

[转]浏览器工作原理

作为前端,了解浏览器的工作原理还是很有必要的,这篇文章可以帮助我们把很多前端知识串起来,读了之后受益良多,所以转了过来.文章非常长,译文的排版不是很清晰,我对照原文重新排了个版,并且修正了一些明显的翻译问题,本文省略了原文中文法解析部分,因为感觉这部分太深入了,对前端工作帮助不大:如果对这部分感兴趣可以查看原文或译文原文在这里:http://taligarsiel.com/Projects/howbrowserswork1.htm译文在这里:http://blog.csdn.net/zzzaqu

浏览器运行原理

(一)介绍 浏览器可以说是使用最广泛的软件,而且前端工程师很有必要了解浏览器的工作原理 目前使用的主流浏览器有5个, 1.按照引擎分类如下: Trident引擎:Internet Explorer Webkit引擎:Chrome(28版本后基于blink,blink是webkit的一个分支)和Safari Gecko引擎:Firefox Presto引擎:早期Opera采用,后用webkit引擎 其中Firefox.Chrome及Safari,Safari是部分开源的.而根据W3C(World

[转帖]浏览器工作原理

浏览器工作原理详解 原贴地址不详 .. 这篇文章是以色列开发人员塔利·加希尔的研究成果.她在查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码.她写道: 在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了.但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了.呃,里面只有数以百万行计的C++ 代码… 本篇文章的英文原版:How Browsers Work: Behind the

【Linux网络基础】 DNS:介绍、作用、解析原理

1. DNS是什么? DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去+·记住能够被机器直接读取的IP数串. 通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析). DNS协议运行在UDP协议之上,使用端口号53. 访问网站的实质就是解析其域名得到IP地址,再转向其网站. 就是将浏览器中的 www.baidu.com 通过DNS解析得到IP地址:183.232.231.1