Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

部分经典面试题相关文章解析 #5

Open
include-all opened this issue Mar 6, 2020 · 0 comments
Open

部分经典面试题相关文章解析 #5

include-all opened this issue Mar 6, 2020 · 0 comments

Comments

@include-all
Copy link
Owner

include-all commented Mar 6, 2020

网络

  1. HTTP各种状态码的含义

  2. retful的相关知识
    如何给老婆解释什么是RESTful
    RESTful API 设计指南

  3. https://www.jianshu.com/p/9c95db596df5
    last-modified:文件的修改时间,精确到秒

  4. 介绍 HTTPS 握手过程

  1. 客户端使用https的url访问web服务器,要求与服务器建立ssl连接
  2. web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
  3. 客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
  4. 客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
  5. 之后服务器与客户端使用秘钥加密传输
  1. 介绍下 HTTPS 中间人攻击

中间人攻击过程如下:

  1. 服务器向客户端发送公钥。
  2. 攻击者截获公钥,保留在自己手上。
  3. 然后攻击者自己生成一个【伪造的】公钥,发给客户端。
  4. 客户端收到伪造的公钥后,生成加密hash值发给服务器。
    5.攻击者获得加密hash值,用自己的私钥解密获得真秘钥。
    6.同时生成假的加密hash值,发给服务器。
    7.服务器用私钥解密获得假秘钥。
    服务器用加秘钥加密传输信息

防范方法:
服务端在发送浏览器的公钥中加入CA证书,浏览器可以验证CA证书的有效性

  1. HTTPS 握手过程中,客户端如何验证证书的合法性

(1)首先浏览器读取证书中的证书所有者、有效期等信息进行校验,校验证书的网站域名是否与证书颁发的域名一致,校验证书是否在有效期内
(2)浏览器开始查找操作系统中已内置的受信任的证书发布机构CA,与服务器发来的证书中的颁发者CA比对,用于校验证书是否为合法机构颁发
(3)如果找不到,浏览器就会报错,说明服务器发来的证书是不可信任的。
(4)如果找到,那么浏览器就会从操作系统中取出颁发者CA 的公钥(多数浏览器开发商发布
版本时,会事先在内部植入常用认证机关的公开密钥),然后对服务器发来的证书里面的签名进行解密
(5)浏览器使用相同的hash算法计算出服务器发来的证书的hash值,将这个计算的hash值与证书中签名做对比
(6)对比结果一致,则证明服务器发来的证书合法,没有被冒充

  1. http1.0,http1.x,http2.0的区别
    深入理解http1.x、http 2和https

web安全相关

XSS和CRSF的理解

  1. XSS和CSRF的理解

  2. XSS攻击的三种基本形式解析
    上文对Dom型XSS的解释不够明确,下文解释更加清晰一些
    DOM型xss深度剖析

Hybrid App相关理解

  1. Hybrid App技术解析 -- 原理篇

  2. Hybrid App的优缺点

手写代码相关

  1. 如何写出一个惊艳面试官的深拷贝?

HTML相关

  1. 在 HTML 中如何做 SEO 优化?

  2. 首屏和白屏时间如何计算?

  3. offset,client,scroll属性
    DOM 中的 offset 属性
    offsetLeft,Left,clientLeft的区别
    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

CSS相关

  1. 了解 Flex 布局么?平常有使用 Flex 进行布局么?

  2. 高度塌陷及BFC问题
    清除和去除浮动
    学习 BFC (Block Formatting Context)

js相关

  1. Object.keys()和for in的区别

for in用于对象遍历, for key in obj ..., Object.keys()返回key的集合数组。
两者之间最主要的区别就是Object.keys( )不会走原型链,而for in 会走原型链

  1. 理解JavaScript的prototype和__proto__

  2. Generator 实现

  3. 防抖节流中的apply的第一个参数this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖节流的学习</title>
</head>
<body>
    <input id="inp">
</body>

<script>
    /**
     * 防抖节流中apply里面的this很关键
     * 加上 apply this 确保 在 sayHi 函数里的 this 指向的是 input对象(不然就指向 window 了,不是我们想要的)。这里的箭头函数依旧是指向 input 对象。
     * 该有 如果return的不是function,而是箭头函数,那this就绑定无效了,一定要是function,打印的话function的this是<input id="inp">,() => {}是window{...}
     * @param fn
     * @returns {Function}
     */
    function debounce(fn) {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return  () => {
            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
            timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
                fn.apply(this, arguments);
            }, 500);
        };
    }
    function sayHi() {
        console.log('防抖成功');
        console.log(this);
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖
</script>
</html>
  1. setTimeout、setInterval的第三个参数

  2. js 函数的this指向

this的指向问题,this与他在哪里定义无关,而与他在哪里调用有关,比如button的onclick里面的this指向的就是button

Vue相关

  1. vue的双向绑定原理及实现

  2. vue中watch的顺序
    浅谈 vue 中的 watcher

3.vue内部怎么保证watcher的调用顺序
【玩转Vue.js】异步队列那点事

React相关

  1. redux中,combineReducers情况下初始值如何赋值给多个reducer的问题
function a(state = 'lol', action) {
  return state;
}

function b(state = 'wat', action) {
  return state;
}
// const combined = combineReducers({ a, b })
function combined(state = {}, action) {
  return {
	a: a(state.a, action),
	b: b(state.b, action)
  };
}

import { createStore } from 'redux';
let store = createStore(combined, { a: 'initA' ,b: 'initB'});
//此时createStore传进去的initialState,会被combineReducers分别按照reducer的名字,从initialState
//中取出对应的属性名的值,作为各个reducer的初始值

参考自:redux中文文档——初始化State

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant