1、Web工作原理
1 、用户访问网页，发送一个 http 请求到网络服务器。
2 、网络服务器（应用服务器）进行DNS解析请求得到数据库地址，发送请求给数据库服务器。
3 、数据服务器返回数据给网络服务器，网络服务器解析数据，并生成 html 文件内容放入 http response 中，返回给浏览器。
释放连接TCP连接
若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;
4 、浏览器解析 http response 。
先解析状态行的状态码，查看请求是否成功
创建DOM树：
5 、浏览器构造 DOM 树。(文档对象模型)：浏览器将html代码通过html解析器解析后，构建为一棵DOM树
6 、浏览器接收 css代码 ，通过css解析器解析，构建出样式表规则，并应用在 DOM 树节点上，得到一棵带有样式属性的DOM树
布局
7、浏览器按从上到下，从左到右的规则，读取DOM树的文档节点，按顺序存放在一条虚拟的传送带上，如果是同一层级就放在同一个盒子，依次嵌套；文档流排完后，开始获取节点的CSS属性（位置，大小等信息），然后将节点一一布局在浏览器页面对应的位置中
8、浏览器下载 js ，并解析执行 js，最后渲染显示页面。
2、HTTP协议（超文本传输协议）
基于TCP/IP通信协议来传输数据
格式：http://host[":"port][abs_path]
http 表示要通过 HTTP 协议来定位网络资源；
host 表示合法的 Internet 主机域名或者 IP 地址 ；
port 指定一个端口号，为空则使用缺省端口 80；
abs_path 指定请求资源的 URI；如果 URL 中没有给出 abs_path， 那么当它作为请求 URI 时， 必须以“/”的形式给出， 通常这个工作浏览器自动帮我们完成。
uri和url的区别
uri：uniform resource identity 统一资源标志符
url：uniform resource location 统一资源定位符
HTTP请求
通过TCP套接字，客户端向Web服务器发送一个文本的请求报文；
http是无状态协议，即这次的请求和上一次的请求是没有关系的
请求报文分为3部分：
1、请求行：请求方法，URL，请求版本
2、请求头
3、请求正文
请求方法：
GET:请求指定的页面信息，并返回实体主体。
POST:向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中（body）。POST请求可能会导致新的资源的建立和/或已有资源的修改。
HEAD:类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
PUT:从客户端向服务器传送的数据取代指定的文档的内容。
DELETE:请求服务器删除指定的页面。
get请求和post请求区别
1、参数传递
相同点：都包含请求头和请求行
get请求是把请求参数放在url后面，用？隔开
post请求是把请求参数放在请求协议的内容中
2、长度限制
不同浏览器对url有长度限制，因此get请求不能传太多参数，post请求没有限制
3、get请求只能传文本，post请求可以传文本和二进制数据如文件
响应
响应报文分为4部分：
1、状态行：返回结果（200，400等等），版本
2、响应头
3、响应正文
状态码分类
1xx：信息型，服务器收到请求，需要请求者继续操作
2xx： 成功，请求成功并处理，
如：常见200
3xx：重定向，需要进一步操作以完成请求，
如301：网页端被永久重定向到其他url
302：网页被临时重定向到其他url
4xx：客户端错误，请求预发错误或无法完成请求
如：400：客户端请求预发错误不能被服务器理解
401：请求未经授权
404：请求的资源不存在
5xx：服务端错误，服务端在处理请求过程中发生错误
如：500：服务器发生不可预期的错误
503：服务端暂时不能处理请求，需要等待一会
HTTP和HTTPS区别
S：ssl（安全套接字层）
HTTP是明文的，HTTPS经过SSL协议加密处理，更安全
http和https使用连接方式不同，默认端口也不一样，http是80，https是443。
什么是session，cookie，token
session是记录客户端和服务端会话状态的机制
校验流程：
1、客户端发送一个http请求到服务端
2、服务端接受到请求后，创建会话后，发送一个响应给客户端，这个响应头包含cookie（带上sessionid）
3、客户端发起二次请求的时候，会带上cookie
4、服务端会解析cookie，并对cookie内容进行校验，校验通过返回响应信息给客户端
备注：
cookie验证是有状态的，意味着会话在客户端和服务端需要一直保持
一旦用户退出登录，则session在客户端和服务端都会被销毁
cookie的格式
Set-cookie: NAME=VALUE Expires/Max-age=DATE Path=PATH Domain=DOMAIN_NAME SECURE
参数意义:
NAME: cookie的名字
VALUE: cookie的值。
Expires: cookie的过期时间。
Path: cookie作用的路径。
Domain: cookie作用的域名。
SECURE:是否只在htps协议下起作用
token是无状态的，
token的校验流程和cookie类似
用户退出登录，token在客户端被销毁，不需要经过服务端
2、浏览器机制
什么是内核
支持浏览器运行的最核心的程序，包括两部分：渲染引擎和JS引擎
渲染引擎：负责对网页语言（HTML，JavaScript）的解释并渲染
JS引擎：算法，逻辑等的处理
浏览器工作流程：
1、浏览器解析内容包括：
（1）HTML，SVG，XHTML，解析完成后生成DOM树
（2）解析CSS生成CSS规则树
（3）JS脚本加载后，通过DOM API和CSSOM API来操作DOM树和CSS规则树
备注：通常情况下DOM树和CSS规则树是同时构建，但是CSS规则树会阻塞渲染，所以需要等CSS规则树构建完成后才能继续构建渲染树
构建DOM树中如果遇到script标签，则DOM树会停止构建，只是脚本执行完成
2、浏览器引擎根据DOM树和CSSOM树，构建一棵渲染树，渲染树只会包含节点和这些节点对应的样式信息（无位置等信息）
3、布局（也叫回流）
计算CSS样式
构建渲染树，
Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性，获取各个节点的大小和位置
正式开画
4、绘制
调用操作系统的native GUI的API进行绘制，将渲染树转化为屏幕上的像素
渲染=布局+绘制
重绘和回流
重绘：渲染树的元素只改变了外观和风格，不影响布局
回流：渲染树的元素改变了大小，位置等（删除元素，内容变化，浏览器窗口变化等），影响布局需要重新构建
回流必定会造成重绘，重绘不一定会造成回流
IE浏览器与其他浏览器的区别
不同浏览器的区别本质上是内核的差别，表面是界面的差别
主流的渲染引擎如下：
1、Trident：IE浏览器使用的内核（IE5-IE10），世界之窗，360安全浏览器，搜狗浏览器
2、Gecko：跨平台，mozilla firefox
3、webkit：跨平台，Chrome，safari，Android手机自带的浏览器，遨游3.0
4、presto：opera7.0及以后的版本采用的内核
主流的JavaScript引擎：
1、chakra：查克拉，IE9使用的最新JavaScript引擎
2、spidermonkey /tracemonkey/jaegerMonkey：spidermonkey应用在mozilla firefox1.0-3.0版本上， tracemomonkey 应用在3.0-4.,0版本上，jaegermonkey应用在4.0及以后新的版本上
3、V8引擎：Chrome浏览器，遨游3.0
4、Nitro：safari 4及以后的版本上
5、linear A/ linear B /futhark/carakan：linear A 用于Opera4.0-6.1版本，linear B用于opera7.0-9.2版本 futhark应用于opera9.5-10.2版本，carakan用于Opera10.5及后续的版本
备注：opera在javascript引擎的跑分上一直是遥遥领先的
为什么兼容测试需要特别关注IE浏览器？
因为IE10之前的各个版本兼容程度不一样；且IE又是window内置的浏览器，因此需要特别关注
浏览器加载html和渲染CSS顺序
1、用户输入一个网址（假设没有缓存），浏览器向服务器发起请求，服务器返回HTML文件
2、浏览器开始加载html，遇到一个<img>标签有一张图片链接，浏览器向服务器发起请求图片，但是不会等图片下载完再接下去渲染；浏览器会一边往下渲染，一边下载图片，直至图片下载完成后，发现图片大小影响下面已经渲染过的排版，浏览器需要回过头来重新计算布局渲染页面
3、浏览器继续载入HTML代码，发现一个<link>标签，引用外部CSS文件；浏览器向服务器发起请求，服务器返回CSS文件，浏览器一边加载body中的代码，一边用CSS渲染页面
4、 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签，JavaScript 脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个 <div>（style.display=”none”），突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
5、终于等到了 </html> 的到来，浏览器结束渲染
6、用户点击某个按钮，浏览器从步骤1开始重新执行
web架构
服务器缓存机制
·数据库如何主从同步，如何备份的？
· 集群如何处理session的？
4. 安全（专项学习）
因为web应用的特殊性，你需要掌握的安全技能：
· 如何进行SQL注入测试？如何防止SQL注入？
· 什么是跨站脚本攻击(XSS)？如何开展此类测试，应该如何防范XSS？
· 什么是DOS，DDOS？开发人员如何coding来避免？
· 传输哪些重要数据时需要加密
· 哪些页面需要使用SSL/https来加密传输
· 什么是跨站伪造请求攻击 cross site request forgeries (XSRF)，如何避免？
· 安全证书的意义，浏览器在证书失效时提示是怎样的？
5. web性能（专项学习）
你应该知道的web性能知识：
· web前端的性能极大影响了用户，如何观察这些数据？CSS和图片的合并压缩的意义
· 了解浏览器cache及服务端cache
· 对于图片请求过多的网站，为何要把图片放置在不同的域名下，最好使用CDN？
· 确认你的网站有一个 favicon.ico 文件放在网站的根下，如 /favicon.ico.每当有用户收藏网站/网页时，浏览器会自动请求这个文件，就算这个图标文件没有在你的网页中明显说明，浏览器也会请求。如果你没有这个文件，就会出大量的404错误，这会消耗你的服务器带宽，服务器返回404页面会比这个ico文件可能还大
· 知道单个页面的http请求数越少越好
· 顺序加载和异步加载的优劣，何时需要使用AJAX？懒加载的意义，用于何处？
· 如何使用性能测试工具Jmeter/LR等开展性能测试？
6. SEO
只要是WEB应用，都会有SEO，因为它是种免费的搜索引擎推广方式，否则在百度搜索你们网站，是没有结果的。所以，你需要知道：
· XML sitemap的意义，可以让搜索引擎了解你的网站地图
· 了解 robots.txt 和搜索引擎爬虫是如何工作的
· 搜索引擎喜欢什么样的URL？
· 重定向301和302对于搜索引擎的意义？
· 网页Meta信息中title，description等的重要性
7. 用户体验
网站的功能只是说实现了什么，而用户体验则诠释了做的有多好，用户使用起来是否有难度，是否会爱上这个网站（当然12306除外，咯咯）
· 访问网站的用户操作行为是怎么样的？页面的访问频率占比如何？因为测试的精力和侧重点也要根据这个数据而定
· 网站部署时是否会影响到用户使用，如何避免？
· 不要直接显示不友好的错误提示，是否有友好的提示信息？
· web应用不能泄漏用户的隐私信息
· 页面是在当前页打开还是另开一个tab？
· 页面元素的布局如何影响到用户体验的？
8. 使用工具
· HttpWatch，基于IE的网络数据分析工具，包括网页摘要，Cookies管理，缓存管理，消息头发送/接受，字符查询，POST 数据和目录管理功能等
· FireBug，用途同上，基于firefox的
· Yslow，前端网站性能工具，显示测试结果的分析,分为等级、组件、统计信息
· Fiddler，强大的web前端调试工具，它能记录/拦截所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据，也可用于安全测试
· Chrome扩展程序：浏览器兼容性检测工具，分析网站的兼容性情况
· ShowIP：显示访问网站的IP，web测试中你是否经常因为访问的网站IP不对，而被开发人员BS呢？它能帮助到你。
