前端面试题之前端基础篇

目录

 

1.说一下http和https

2.tcp三次握手，一句话概括

3.TCP和UDP的区别

4、WebSocket的实现和应用

5.说一下web quality

6.几个很实用的BOM对象属性和方法

7.说一下html5的drag api

8.说一下HTTP2.0

9.400 401 403状态码分别表示什么含义

10.fetch发送2次请求的原因

11.Cookie、sessionStorage、localStorage的区别

12.说一下web worker

13.对html语义化标签的理解

14.iframe是什么？有什么缺点？

15.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

16.Cookie如何防范XSS攻击

17.一句话概括RESTFUL

18.讲讲viewport和移动端布局

19.click在ios上有300ms延迟，原因及如何解决？

20.addEventListener参数

21.iframe之间如何通信

22.http常用请求头

23.强，协商缓存

24.前端优化

25.GET和POST的区别

26.301和302的区别

27.如何画一个三角形

28.HTML5新增的元素

29.在地址栏输入一个url，到这个页面呈现出来，中间发生了什么

30.常见的http请求头

31.csrf和xss的网络攻击及防范

32.简要说一下你所了解的http协议

 

---

1.说一下http和https

http是目前应用最广泛的网络协议。http的ssl加密是在传输层实现的。

区别：

http是超文本传输协议，明文传输数据。https则是具有安全性的ssl加密传输协议。

http端口80，https端口443

https需要ca证书，费用较高，https网站在搜索引擎中的排名更高。

https比http更加安全。

https协议的工作原理：

客户端向服务器端发送请求，要求建立ssl连接。

服务器端将数字证书（数字证书中包含了公钥）返回给客户端

客户端和服务器端协商ssl链接安全等级

客户端根据安全等级使用公钥加密会话密钥

服务器端使用公钥解密会话密钥

服务器端使用会话密钥加密与客户端之间的通信。

 

2.tcp三次握手，一句话概括

客户端和服务端建立连接之前需要发送三个数据包

我觉得三次握手是客户端和服务器端通信的基础，不应该只满足于掌握这一句话。

三次握手

 

第一次握手：客户端发送一个SYN包，此时客户端处于SYN_SEND状态。

第二次握手：服务器端接收到了发来的SYN包，并发送SYN包加ACK包给客户端，此时服务器端处于SYN_REVD状态。

第三次握手：客户端接收到服务器端发送来的包，并返回一个ACK确认包给服务器端，此时客户端处于established状态

服务器端也接收到了客户端返回的ACK确认包，此时服务器端也处于esdablished状态。

四次挥手

第一次挥手：客户端发送一个FIN包，此时客户端处于FIN_WAIT1状态。

第二次挥手：服务器端发送一个ACK包，此时服务器端处于CLOSE_WAIT状态

第三次挥手：服务器端发送FIN包，此时服务器端处于LAST_ACK状态

第四次挥手：客户端接收到FIN包，并返回ACK确认包给服务器端。此时客户端处于TIME_WAIT状态。

服务器端接收到FIN包，进入CLOSED状态

这里特别需要主要的就是TIME_WAIT这个状态了，这个是面试的高频考点，就是要理解，为什么客户端发送 ACK 之后不直接关闭，而是要等一阵子才关闭。这其中的原因就是，要确保服务器是否已经收到了我们的 ACK 报文，如果没有收到的话，服务器会重新发 FIN 报文给客户端，客户端再次收到 ACK 报文之后，就知道之前的 ACK 报文丢失了，然后再次发送 ACK 报文。

参考博文链接
 

3.TCP和UDP的区别

区别

TCP基于连接，UDP不基于连接

TCP只能1对1，UDP支持1对1和1对多

TCP面向字节流，UDP面向数据报

TCP报文首部较大为20字节，UDP为8字节

TCP可靠 UDP不可靠

为什么TCP可靠？

TCP报文格式中的SYN部分确保了数据传输的有序性、ACK部分确保了数据传输不会丢包、窗口部分确保数据传输过程中的流量控制。那么既然说到了TCP的报文格式，就顺便提一嘴TCP的报文格式。

TCP的报文格式

源端口：数据传输源头的端口号                                                                            目标端口：数据传输目标的端口号   

                                                    SYN：数据传输数据部分第一个字节的序号     

                                                    ACK部分：确认下一个数据包的数据部分的序列号                                               

数据偏移：数据部分在数据包中的偏移量                                                                       保留位：为将来的功能位预留的位置      

URG：紧急指针位，此位为1时紧急指针才能生效                                                          ACK 此位为1时，ACK位才有效

PUSH 此位为1时数据包将不进入缓存区，优先处理                                                       RST 重置指针 释放连接，重新建立连接

同步SYN 此位为1时，请求连接标志位                                                                            FIN包 释放连接标志位

窗口  用于流量控制

检验和 在客户端计算，在服务器端检验数据的合法性                                                 紧急指针 在本报文段中紧急数据占多少字节

参考博文链接

 

4、WebSocket的实现和应用

WebSocket也是基于HTTP协议的，或者说是借用了http协议完成了部分握手。

既然说到WebSocket，那就要谈谈为什么要使用Websocket。

答案很简单，http的缺陷：通信只能由客户端发起。

实现：在请求中加入    upgrade：websocket      connection：upgrade

应用：需要实时更新数据的应用（天气数据），高并发应用（聊天软件）等

参考链接

 

5.说一下web quality

web quality是指网页为特殊人士使用的易用性。

使用alt属性、使用可以调节大小的字体、语音浏览器等

 

6.几个很实用的BOM对象属性和方法

BOM BrowserObjectModel 浏览器对象模型

location对象   history对象

location.url 返回url地址 

location.search 返回url中的查询字符串部分

location.hash    返回url中#后面的部分如没有#返回空

location.host     返回域名部分

location.hostname   返回主域名部分

history.go(num)     前进或者后退指定页面数

history.foward()    前进1页

history.back()        后退一页

 

7.说一下html5的drag api

在html标签元素上加上dragable="true"时，可以将标签变为拖拽元素。

点击了解详情

 

8.说一下HTTP2.0

HTTP2.0经过查阅博客后总结出来的几个新特性 

新的二进制编码  http2.0会将消息分为更小的信息和帧，并用二进制编码

多路复用             http1.0一个请求对应着一个连接，http2.0一个连接可以有多个请求

首部压缩             使用了http2.0的头部压缩算法（HPACK），减小了header的大小

服务器端推送      在HTTP2.0中，服务端可以在客户端某个请求后，主动推送其他资源。

HTTP2.0链接

 

9.400 401 403状态码分别表示什么含义

400    请求语法错误，请求无效

401    需要验证用户身份

403    服务器收到请求但拒绝执行

补充一点404  服务器找不到对应页面。

 

10.fetch发送2次请求的原因

fetch第一次请求为一个option请求，验证服务器端支不支持修改的请求头，第二次才是真正的请求。

 

11.Cookie、sessionStorage、localStorage的区别

cookie将数据存储到本地客户端，存储大小较小，长度有限。cookie中只能存取字符串，安全度较低

session将数据存储到服务端，存储量较大。可以存储任何类型的值，安全度较高

sessionStorage和localStorage是用于html5新增的用于存储方面的API。

localstorage将数据存储到客户端，存储量较大，永久有效。

sessionStorage将数据存储到客户端，存储量更大，仅在会话进行期间有效。

 

12.说一下web worker

由于JavaScript是单线程语言，所有执行任务必须等待之前的任务执行完毕才能进行。对于多核CPU而言，JavaScript的语言特性并不能完全发挥计算机的计算能力。而web worker为JavaScript提供了多线程环境。允许主线程创建一个worker线程。并将任务分配给后者进行，两者互不影响。后者将运算结果返回给主线程。能更高效的发挥计算机的计算能力。

阮一峰的webworker博客

 

13.对html语义化标签的理解

html语义化标签就是在页面没有css样式渲染的情况下，也能清楚的看出html的页面结构。充分的利用html5提供的语义化标签，和

h标签 nav footer  section article等

作用：有利于搜索引擎解析文档结构、有利于SEO、方便设备解析、有利于开发人员开发与维护。

 

14.iframe是什么？有什么缺点？

iframe标签会创建一个包含另一个文档的内联框架。

缺点：阻塞页面加载   搜索引擎无法解析这种页面不利于SEO   和主页面共享一个连接池 影响性能

 

15.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

Docktype规定了浏览器以何种标准解析文档

严格模式是指以W3C标准解析文档。为文档解析提供了统一的标准。

混杂模式是指以浏览器自己的标准解析文档。

第一个能想到的就是盒子模型的差异。W3C标准的盒子模型width部分仅仅包括了content部分。而IE盒子模型包括了content+padding+border。

严格模式和混杂模式有哪些差别

 

16.Cookie如何防范XSS攻击

首先，什么是XSS攻击。XSS跨站脚本攻击。指攻击者在提交的数据中插入了恶意的js代码来实现攻击网站目的的攻击方式。

如何防范  对用户输入进行过滤  对输出进行转义

Cookie如何防范XSS攻击：设置http-only 只接受https发送的请求  secure字段  禁止js访问cookie

XSS攻击

 

17.一句话概括RESTFUL

是一种软件代码风格  用url定位资源 用http描述操作

 

18.讲讲viewport和移动端布局

viewport  视口 

布局视口：用于解决早期网页在移动端的显示问题   布局视口大小设置为980px

视觉视口：是指用户当前看到的视口大小

理想视口：布局视口并不是一个理想的布局尺寸大小，理想视口是针对设备优化后的最佳尺寸大小

为了使页面适应移动端设备常采用的几种方法

一：媒体查询  对不同设备采用不同的css样式   二：百分比布局    三：使用rem单位，不论嵌套层级如何，rem只相对根元素的font-size为标准

移动端布局

 

19.click在ios上有300ms延迟，原因及如何解决？

因为早期的网页大多数是为大屏幕设备设计的。ios工程师们给ios设备加上了双击缩放功能。click有延迟的原因是判断用户有没有在第一次点击的300ms之内进行第二次点击。

解决办法：禁用双击功能或者使用轻量的fastclick库

 

20.addEventListener参数

三个参数 第一个参数绑定触发的事件   第二个参数绑定触发的函数   第三个参数规定事件捕获或者冒泡  默认为false 冒泡

打个栗子

var btn = document.getElementById('btn')
    btn.addEventListener('click',function () {
        console.log(123)
    },false)

上述栗子表示js代码获取了一个id为btn按钮，绑定了点击事件，点击之后执行函数，函数内容为在控制台输出123，该事件在冒泡阶段执行

 

21.iframe之间如何通信

同源 父---->子     window.iframes[”子iframename“] 利用window对象的iframe数组对象之间获取

子------->父          直接使用parent.window获取父页面的window对象   这是同源情况下的父子iframe通信

iframe父子间通信

 

22.http常用请求头

请求头

补充一下常用的请求方法

get  post  head  options  delete等等。。

 

23.强，协商缓存

是指客户端向浏览器发送请求之前，先判断有没有命中强缓存，强缓存的判断字段有cache-control和expires，如服务器端状态码为200（for-cache）则为命中强缓存，从缓存中读取数据。如果没有命中强缓存，再向服务器端真正发送一个http请求，根据服务器返回的状态码判断是否命中协商缓存。如返回码为304（not modified）协商缓存的判断字段有if-modified/last-modified  Etag等。

 

24.前端优化

减少请求数：合并资源，减少域名数量，资源懒加载，使用GZIP压缩，

加快访问速度：DNS预解析，内容分发网络

缓存：利用http协议缓存和html5新增的缓存api优化

渲染：优化js/css代码结构，

 

25.GET和POST的区别

get一般用于请求数据，可以读取缓存

post一般用于更新和修改数据，不能使用缓存

 

26.301和302的区别

301表示资源重定向

302表示资源临时重定向

 

27.如何画一个三角形

利用css的均分原理 直接贴上代码

.trangle{
            width: 0px;
            height: 0px;
            border-top: 10px red solid;
            border-bottom: 10px transparent solid;
            border-left: 10px transparent solid;
            border-right: 10px transparent solid;
        }

周围的border如果比width和height还要大的话，border就会均分掉div。这是我理解的css均分原理

 

28.HTML5新增的元素

在标签方面   新增了nav  article   footer等语义化标签   vedio视频标签  audio音频标签 canvas画布标签 

新增了缓存方面的api       local storage、session storage 

 

29.在地址栏输入一个url，到这个页面呈现出来，中间发生了什么

首先输入url地址后，浏览器会寻找此url对应的ip地址，从缓存中查找ip地址，依次是浏览器缓存----->缓存---->路由器缓存，最后在本地host文件中查找，如果还没找到，再从本地DNS域名服务器中查找，找到对应ip地址，三次握手建立连接，发送http请求之前判断有没有命中强缓存，然后判断有没有命中协商缓存，最后从服务器端获取数据，浏览器解析从服务器端获取的文档。根据文档构建dom树和css树，最后合并成渲染树呈现在浏览器中，最后加载文档中的图片、音频、视频资源等。

 

30.常见的http请求头

accept-charset     浏览器可接受的编码格式

accept-encoding  浏览器可接受的数据压缩格式

accept-language  浏览器可接受的语言

 

31.csrf和xss的网络攻击及防范

CSRF攻击  跨站请求伪造，攻击者在用户cookie有效期间内诱导用户进入恶意网站，从而冒充用户进行操作的攻击方式。

防御方法    使用验证码，检查http头部的refer字段，使用token

xss攻击      跨站脚本攻击   指攻击者在提交的数据中嵌入了恶意的js代码从而实现攻击网站目的的攻击方式

防御方法    可以对输入进行过滤，对输出进行转义、服务器端对cookie设置http-only字段   这样可以禁止js访问cookie  

 

32.简要说一下你所了解的http协议

基于tcp/ip协议的，属于应用层的面向对象的协议。浏览器是http的客户端，web服务器是http的服务端。