前端面试准备---浏览器和网络篇（一）

本文主要内容：

1. AJAX
2. GET和POST请求的区别
3. 同源策略、JSONP、跨域方式
4. 浏览器架构
5. 输入一个Url到加载网页的全过程，发生了什么？
6. 浏览器渲染的步骤
7. 重绘和回流
8. 页面渲染优化

• 什么是AJAX?

• AJAX实现的步骤：

1. 创建请求对象
2. 与服务端创建连接，执行open方法；
3. 发送请求，执行send方法；
4. 为请求对象绑定onreadystate事件，当readyState为4 且 status为200时处理数据；

• AJAX封装

function Ajax(options) {
    var xhr = null;
    var params = formsParams(options.data);
    // 第一步： 创建请求对象
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // 兼容IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 第二步： 连接，执行open和send方法；
    if(options.type == 'GET') {
        xhr.open(options.type, options.url + '?' + params, options.async);
        xhr.send();
    } else if(options.type == 'POST') {
        xhr.open(options.type, options.url, options.async);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
    }
    // 绑定onreadystatechange事件
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            options.success(xhr.responseText);
        }
    }
 
    function formsParams(data) {
        var arr = [];
        for(var i in data) {
            arr.push(i + '=' + data[i]);
        }
        arr.join('&');
    }
}复制代码

Ajax({
    type: 'GET',
    url: 'a.php',
    async: true,
    data: {
        name: 'zhangsan',
        age: 10
    },
    success: function(data) {
        console.log(data);
    }
});复制代码

• AJAX的优缺点：

1. 实现局部刷新
2. 减轻服务器端压力

1. 破坏浏览器前进和后退机制；
2. 一个页面ajax请求过多，会造成页面加载缓慢；
3. 数据安全问题不太好，可以采用数据加密的方式；

• readyState状态码：

• staus状态码：

GET和POST请求的区别

• 区别要点：

关于安全方面，其实GET和POST两者都不安全。 虽然POST请求的数据不携带在URL上，但是因为HTTP在网络传输的时候是明文传输的，所以，只要使用抓包工具，能轻而易举的获取数据； 想要安全传输，只有加密，可以前端将传输参数进行加密，也可以才用HTTPS；

• 区别见下图，来源 W3school

同源策略、JSONP、跨域方式

• 含义：

• JSONP

function jsonp(url, callback, success) {
    var script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.type = 'text/javascript'; 
    window[callback] = function(data) {
        success && success(data);
    }
 
    document.body.appendChild(script);
}复制代码

• 跨域的其他方法

1. 设置 CORS: Access-Control-Allow-Origin：*

浏览器架构

先解释一个概念： 线程(Thread)：线程是进程的一部分，并且执行进程中的一部分程序； 进程 (Process)：启动一个程序，就会创建一个进程，操作系统为其分配内存，进程中的所有线程中的所有程序状态都保存到该内存中，关闭程序，进程也会消失，内存会释放；

• 可能是一个有很多线程的进程
• 也可能是有少量线程的多个进程，通过IPC进行通信

• 多进程的好处

1. 多进程的设计可以使多个标签页面的加载不受其他的影响；
2. 安全性和沙盒，每个进程有自己独立的存储空间

• Chrome浏览器的一些机制

1. 由于每个进程都有自己的存储空间，它通常包含公共基础结构的副本（例如V8引擎），这样会消耗很多内存空间；

• 浏览器的组成

1. 用户界面（User Interface）
2. 浏览器引擎（browser engine）
3. 渲染引擎（rendering engine）
4. 网络（Networking）
5. 用户界面后段（UI Backend）
6. JavaScript解析器(JavaScript Interpreter)
7. 数据存储（Data persistence）

输入一个Url到加载网页的全过程，发生了什么？

1. 域名解析：浏览器将URL解析出相对应的服务器的IP地址（现在本地浏览器的DNS缓存中查找，没有的话，再向浏览器默认的DNS服务器发送查询请求，同时缓存），并从url中解析出端口号
2. 浏览器与目标服务器建立一条TCP连接（三次握手）；
3. 浏览器向服务器发送一条HTTP请求报文
4. 服务器返回给浏览器一条HTTP响应报文
5. 关闭连接，解析文档
6. 浏览器进行渲染
7. 如果文档中资源加载就再次建立连接，直至资源全部加载完毕

浏览器渲染的步骤

1. HTML解析出DOM Tree
2. CSS解析出Style Rules
3. 两者关联生成Render Tree
4. Layout（布局）根据Render Tree 计算每个节点的信息
5. Painting 根据计算好的信息进行渲染整个页面

浏览器解析文档的过程中， 如果遇到script标签，会立即解析脚本，停止解析文档（因为JS可能会改变DOM和CSS,如果继续解析会造成浪费）。 如果是外部script, 会等待脚本下载完成之后在继续解析文档。现在script标签增加了defer和async属性，脚本解析会将脚本中改变DOM和css的地方解析出来，追加到DOM Tree 和 Style Rules上

重绘和回流

$('body').css('color', 'red'); // repaint
$('body').css('margin', '2px'); // reflow, repaint
 
var bstyle = document.body.style; // cache
 
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint
 
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
 
bstyle.fontSize = "2em"; // reflow, repaint
 
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));复制代码

页面渲染优化

1. HTML文档结构层次尽量少，最好不深于6层
2. 脚本尽量放后边，避免组织页面加载
3. 少量首屏样式可以放在便签内
4. 样式结构层次尽量简单
5. 脚本减少DOM操作，减少回流，尽量缓存访问DOM的样式信息
6. 尽量减少JS修改样式，可以通过修改class名的方式解决
7. 减少DOM查找，缓存DOM查找结果
8. 动画在屏幕外或页面滚动时，尽量停止