浏览器渲染原理及web前端分析

浏览器的主要功能

用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎：用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。
渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
JS解释器：用来解释执行JS代码。
数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据

图：浏览器主要组件图

浏览器渲染机制

我们现在要在浏览器中显示以上结构的HTML：

1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。

2.加载从标签开始，并发现标签内有个外部样式文件要加载

<link href="../css/css.css" rel="Stylesheet" type="text/css" />

3.这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。

4.此时客户端浏览器继续加载html文件里里的标签，在css.css文件加载完后，同时开始渲染页面。

5.客户端浏览器在里的标签中发现一个标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。

6.标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。

7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：

<script type="text/javascript" src="js/js.js"></script>

8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。

9.浏览器又在js.js文件中发现了一段代码是让

标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的

部分。

10.最后到浏览器发现了为止。

参考资料：
深入学习，偏底层（对于架构的理解更透彻）
http://blog.csdn.net/findsafety/article/details/50424307

WEB前端分析测试点

12个测试要点

优点：
纯粹的前端视角，可以测试任何的网站，不需要考虑后台

1.减少http请求的数量（把js，css合并），为了尽可能减少tcp链接的建立和释放连接的资源，减少读取资源读取IO的时间

2.用好浏览器缓存，浏览器会把所有的访问记录保存在硬盘中，下次访问时会判断时候已保存，提升访问速度。

3.利用gzip压缩机制，只针对文本类资源有效（js，css，html），文本的压缩比可以达到70%多。gif，png，等图片资源其实已经被压缩过了

4.把CSS文件放在html的开头，让浏览器一开始把渲染资源下载下来，保证以后的页面渲染比较流畅。
css主要用来渲染，当发现有css会优先下载下来，便于渲染。

5.尽可能把js放在html的结尾,当页面渲染完成后，用户操作时候能达到动态的效果

6.尽量避免css表达式,判断浏览器的版本，分辨率等表达式

7.尽可能减少DNS查找，dns本身会消耗时间，尽可能使用相对路径。

DNS作用：把域名解析成IP地址

8.最好使用js压缩，比gzip更有针对性，js压缩并不是需要解压缩，而是压缩了以后js代码同样可以工作.

eg.var username–> var u;
把长的字符变成短的字符，同样适用于css，html

9.尽量避免重定向redirect eg.访问www.baidu.com/
/本身也是一种重定向，我们网页内部尽可能制定到某一个指定的地址，以减少资源

10.去除重复的脚本，脚本重复太多会增大脚本的大小，消耗带宽资源
如：加减法的函数，可以合并成一个操作函数

11.使用ajax请求，局部某些数据会变化，需要什么内容只请求那一部分内容
提升用户体验，节省很多网络传输的带宽成本。
目前，我们用jQuery js的框架写ajax非常方便.

12.使用CDN，内容分发网络。cdn不是从前端可控的技术，很大的缓存服务器
减少总服务器的访问压力，提升用户的访问速度.