复习

2017-08-30  本文已影响17人  放风筝的小小马

JS跨域

同源策略

浏览器出于安全方面的考虑，只允许本域下的接口交互；不同源的客户端脚本不允许相互访问
注意： 是浏览器阻止的

本域：

跨域的几种实现

1. JSONP

原理：利用script标签不受同源策略的限制，来达到与第三方通讯的目的；
操作：在需要通讯时，就创建一个script标签，然后将src指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数数据传递），第三方网站接收到请求后，将数据放到接收到的回调函数中，然后将其返回，本地网站接收到回应后，就执行回调函数，处理接收到的数据；
代码示例：
本地请求

document.querySelector('.change').addEventListener('click', function(e){
   var script = document.createElement('script');
   // 将回调函数放到callback参数中，当服务器拿到callback后，就将其组成一个函数，并将数据放到该函数中
   script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
   document.head.appendChild(script);
   document.head.removeChild(script);
 }, false);

 function appendHtml(news) {
   var fragment = document.createDocumentFragment();
   console.log(news);
   var html = '';
   news.forEach(function(val){
     html += '<li>' + val + '</li>';
   });
   document.querySelector('.news').innerHTML = html;
 }

服务器端

var cb = req.query.callback;
 if(cb){
  // 注意这一步（重要）：
  // 将接收收到的callback，组成一个函数，然后将数据放在里面并返回，浏览器端接收到该响应后，就调用回到函数，处理数据
    res.send(cb + '('+ JSON.stringify(data) + ')');
 }else{
   res.send(data);
 }

2. CROS（跨域资源请求Cross-Origin Resourse Sharing）

定义： 允许浏览器跨域向服务器发送XMLHttpRequest请求，从而克服ajax只能同源（同协议、同域名、同端口）使用的限制；
注意：CROS分为简单请求和非简单请求，

简单请求操作原理：

特点:

与JSONP的对比

3. 降域

当两个页面使用同一个基础域名，相同协议、相同端口，可以使用降域来实现跨域访问，通过设置：
window.domain = 主域名 来实现，
如下代码：

页面A的URL: http://a.smallmage.com/a.html
页面B的URL: http://b.smallmage.com/a.html
设置它们两个页面的：window.domain = "smallmage.com"

4. 使用HTML5的window.postMessage方法来跨域传输数据

适用于：两个iframe或两个页面之间
特点：无论是否同源，都可以使用它向其他页面发送数据

参考: 跨域的几种实现

Ajax

定义： 是一种通过js异步获取数据，进行页面的局部刷新的技术。
优点：

缺点：

手写一个ajax请求

var xhr = new XMLHttpRequest();
var url = "http://api.jirengu.com/fm/getChannels.php";
// true 表示异步
xhr.open('get', url, true);
xhr.onreadystatechange = function( ) {
 // 表示一次ajax结束
  if (xhr.readyState === 4) {
    console.log(xhr.status);
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log(JSON.parse(xhr.responseText));
    }     
  }
}
xhr.send();

xhr.readyState的值：

xhr.status的值：

HTTP

HTTP是什么？

HTTP是超文本传输协议，用于客户端与服务器进行超文本数据传输的一种协议，构建于TCP/IP协议之上

HTTP版本

总共有：HTTP0.9 、HTTP1.0、HTTP1.1（应用最广泛）、HTTP2.0（还未大规模应用）
HTTP0.9特点：

HTTP1.0特点：

HTTP1.1特点：

HTTP方法

HTTP请求的状态码

// 2xx 表示请求成功

// 3xx 一般是重定向

// 4xx：客户端请求错误

// 5xx：服务器端错误

报文的组成

报文分为：请求报文和响应报文

请求报文

由四部分组成： 请求行、header、空行、请求主体

请求行：
由：方法、URL和HTTP协议三部分组成，例如： GET /index.html HTTP/1.1

header：
header是最重要的部分，包含了请求的所有参数信息，它由key/value键值组成，每行一对，用 “:”隔开，如下：
User-Agent: 客户端类型
Accpt: 客户端可识别的内容类型列表
Host: 主机名
还有cookie，缓存相关的参数信息

空行：
发送回车符和换行符，用来说明header结束，接下来是请求主体

请求主体：
请求主体一般用于存放传输给服务器的数据
对GET请求，不存在请求主体，因为GET请求的数据都放在URL中传递过程
只有POST请求才有请求主体

响应报头

包含三部分：状态行、消息报头和响应正文

缓存

问题：面试题」简述浏览器缓存是如何控制的？
该问题考察的是浏览器访问已经访问过的页面时，如何控制缓存
步骤一：当浏览器对某个资源的请求命中了强缓存时，则从缓存中取
强缓存的命中主要通过以下两种方式来确定：

步骤二：没有命中强缓存，则需要发送一个请求到服务器，验证协商缓存是否命中，如果命中，则还是从客户端缓存中加载。协商缓存利用的是[last-modify, if-modify-since]和[ETag, if-not-match]这两对header来管理：

参考：
简述浏览器缓存是如何控制的
强缓存与协商缓存

性能优化

为什么要性能优化？

性能优化的方法？

主要可以分为三块来进行

加载速度优化

为什么加载速度慢呢？导致的原因：文件太大、请求太多

文件压缩

减少http请求

服务器端的改善

代码的优化

体验的优化

Webpack、gulp、requirejs的区别

网络攻击

XSS

XSS（Cross-Site-Scripting）：跨站脚本
原理： 在有用户输入的地方，使用一个脚本替换掉用户输入的内容，当用户提交时，如果后端没有对数据进行处理，而是原样输出给前端，那么恶意脚本就会运行，利用XSS插入恶意脚本，可以获取到用户的个人信息，如cookie

防范：

CSRF

CSRF（Cross Site Request Forgery）：跨站请求伪造
原理：攻击者构造网站后台某个功能接口，诱导用户点击或者使用特殊方法让该请求地址自动加载。用户在登录状态下这个请求被服务器端接收会被误以为是合法操作；
防范：

HTML & CSS部分

上一篇 下一篇

猜你喜欢

热点阅读