CSS
图片懒加载思路
判断图片所在位置是否在可视区内,图片可视区内进行加载,提供三种判断
元素距离上方控件顶部的距离 <可视区域高度 +卷去的页面高度
- offsetTop< clientHeight+ scrollTop Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 2.element.getBoundingClientRect().top < client IntersectionObserver 什么是intersectionObserver InterSectionObserver示例
HTML
JS
谈谈跨域
什么是跨域
跨域是因为浏览器的同源策略导致的,协议,域名,端口号相同即为同源,不同源即跨域 跨域的影响
- 缺少了同源策略,浏览器很容易受到XSS,CSFR攻击
- 跨域的情况下,浏览器限制了我们
- Cookie,LocalStorage,indexedDB存存储性内容无法读取
- DOM结点和js对象无法获取
- AJAX请求被拦截
如何处理跨域
document.domain+iframe跨域
document.domain只在主域名相同,子域名不同的情况
比如:
http://aaa.hahaha.com/a.html
http://bbb.hahaha.com/b.html
缺陷
- 首先，仅在主域名相同，子级域名不同的情况下
- 只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 数据无法通过这种方法共享
location.hash + iframe跨域
不同域使用iframe和 location.hash只能单向传值,需要中间页面当媒介
a 与 b 不同域只能通过hash值单向通信，b 与 c 也不同域也只能单向通信，但 c 与 a 同域，所以 c 可通过parent.parent 访问 a 页面所有对象 a 传值给b, b传值给a, a和c同域,可以相互访问
window.name + iframe跨域
window.postMessage
JSONP
原理： json with padding(填充)
创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调，就是 JSONP 的简单实现模式 手写JSONP
(function (window, document) {
"use strict";
var jsonp = function (url, data, callback) {
// 1.将传入的data数据转化为url字符串形式
// {id:1,name:'jack'} => id=1&name=jack
var dataString = url.indexOf('?') == -1 ? '?' : '&';
for (var key in data) {
dataString += key + '=' + data[key] + '&';
};
// 2 处理url中的回调函数
// cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.', '');
dataString += 'callback=' + cbFuncName;
// 3.创建一个script标签并插入到页面中
var scriptEle = document.createElement('script');
scriptEle.src = url + dataString;
// 4.挂载回调函数
window[cbFuncName] = function (data) {
callback(data);
// 处理完回调函数的数据之后，删除jsonp的script标签
document.body.removeChild(scriptEle);
}
document.body.appendChild(scriptEle);
}
window.$jsonp = jsonp;
})(window, document)
CORS跨域资源共享
CORS跨域需要浏览器和服务器同时支持,IE>10 CORS通信,都是浏览器自动完成的,浏览器一旦发现跨域请求,会自动添加一些附加的头信息,有时会都出一次附加请求(预检options) 浏览器将CORS请求分为两类: 简单请求 和非简单请求
简单请求
同时满足两点
- 请求方法是
HEAD,GET,POST之一 - HTTP头部信息最后包含以下几个字段
- Accept
- Accept-language
- Content-Language
- ast-Event-ID
- Content-type(只限三个值:
pplication/x-www-form-urlencoded、multipart/form-data、text/plain) 对于简单请求,浏览器会直接发出CORS请求, 头部会自动添加一个origin字段来说明请求的来源(协议+域名+端口),服务器会根据这个值判断是否同意跨域 非简单请求 不是简单的,就是非简单 非简单请求,浏览器会发送一次预检(preflight)请求(opitons请求) 在预检请求中包含字段
OriginAccess-Control-Request-MethodAccess-Control-Request-HeaderswithCredentials CORS 默认不携带cookie 和HTTP认证信息, 如果需要携带cookies,前端配置 withCredentials:true, 后端配置Access-Control-Allow-Credentials
Nginx反向代理接口跨域
原理就是 跨域是浏览器的,服务器访问服务器不存在
Node代理跨域
webpack-dev-server配置
原理和nginx node 一致
