勤能补拙-每日5题基础面试题

93 阅读3分钟

CSS

图片懒加载思路

判断图片所在位置是否在可视区内,图片可视区内进行加载,提供三种判断

元素距离上方控件顶部的距离 <可视区域高度 +卷去的页面高度

  1. 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请求) 在预检请求中包含字段
  • Origin
  • Access-Control-Request-Method
  • Access-Control-Request-Headers withCredentials CORS 默认不携带cookie 和HTTP认证信息, 如果需要携带cookies,前端配置 withCredentials:true, 后端配置Access-Control-Allow-Credentials

Nginx反向代理接口跨域

原理就是 跨域是浏览器的,服务器访问服务器不存在

Node代理跨域

webpack-dev-server配置

原理和nginx node 一致

webSocket跨域

框架知识

浏览器

安全

算法与数据结构