Brower基本原理
浏览器（browser）
定义：
万维网(Web)服务的客户端浏览程序。
可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。
浏览器工作原理
WWW 的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务器)构成，两者之间采用超文本传送协议（HTTP）进行通信，HTTP协议的作用原理包括四个步骤：连接，请求，应答。根据上述HTTP协议的作用原理，本文实现了GET请求的Web服务器程序的方法，通过创建TcpListener 类对象，监听端口8080；等待、接受客户机连接到端口8080；创建与socket字相关联的输入流和输出流;然后，读取客户机的请求信息，若请求类型是GET，则从请求信息中获取所访问的HTML文件名，如果HTML文件存在，则打开HTML文件，把HTTP头信息和HTML文件内容通过socket传回给Web浏览器，然后关闭文件。否则发送错误信息给Web浏览器。最后，关闭与相应Web浏览器连接的socket 字。
HTTP协议的作用原理
WWW是以Internet作为传输媒介的一个应用系统，WWW网上最基本的传输单位是Web网页。WWW 的工作基于客户机/服务器计算模型，由Web 浏览器(客户机)和Web服务器(服务器)构成，两者之间采用超文本传送协议（HTTP）进行通信。HTTP协议是基于TCP/IP协议之上的协议，是Web浏览器和Web 服务器之间的应用层协议，是通用的、无状态的、面向对象的协议。HTTP协议的作用原理包括四个步骤：连接：Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文件，此文件的建立标志着连接建立成功。
请求：Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是GET或POST命令（POST 用于FORM参数的传递）。GET命令的格式为：
GET 路径/文件名HTTP/1.0
文件名指出所访问的文件，HTTP/1.0指出Web浏览器使用的HTTP版本。
应答：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接到后，进行事务处理，处理结果又通过HTTP传回给Web浏览器，从而在Web浏览器上显示出所请求的页面。
例：假设客户机与https://www.wendangku.net/doc/528966619.html,:8080/mydir/index.html建立了连接，就会发送GET命令：GET /mydir/index.html HTTP/1.0。主机名为https://www.wendangku.net/doc/528966619.html,的Web服务器从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件，Web服务器把该文件内容传送给相应的Web浏览器。
为了告知Web浏览器传送内容的类型，Web服务器首先传送一些HTTP头信息，然后传送具体内容（即HTTP体信息），HTTP头信息和HTTP体信息之间用一个空行分开。
常用的HTTP头信息有：
①HTTP 1.0 200 OK
这是Web服务器应答的第一行，列出服务器正在运行的HTTP版本号和应答代码。代码
“200 OK”表示请求完成。
②MIME_V ersion:1.0
它指示MIME类型的版本。
③content_type:类型
这个头信息非常重要，它指示HTTP体信息的MIME类型。如：content_type:text/html
指示传送的数据是HTML文档。
④content_length:长度值
它指示HTTP体信息的长度（字节）。
关闭连接：当应答结束后，Web浏览器与Web服务器必须断开，以保证其它Web浏览器
能够与Web服务器建立连接
html工作原理
HTML(Hypertext Markup Language) 是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容，这个过程叫做语法分析。
HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。
网页浏览器：
主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的HTTP是HTTP/1.1，这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的标准，然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL（统一资源定位符）指示，此乃网页的地址；以http:开首的便是通过HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议，例如ftp:是FTP（档案传送协议）、gopher:是Gopher及https: 是HTTPS（以SSL加密的HTTP）。
浏览器是如何渲染页面和加载页面
为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
1、浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
这里关键的是第2-5这三点。渲染效率与下面三点有关：
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
1、css选择器的查询定位效率
2、浏览器的渲染模式和算法
3、要进行渲染内容的大小
浏览器对CSS的匹配原理
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;}，浏览器的查找顺序如下：
先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则CSS匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
优化你的CSS
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
1、不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释：因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
2、不要在class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
1. p.red{color:red;}
2. span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
3、尽量少使用层级关系
一般写法：#divBoxp.red{color:red;}
更好写法：.red{..}
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
4、使用class代替层级关系
一般写法：#divBoxullia{display:block;}
更好写法：.block{display:block;}
Example Source Code [https://www.wendangku.net/doc/528966619.html,]
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id 有微妙的速度优势）。
总结：
本文主要总结了一些CSS的经验之谈，有些知识点可能https://www.wendangku.net/doc/528966619.html,早就有所介绍。对于硬件平台和浏览器快速发展的今天，更多的人会将精力投入到“实现”这一目标上，而忽略了“原理”这一根本。web 从开始至今已经发生了根本性的变化，不可能用以前的目光来衡量，但是在所有的变化中都离不开它的内在：页面渲染。所有变化几乎都是围绕这个而产生的。所以可能花费一点时间去了解一下也许能有所帮助，至少知道你写出的样式表的瓶颈是否是本文中所列出的。更多的内容，欢迎您关注https://www.wendangku.net/doc/528966619.html,更新的技术文档。
JavaScript—网页运行原理
当我们打开一个网页的时候，浏览器会首先创建一个窗口，这个窗口就是我所知道的window对象，也就是整个Javascript运行所依附的全局变量。
为了加载网页文档，当前窗口又需要创建一个Document对象，然后把打开的网页加载到Document 下。网页就是在这个加载的过程中，一边加载一边呈现，所以我们当网速非常慢的时候可以看到，网页从上到下一点点地打开。
当我们用