浏览器相关的前端知识

1、输入url到展现页面过程发生了什么？

URL(Uniform Resource Locator)统一资源定位符，用于定位互联网上资源

 scheme://host.domain:port/path/filename 

• scheme:定义因特网服务的类型，常见的类型有:HTTP HTTPS和GTP。
• host:定义域主机(http默认是www)
• domain:定义因特网域名，好比xxx.com.cn
• port:定义主机上的端口号(http:默认是80)
• path：定义服务器上的路径
• filename:定义文档/资源的名称

1. DNS解析:将域名解析成IP地址

在浏览器输入网址后，首先要通过域名解析，由于浏览器并不能直接经过域名找到对应的服务器，而是要经过IP地址，之因此咱们用的是域名而不是IP，是由于IP是一段数字，特别不容易记住，而域名其实就是IP的假装者。

什么是域名解析：DNS协议提供经过域名查找IP地址，或者是反向经过IP查找域名的服务。DNS是一个网络服务器，咱们的域名解析简单来讲就是DNS上记录一条信息记录。

1.1 递归查询

主机向本地域名服务器的查询通常都是采用递归查询。
所谓递归查询就是:若是主机所查询的本地域名服务器不知道被查询域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其余根域名服务器继续发出查询的请求报文(即替该主机继续查询)，而不是该主机本身进行下一步的查询，所以，递归查询返回的查询结果或者是所要查询的IP地址，或者是报错，表示没法查询所需的IP地址。

1.2 迭代查询

本地域名服务器向根域名服务器查询一般是采用迭代查询。
迭代查询的特色是这样的:当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地域名服务器:“你下一步应当向哪个域名服务器进行查询”。而后让本地域名服务器进行后续的查询(而不是代替本地域名服务器进行后续的查询)。根域名服务器一般是把本身知道的顶级域名服务器的IP地址告诉本地域名服务器。让本地域名服务器再向顶级域名服务器查询。顶级域名服务器在收到本地域名服务器的查询请求后，那么给出所要查询的IP地址，要么告诉本地域名服务器下一步应当向哪个权限域名服务器进行查询，本地域名服务器就这样进行迭代查询，最后，知道了所要解析的域名的IP地址，而后把这个结果返回给查询的主机。固然，本地域名服务器也能够采用递归查询，这取决于最初的查询请求报文的设置是要求使用哪种查询方式。

• 浏览器先检查自身缓存中有没有被解析过的这个域名对应的IP地址，若是有解析结束，同时域名被缓存的时间也可经过TTL属性来设置。
• 若是浏览器缓存中没有命中(没有)，浏览器会检查操做系统缓存中有没有对应的已解析的结果。而操做系统也有一个域名解析的过程，在windows中可经过C盘里面一个叫作hosts的文件来设置，若是你在这里指定一个域名对应的IP地址，那浏览器会首先使用这个IP地址。可是这种操做系统级别的域名解析过程也被不少黑客利用，经过修改你的hosts文件里的内容吧特定的域名解析到他指定的IP地址仍是那个，形成全部的域名劫持。因此在window7中将hosts文件设置成了readonly，防止恶意篡改
• 若是尚未命中域名，才会真正的请求本地域名服务器(LDNS)来解析和这个域名，这个服务器通常在你的城市的某个角落，距离不是很远，并且这台服务器的性能很好，通常都会缓存域名解析结果，大约80%的域名解析到这里就完成了。浏览器(主机)向其本地域名服务器进行的是递归查询。
• 本地域名服务器采用迭代查询，它先向下一个根域名服务器查询
• 根域名服务器若是有查询的IP的值则返回，没有命中，则告诉本地域名服务器，下一次查询的顶级域名服务器的IP的值
• 本地域名服务器向收到的顶级域名服务器进行查询
• 顶级域名服务器若是有查询的IP地址则返回，没有命中，则告诉本地域名服务，下一次查询的权限域名服务器的IP的地址
• 本地域名服务器向权限域名服务器进行查询
• 权限域名服务器告诉本地域名服务器，所查询的IP地址
• 本地域名服务器最后把查询的结果告诉浏览器(主机)。

本部分摘自：https://blog.csdn.net/qq_37288477/article/details/86582130

2. TCP链接:TCP的三次握手

3. 发送HTTP请求

请求方法:GET,POST,PUT,DELETE,HEAD,OPTIONS,TRACE,PATCH

4. 服务器处理请求并返回HTTP报文

主要讲HTTP的响应报文

包含协议版本，状态码，状态码描述

响应行：协议版本，状态码，状态码描述

响应头部:响应报文的附加信息，有名/值对组成

响应主题包含回车符，换行符，响应返回数据

5. 浏览器解析渲染页面

浏览器渲染页面一共有五个步骤

• 根据HTML解析出DOM树
• 根据CSS解析生成CSS规则树
• 结合DOM树和CSS规则树，生成渲染树
• 根据渲染树计算每个节点的信息
• 根据计算好的信息绘制页面

5.1 根据 HTML 解析 DOM 树

• 根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的全部子节点，再构建下一个兄弟节点。
• 在读取 HTML 文档，构建 DOM 树的过程当中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

5.2 根据 CSS 解析生成 CSS 规则树

• 解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
• 浏览器在 CSS 规则树生成以前不会进行渲染。

5.3 结合 DOM 树和 CSS 规则树，生成渲染树

• DOM 树和 CSS 规则树所有准备好了之后，浏览器才会开始构建渲染树。
• 精简 CSS 并能够加快 CSS 规则树的构建，从而加快页面相应速度。

5.4 根据渲染树计算每个节点的信息（布局）

• 布局：经过渲染树中渲染对象的信息，计算出每个渲染对象的位置和尺寸
• 回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就须要倒回去从新渲染。

5.5 根据计算好的信息绘制页面

• 绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上
• 重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引发浏览器的重绘。
• 回流：某个元素的尺寸发生了变化，则需从新计算渲染树，从新渲染。

6. 断开链接:TCP四次挥手

2、重绘与回流

重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时因为只须要UI层面的从新像素绘制，所以 损耗较少
回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会从新渲染页面，称为回流。此时，浏览器须要从新通过计算，计算后还须要从新页面布局，所以是较重的操做。会触发回流的操做:

• 页面初次渲染
• 浏览器窗口大小改变
• 元素尺寸、位置、内容发生改变
• 元素字体大小变化
• 添加或者删除可见的 dom 元素
• 激活 CSS 伪类（例如：:link  :visited  :hover  :active）
• 查询某些属性或调用某些方法
• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

回流一定触发重绘，重绘不必定触发回流。重绘的开销较小，回流的代价较高。

3、防抖与节流

防抖与节流函数是一种最经常使用的高频触发优化方式，能对性能有较大的帮助.

1. 防抖

• 定义： 合并事件且不会去触发事件，当必定时间内没有触发这个事件时，才真正去触发事件。

• 原理：对处理函数进行延时操做，若设定的延时到来以前，再次触发事件，则清除上一次的延时操做定时器，从新定时。

• 场景： keydown事件上验证用户名，用户输入，只需再输入完成后作一次输入校验便可。

function debounce(fn, wait, immediate) {
    let timer = null
    return function() {
        let args = arguments
        let context = this
        if (immediate && !timer) {
            fn.apply(context, args)
        }
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

2. 节流

• 定义： 持续触发事件时，合并必定时间内的事件，在间隔必定时间以后再真正触发事件。每间隔一段时间触发一次。

• 原理：对处理函数进行延时操做，若设定的延时到来以前，再次触发事件，则清除上一次的延时操做定时器，从新定时。

• 场景： resize改变布局时，onscroll滚动加载下面的图片时。

方法一：使用时间戳。

当触发事件的时候，咱们取出当前的时间戳，而后减去以前的时间戳(最一开始值设为0)，若是大于设置的时间周期，就执行函数，而后更新时间戳为当前的时间戳，若是小于，就不执行。

缺陷：第一次事件会当即执行，中止触发后没办法再激活事件。

function throttle(fn, interval) {
var previousTime = +new Date()

    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
   }
}

方法二：使用定时器

当触发事件的时候，咱们设置一个定时器，再触发事件的时候，若是定时器存在，就不执行，直到定时器执行，而后执行函数，清空定时器，这样就能够设置下个定时器。

缺陷：第一次事件会在n秒后执行，中止触发后依然会再执行一次事件。

function throttle(fn, interval) {
    var timer
    return function (){
        var that = this
        var args = arguments

   if(!timer){
        timer = setTimeout(function () {
            fn.apply(that, args)
            timer = null
         }, interval)
        }
    }
}

方法三：优化

鼠标移入能马上执行，中止触发的时候还能再执行一次。

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

本部分摘自：http://www.javashuo.com/article/p-wvzbwgee-t.html

4、cookies、session、sessionStorage、localStorage

浏览器的缓存机制提供了能够将用户数据存储在客户端上的方式，能够利用cookie,session等跟服务端进行数据交互。

1. cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1）保持状态：cookie保存在浏览器端，session保存在服务器端

2）使用方式：

　　cookie机制：若是不在浏览器中设置过时时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。若是在浏览器中设置了cookie的过时时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过时时间结束才消失。Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。

　　session机制：当服务器收到请求须要建立session对象时，首先会检查客户端请求中是否包含sessionid。若是有sessionid，服务器将根据该id返回对应session对象。若是客户端请求中没有sessionid，服务器会建立新的session对象，并把sessionid在本次响应中返回给客户端。一般使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。若是用户禁用cookie，则要使用URL重写，能够经过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不作任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3）存储内容：cookie只能保存字符串类型，以文本的方式；session经过相似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4）存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5）安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

• sessionID存储在cookie中，若要攻破session首先要攻破cookie；
• sessionID是要有人登陆，或者启动session_start才会有，因此攻破cookie也不必定能获得sessionID；
• 第二次启动session_start后，前一次的sessionID就是失效了，session过时后，sessionID也随之失效。
• sessionID是加密的
• 综上所述，攻击者必须在短期内攻破加密的sessionID，这很难。

6）应用场景：

cookie：

• 判断用户是否登录过网站，以便下次登陆时可以实现自动登陆（或者记住密码）。若是咱们删除cookie，则每次登陆必须重新填写登陆的相关信息。
• 保存上次登陆的时间等信息。
• 保存上次查看的页面
• 浏览计数

session：Session用于保存每一个用户的专用信息，变量的值保存在服务器端，经过SessionID来区分不一样的客户。

• 网上商城中的购物车
• 保存用户登陆信息
• 将某些数据放入session中，供同一用户的不一样页面使用
• 防止用户非法登陆

7）缺点：

cookie：

• 大小受限（4k）
• 用户能够操做（禁用）cookie，使功能受限
• 安全性较低
• 有些状态不可能保存在客户端。
• 每次访问都要传送cookie给服务器，浪费带宽。
• cookie数据有路径（path）的概念，能够限制cookie只属于某个路径下。

 session：

• Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
• 依赖于cookie（sessionID保存在cookie），若是禁用cookie，则要使用URL重写，不安全
• 建立Session变量有很大的随意性，可随时调用，不须要开发者作精确地处理，因此，过分使用session变量将会致使代码不可读并且很差维护。

JS设置cookie： document.cookie="name="+username; 

JS读取cookie:   假设cookie中存储的内容为：name=jack;password=123

//设置cookie
function setCookie(cname, cvalue, exdays) {
 var d = new Date();
 d.setTime(d.getTime() + (exdays*24*60*60*1000));
 var expires = "expires="+d.toUTCString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}

//读取
function getCookie(name){
　　var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
　　if(arr=document.cookie.match(reg))
　　　　return unescape(arr[2]);
　　else
　　　　return null;
}
//删除
function delCookie(name){
　　var exp = new Date();
　　exp.setTime(exp.getTime() - 1);
　　var cval=getCookie(name);
　　if(cval!=null)
　　　　document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

 

//建立cookie
function setCookie(name, value, expireday) {
    var exp = new Date();
    exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限
    document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//建立cookie
}
//提取cookie中的值
function getCookie(name) {
    var cookieStr = document.cookie;
    if(cookieStr.length > 0) {
        var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
        for (var i=0; i<cookieArr.length; i++) {
            var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
            if(cookieVal[0] == name) {
                return unescape(cookieVal[1]); //返回须要提取的cookie值
            }
        }
    }
}

 

2. sessionStorage、localStorage

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。因为cookie存储机制有不少缺点，HTML5再也不使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它能够在客户端本地创建一个数据库，本来必须保存在服务器端数据库中的内容如今能够直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所通过的这段时间，也就是用户浏览这个网站所花费的时间。session对象能够用来保存在这段时间内所要求保存的任何数据。

localStorage：将数据保存在客户端本地的硬件设备(一般指硬盘，也能够是其余硬件设备)中，即便浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然能够继续使用。

这二者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

到目前为止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的浏览器支持sessionStorage与localStorage的使用。

WebStorage的目的是克服由cookie所带来的一些限制，当数据须要被严格控制在客户端时，不须要持续的将数据发回服务器。

WebStorage两个主要目标：①提供一种在cookie以外存储会话数据的路径。②提供一种存储大量能够跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1）生命周期：

localStorage:localStorage的生命周期是永久的，关闭页面或浏览器以后localStorage中的数据也不会消失。localStorage除非主动删除数据，不然数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即便刷新页面或者进入同源另外一个页面，数据依然存在。可是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不同的。

2）存储大小：localStorage和sessionStorage的存储数据大小通常都是：5MB

3）存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通讯。

4)   存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可使用ECMAScript提供的JSON对象的stringify和parse来处理

5)   获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6)   应用场景：localStoragese：经常使用于长期登陆（+判断用户是否已登陆），适合长期保存在本地的数据。sessionStorage：敏感帐号一次性登陆；

WebStorage的优势：

1）存储空间更大：cookie为4KB，而WebStorage是5MB；

2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据能够直接获取，也不会像cookie同样美词请求都会传送到服务器，因此减小了客户端和服务器端的交互，节省了网络流量；

3）对于那种只须要在用户浏览一组页面期间保存而关闭浏览器后就能够丢弃的数据，sessionStorage会很是方便；

4）快速显示：有的数据存储在WebStorage上，再加上浏览器自己的缓存。获取数据时能够从本地获取会比从服务器端获取快得多，因此速度更快；

5）安全性：WebStorage不会随着HTTP header发送到服务器端，因此安全性相对于cookie来讲比较高一些，不会担忧截获，可是仍然存在伪造问题；

6）WebStorage提供了一些方法，数据操做比cookie方便；

　　　　setItem (key, value) ——  保存数据，以键值对的方式储存信息。

      　　 getItem (key) ——  获取数据，将键值传入，便可获取到对应的value值。

        　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        　　clear () ——  删除全部的数据

        　　key (index) —— 获取某个索引的key

5、浏览器内核

浏览器内核是什么？英文叫作：Rendering Engine，顾名思义，就是用来渲染网页内容的，将开发者写的代码转换为用户能够看见的完美页面。因为牵扯到排版问题，因此确定会排版错位等问题。为何会排版错位呢？有的是因为网站自己编写不规范，有的是因为浏览器自己的渲染不标准。如今有几个主流的排版引擎，由于这些排版引擎都有其表明的浏览器，因此经常会把排版引擎的名称和浏览器的名称混用，好比常的说IE内核、Chrome内核。其实这样子是不太合理的，由于一个完整的浏览器不会只有一的排版引擎，还有本身的界面框架和其它的功能相辅相成的，而排版引擎自己也不可能实现浏览器的全部功能。

(1)Trident内核，因为被微软采用，并得益于微软操做系统的普及，之前几乎一统天下，因此又称为“IE内核”，主要浏览器有IE系列浏览器；

(2)Gecko内核，由于被Mozilla FireFox浏览器采用并获得开发者的进一步丰富，又被称为“Firefox内核”；

(3)WebKit内核，是Safari浏览器使用的内核，由Apple研发。 Google Chrome、Opera及各类国产浏览器高速模式也使用Webkit做为内核。

(4)Blink内核，由Google和Opera Software共同开发的浏览器内核，如今Chrome（28及日后版本）、Opera（15及日后版本）都将Webkit内核换成了Blink内核。