面试题记录

1.href 和 src的 区别

src是引入，用于替换当前元素；

src表示外部资源引入，用于替换当前元素，用在img，script，iframe等元素上，src是页面内容不可缺少的一部分。 在遇到src时浏览器会等待这一部分下载运行结束才会继续处理下面的网页，这也是为什么<script>标签最好放在网页底部。

href是引用，用于在当前文档和引用资源之间确立联系。

href引用的内是外部资源而非网页不可或缺的一部分，因此在遇到href时浏览器会在下载CSS文件的同时去处理网页的其他部分。

2.html文档的加载顺序

待续。。。

3.由jseeionid引起的误区

起因就是，先是在问浏览器这边的储存数据的方式，然后突然跳转到cookie和session上，我当时被问的有点懵就搞混了。

先说cookie和session

cookie

HTTP协议本身是无状态的，你发起一次请求，浏览器压根不认识你是谁。所以就要想办法要服务器知道你是你咯，所以最早（我也不知道啥时候）的时候cookie出现了。

cookie是前端的一种储存机制，内容为字符串形式，有大小限制。js可写可读，服务器通过头信息可写可读。特殊的地方在于，当浏览器发起http请求时，如果检测到该域名下存在cookie，就会把cookie放在请求头里，发送给服务器。

由于每次请求浏览器都会帮你带上cookie，这个特性很方便的就被用来做身份识别了，比如你把你的名字放在cookie里，然后服务端就能知道是你发起的http请求了。由于cookie最终是存放在前端这边的，所以有个专业的名词，客户端保持状态的方案。

cookie让http请求可以变成有状态的了，但由于cookie前端可进行读写，也就意味着你可以随意变成你想变的人，然后欺骗服务器。这意味着cookie是不安全的。

session

session机制是一种服务器端的机制。也是用来保存状态的。不同的是，状态保存的地方在服务器了。服务端会出现同时保存多个状态，这个时候就需要给每个状态一个标识，一般叫做sessionid（Tomcat里叫jsessionid，就是这个当时把我坑了，我记得在哪里见过，又想不起来是做啥的了），而这个sessionid还是需要保存在前端的，然后请求的时候，需要一起发给服务器。至于前端怎么保存sessionid其实无所谓，但常用的，好用的当然是借助cookie来保存这个sessionid了，简洁又方便。

由于sessionid最终还是需要保存到前端去的，所以sessionid其实也可以冒充。其实也算不上安全。

再说储存方式 cookie sessionStorage localStorage

前端的三种常用的储存数据的方式，当然还有其它的比如indexDB，我基本上没用过，就不列出来了。

cookie

cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。

我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域

一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。

每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。

cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁。

expires 是 http/1.0协议中的选项，在新的http/1.1协议中expires已经由 max-age 选项代替，两者的作用都是限制cookie 的有效时间。expires的值是一个时间点（cookie失效时刻= expires），而max-age 的值是一个以秒为单位时间段（cookie失效时刻= 创建时刻+ max-age）。

localStorage

HTML5新方法，支持IE8及以上浏览器

生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

存储的信息在同一域中是共享的。

当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

localStorage受同源策略的限制

sessionStorage

其实跟localStorage差不多，也是本地存储，会话本地存储。

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

三个的对比

4.对象数组的问题

一个对象数组，然后利用for循环进行遍历，新建一个空数组，将每项push到新数组里，对新数组的对象进行改变，会改变原数组对应的对象么。

答案是会的，这涉及到js的 引用类型 和非引用类型。

可以参考JavaScript的值传递和引用传递看看。

5.css实现等高布局

之前实在没接触过，回来百度了一下。方法很多，实践了两种方法。

1.padding-bottom,margin-bottom相互抵消。

2.flex布局，子布局默认拉伸为父布局高度。

CSS等高布局DEMO页

6.表格固定表头和首列

7.判断数组类型的问题

这个纯粹是忘记了，平时都用封装好的方法。见JS中的值类型和引用类型。

8.jquery相关的，事件代理 ，type方法 ，添加插件

待续。。。

9.将一个数组奇数在前偶数在后。

因为平时不怎么做算法题，一般遇到直接就for循环。

function test(array){
    let res = [];
    array.forEach((item)=>{
        if(item%2==0){
            res.push(item);
        }else{
            res.unshift(item);
        }
    });
    return res;
}

面试官人挺好，让我试着不新建一个数组，然后我就先想到交换位置，然后又提醒我用sort，然后就有了下面的解法。

function test(array){
    array.sort(function(a,b){
        if(a%2 == 0 && b%2!=0){
            return 1;
        }else{
            return -1;
        }
    })
    console.log(array);
}

10.vue的响应式原理

参考另一篇文章  vue响应式原理

11.react生命周期

之前没系统看过，感觉看这个图足够了。 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

12.tcp协议

13.树级目录的数据实现方法

1. class组件有哪些重新渲染的方法, hooks呢？ 2. setState是同步还是“异步”，“异步”怎么理解 3. 聊聊Fiber架构 4. Redux原理 5. React-Redux的原理 6. React-Route是如何实现路由切换的 7. React v17打算删除三个will的生命周期，是因为什么 8. useEffect和useMemo的区别？和useLayout的区别呢？ 9. React合成事件的原理 10. React优化方案 11. diff算法策略 12. React Context原理

12.Https 怎么保证加密的（会话密钥是什么）

13.根据输入n打印一个n行的三角形

const getStr = (i, n) => {
  let str = "";

  let emptyStrLength = n - i;
  let notEmptyStrLen = 1+(2*(i-1));

  let loop = 0;
  while (loop < emptyStrLength) {
    str += " ";
    loop++;
  }
  loop = 0;
  while (loop < notEmptyStrLen) {
    str += '*';
    loop++;
  }
  loop = 0;
  while (loop < emptyStrLength) {
    str += " ";
    loop++;
  }
  return str;
};

const trig = (n) => {
  let i = 1;
  while (i <= n) {
    console.log(getStr(i, n));
    i++;
  }
};

trig(6);

14.sessionStorage（session是指什么，怎么判断同一个session的？两个Tab）

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• **在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，**这点和 session cookies 的运行方式不同。
• 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
• 关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

mdn的解释 第二点没看明白：自己写了个demo实验了下。结果如下：

1. 在当前页面写入testData.

2. 通过window.open() 或者 a 标签 target="_balnk"的方式打开新标签页.当前页的sessionStorage会被拷贝过去。

3. 如果自己手动打开新标签页，输入相同网址，并不会共享数据。

4. 每个tab页的sessionStorage是相互独立的，除了在新开标签页时可能会存在拷贝关系，其余时候操作互不干扰。

15.一个请求先发出，一个请求后发出，后发出的先回来，先发出的后回来，造成的显示错乱。

16.typeof 和 instanceof 的差异

其实不太明白这两为啥要放在一起比较。一个是判断基本类型的，一个是用来判断 对象是不是两一个的实例的。

**typeof **判断基本类型，主要有undefined,number,string,object,function,sysbmol,boolean。不能判断null 和 array。

console.log(typeof undefined);
typeof 1;
typeof '1';
typeof {};
typeof [];
typeof Symbol();
typeof true;