2017 web前端面试知识点汇总

Posted 2020-10-17

跨域

同源策略：浏览器上为安全性考虑实施的安全策略。url由协议、域名、端口号和路径组成，如果两个url的协议、域名和端口号相同，则是同源。

ajax请求受到同源策略的限制

一、jsonp

    利用<script>标签的src属性可以加载跨域的js脚本特点，动态创建script标签来载入跨域资源，jquery对该方法进行了封装，需要设置dataType为jsonp，只支持get请求

二、domain

三、CORS    

    服务端在响应头加上允许访问的domain和HTTP method

四、服务端代理

    因为服务端不存在跨域问题。

    a、把跨域请求变成本域的请求

    b、服务端的动态脚本负责转发客户端实际的请求

 

闭包

变量作用域：

    变量有两种，局部变量和全局变量。在函数内部可以读取全局变量，而在函数外部无法读取函数内部的局部变量。

    闭包可以实现在函数外部读取函数内部的局部变量。

使用：

    一、读取函数内部变量

    二、让变量的值始终保存在内存中，不被垃圾回收机制回收

缺点：

    一、变量保存在内存中，内存消耗大，影响网页性能，在IE中可能会导致内存泄露。解决：在退出函数前，将不使用的局部变量删除

    二、闭包会在父函数外部，改变父函数内部变量的值

 

原型链

_proto_是每个对象都有的属性，prototype则是函数才有的属性，_proto_指针指向谁看创建对象的方式。

创建对象的三种方式：

a、字面量方式    _proto_指向Object

b、构造函数方式    _proto_指向该构造函数

c、Object.create(a)    _proto_指向a

原型链：js中万物皆对象，而每个对象都有_proto_属性，所以会形成一条由_proto_连起来的链条，这条链条就是原型链。

当js查找对象的属性时，会先在对象本身上找，如果找不到，则会到原型链上找，直到找到头为止。

 

js实现继承的几种方式

创建父构造函数Parent和子构造函数Child，Child需要继承Parent的属性和方法

一、借用构造函数实现继承

    在Child中设置Parent.call(this)，不能继承Parent的原型属性和方法

二、借用原型实现继承

    通过设置Child.prototype = new Parent();

三、组合式继承

    两种方式的组合

 

浏览器内核常驻进程

一、浏览器GUI渲染进程

二、javascript引擎进程

三、浏览器事件触发进程

四、浏览器定时器触发进程

五、浏览器HTTP异步请求线程

 

性能优化

1、雪碧图

2、移动端响应式图片

3、静态资源CDN

4、减少DOM操作（使用事件委托）

5、压缩html,css,js

 

浏览器渲染原理

1、把HTML解析成DOM Tree，把CSS解析成Rule Tree

2、把DOM Tree和Rule Tree整合成Render Tree

3、计算好每个元素的位置后，浏览器把元素放在它该在的位置上，通过显卡画到屏幕上

 

前端路由

定义：路由是根据不同的url展示不同的内容或页面

用处：常用在单页面应用（SPA），因为SPA都是前后端分离，后端不会给前端提供路由

技术：

    HTML5新的API出现之前，通过hash来实现，兼容性较好。hash就是url中的#后面的部分，通过监听hash变化触发onhashchange事件，当hash值发生变化时，浏览器的历史记录会产生记录，但不会向服务端发出请求，可被客户端用于做前进后退

    HTML5 History新增了两个API，history.pushState和history.replaceState，这两个API都会让浏览器产生记录，但都不会向服务端发出请求

优点：

    后端路由客户端向服务端发送请求和服务端给客户端响应请求的过程会有网络延迟，前端路由没有网络延迟，用户体验更好

 

script标签defer、async区别

defer：在HTML加载完成之后才执行，如有多个，则按照加载顺序依次执行

async：加载完之后立即执行，如有多个，跟加载顺序无关

 

在浏览器中输入一个网址之后，发生了什么？

1、浏览器查找该域名的ip地址

2、浏览器根据解析得到的ip地址，向web服务器发送一个HTTP请求

3、服务器收到请求并进行处理

4、服务器返回一个响应

5、浏览器对该响应进行解码，渲染页面

6、页面显示完成后，浏览器发送异步请求

 

一次完整的HTTP请求过程

一次完整的HTTP请求从TCP三次握手建立连接成功后开始，客户端按照指定的格式向服务端发送HTTP请求，服务端接到请求后，解析HTTP请求，处理完业务逻辑，然后返回一个指定格式的HTTP响应给客户端。

HTTP请求格式：由请求行、请求头、空行、消息体四部分组成，每部分内容占一行

HTTP响应格式：由状态行、响应头、空行、消息体四部分组成，每部分内容占一行

 

HTTP协议

HTTP协议是超文本传输协议的缩写，用于从万维网服务器传输超文本到本地浏览器的传送协议。

HTTP协议基于TCP/IP通信协议来传递数据。

特点：

    1、简单快速。客户端向服务端发送请求时，只需要传送请求方法和路径

    2、灵活。HTTP协议允许传输任何类型的数据

    3、无连接。每次连接只处理一个请求，服务器处理完请求，并收到客户端应答后，便断开连接

    4、无状态。HTTP协议对事物处理没有记忆能力

HTTP的URL：一个完整的URL由以下几部分组成

    http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

    1、协议

    2、域名

    3、端口号

    4、虚拟目录

    5、文件名

    6、参数部分

    7、锚部分

HTTP的请求：

    由请求行、请求头、空行、消息体四部分组成，每部分内容占一行

HTTP的响应：

    由状态行、响应头、空行、消息体四部分组成，每部分内容占一行

HTTP状态码：

    1xx：指示信息-表示请求已接收，要继续处理

    2xx：成功-表示请求已被成功接收、理解和接受

    3xx：重定向-表示要完成请求必须进行进一步操作

    4xx：客户端错误-请求有语法错误或请求无法实现

    5xx：服务端错误-服务端未能实现合法的请求

    常见状态码：

    200 OK    客户端请求成功

    400 Bad Request    客户端请求有语法错误，不能被服务端所理解

    403 Forbidden    服务端接收到请求，但拒绝提供服务

    404 Not Found    请求资源不存在（输入了错误的URL）

    500 Internal Server Error    服务端发生不可预期的错误

    503 Server Unavailable    服务端当前不能处理客户端请求，一段时间后可能恢复正常

 

cookie与session, localStorage与sessionStorage

localStorage和sessionStorage是h5的web storage API提供的

保存位置：

     localStorage、sessionStorage和cookie都保存在浏览器端，session保存在服务器端

数据有效期：

     localStorage     始终有效，浏览器关闭也一直保存

     sessionStorage     在浏览器关闭前有效

     cookie     在有效期内有效

     session     需向服务端请求，在服务端设置的有效期内有效

保存大小：

     cookie     最大4k

     localStorage、sessionStorage    比cookie大得多，达到5M甚至更多     

优缺点：

     cookie     会在同源的HTTP请求中携带，在浏览器和服务器间来回传递

     localStorage、sessionStorage    不会在请求中携带，只在本地保存

     session     占用服务端空间，但存储数据更安全