前端面试

1、闭包:

什么是闭包?

闭包就是指有权访问另一个函数作用域中的变量的函数。

把函数执行,形成私有上下文,并且保存和保护私有变量的机制,称之为“闭包” ,它是一种机制

它有三个特性:函数嵌套函数    函数内部可以引用函数外部的参数和变量   函数和变量不会被垃圾回收机制回收

好处:

1.保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突

2.在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)

3.匿名自执行函数可以减少内存消耗

坏处:就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

闭包的使用场景

1.匿名自执行函数,不用在全局对象中添加一个变量,创建一个匿名函数并且立即执行它,执行完后很快会被释放,且不会污染全局对象

2.可以封装对象的私有属性和方法

3.函数做为回调函数返回

2、存储

1.cookie

cookie是为了解决解决http无状态的方案。

http是无状态的协议,就是当我们需要向同一个服务器发送两次相同的请求时,在发送过一次之后,服务器并不会记住我们,当我们第二次请求的时候,服务器还是要在验证一下。cookie的诞生就是为了弥补这个缺陷,客户端第一次请求服务器的时候,服务器会在返回信息中夹带cookie,客户端会将返回的cookie存储,下次发请求时将cookie信息带上。服务器端收到客户携带的cookie会检索自身的cookie信息,来分辨用户。

特点:

1.cookie的存储量较小,cookie只能存储大概4kb的数据。

2.不设置过期时间的cookie会在页面关闭时销毁,并且该cookie不存放在本地文件中,而是存放在内存中,这种cookie被称为会话cookie。设置时间的cookie会被保存在本地文件中,这种cookie可以被浏览器的多个进程共享。

2.localStorage

localStorage用于长久保存数据,存储在本地,除非手动删除,否则不会消失。

查看localStorage:window.localStorage

写入localStorage:直接像为对象添加属性一样window.localStorage.name = value;

删除指定localStorage:window.localStorage.removeItem("name");

清空localStorage:window.localStorage.clear();

3.sessionStorage

sessionStorage用于临时会话存储,当页面关闭时,自动清除。

window.sessionStorage

保存数据语法:

sessionStorage.setItem("key", "value");

读取数据语法:

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法:

sessionStorage.removeItem("key");

删除所有数据:

sessionStorage.clear();

三者的异同:

生命周期:

cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效

localStorage:除非被手动清除,否则将会永久保存。

sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。

存放数据大小:

cookie:4KB左右

localStorage和sessionStorage:可以保存5MB的信息。

http请求:

cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信

3、从输入URL到页面加载发生了什么(HTTP请求全过程详解)

加载过程

1、浏览器根据输入网址进行DNS域名解析

(1)先到浏览器的DNS缓存中查询是否有对应记录,如有则直接返回ip地址,完成解析,

(2)接着判断:浏览器是否进行域名直接查询,如果有的话,会直接连到服务商提供的DNS服务器上,并返回IP;如果没有,则继续查询操作系统的缓存

(3)最后查看本地host文件,如果这里也没有的话就需要到本地dns服务器上查找了

2.浏览器获得域名对应的ip地址后 ,与WEB服务器建立TCP连接(TCP三次握手)

通俗一点的讲,TCP 就是一个双方通信的一个规范标准(协议)

进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备

刚开始客户端处于 Closed 的状态,服务端处于 Listen 状态。

1.第一次握手,客户端发送请求报文将syn=1同步序列号和初始序列号seq = x发送给服务端,然后客户端处于syn_send状态

2.服务器端收到SYN报文请求后,如果同意建立连接会将自己的同步序列号syn=1(服务器端)、初始化序列号seq=y和确认序列号ack=x+1以及确认号ACK = 1报文作为应答,服务器为SYN_Receive确认接收状态。

3.客户端接收到服务端的syn+ACK之后知道可以发送下一序列号的数据包了,然后发送同步序列号ack = y + 1和数据包的序列号seq = x + 1以及确认号ACK = 1确认包作为应答,客户端转为established状态。

3.tcp连接建立完成后,浏览器会给服务器发送一个http请求

4.服务器端响应HTTP请求,返回HTTP报文

渲染过程

根据HTML结构生成DOM树

根据CSS生成CSSDOM

将DOM和CSSOM整合形成RenderTree

根据RenderTree开始渲染和展示

解析过程中,如果遇到<linkhref="...">和<scriptsrc="...">这种外链加载CSS和JS的标签,浏览器会异步下载,下载过程和上文中下载HTML的流程一样。只不过,这里下载下来的字符串是CSS或者JS格式的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • undefined , null null是对象原型链的终点,null == undefined undefine...
    Taco_King阅读 3,505评论 0 3
  • 1、 HTML语义化 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码...
    5e8294296ff4阅读 3,870评论 0 0
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,444评论 0 25
  • 转自CSDN雄领IT iframe有哪些优点和缺点: 缺点:① iframe会阻塞主页面的Onload事件;② 搜...
    陈老板_阅读 5,180评论 0 7
  • 前端面试题的简单整理,都只是大概回答,具体某些问题的具体理解后续会补上。 前端页面有哪三层构成,分别是什么?作用是...
    李欢li阅读 3,332评论 0 2