前端面试题-南昌

看月亮的方源
310 阅读15分钟

一、 讲讲输入完网址按下回车，到看到网页这个过程中发生了什么?

  1. 首先在浏览器中输入URL

  2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

    • 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
    • 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)；
    • 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
    • ISP缓存：若上述均失败，继续向ISP搜索。

  3. DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。

  4. 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接

  5. 发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器

  6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

  7. 关闭TCP连接：通过四次挥手释放TCP连接

  8. 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

    • 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
    • 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
    • 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
    • 布局（Layout）：计算出每个节点在屏幕中的位置
    • 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

    浏览器渲染流程图

  9. JS引擎解析过程：调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

  • 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。

  • 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译

  • 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为'undefined'；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。

  • 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

二、谈谈你对前端性能优化的理解?

  1. 浏览器缓存
  2. 防抖、节流
  3. 资源懒加载、预加载
  4. 开启Nginx gzip压缩

三个方面来说明前端性能优化

一： webapck优化与开启gzip压缩
1. babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件
其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'
2. 文件采用按需加载等等
3. 具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
accept-encoding:gzip
4. 图片优化，采用svg图片或者字体图标
5. 浏览器缓存机制，它又分为强缓存和协商缓存
二：本地存储——从 Cookie 到 Web Storage、IndexedDB
说明一下SessionStorage和localStorage还有cookie的区别和优缺点
三：代码优化
1.事件代理
2.事件的节流和防抖
3.页面的回流和重绘
4.EventLoop事件循环机制
5.代码优化等等

三、请你谈谈 Cookie 的弊端?

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做 userData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被PJ的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

四、浏览器的内核分别是什么?

　目前全球仅有四个独立的浏览器内核，

  • 微软IE的Trident、

  • 网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko、

  • KDE的开源内核Webkit

  • Opera(欧朋)的Presto。其中，Presto是历史最悠久的内核。

五、介绍Js有哪些内置对象?

JS中一共内置了17个对象,以下的是我们常用的内置对象.

  • Math对象
  • Date对象
  • Array对象
  • String对象

六、javascript 创建对象的几种方式?

js常用的几种创建对象的方式有：

1、{}
2、new Ｏbject()
3、使用字面量
4、工厂模式
5、构造函数模式（constructor）
6、原型模式（prototype）
7、构造函数+原型模式

七、jquery 中如何将数组转化为 json 字符串，然后再转化回来

现代浏览器中提供了JSON.stringify()方法 将数组，对象转成json。
JSON.stringify 把一个对象转换成json字符串，
JSON.parse 把一个json字符串解析成对象。

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
    return JSON.parse(array)
} 

然后调用：
$("").stringifyArray(array)

九、http状态码有哪些?分别代表是什么意思?

状态码第一位数字决定了不同的响应状态，如下：

  • 1 表示消息
  • 2 表示成功
  • 3 表示重定向
  • 4 表示请求错误
  • 5 表示服务器错误

1xx

代表请求已被接受，需要继续处理，这类响应是临时响应，只包含状态行和某些可选的响应信息，并一空行结束

常见的有：

  • 100 （客户继续发送请求，这是临时响应） 这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端印当据需发送请求的剩余部分，或者如果请求已经完成，忽略这个响应，服务器必须在请求完成后向客户端发送一个最终响应
  • 101 服务器根据客户端的请求切换协议，主要用于 websocket 或 HTTP2 升级

2xx

代表请求已成功被服务器接收，处理，并接受

  • 200 （成功） 请求已成功，请求所希望的响应头或数据体将随此响应返回
  • 201 （已创建）请求成功并且服务器创建了新的资源
  • 202 （已创建）服务器已经接受请求，但尚未处理
  • 203 （非授权信息）服务器已成功处理请求，但返回的信息可能来自另一来源
  • 204 （无内容）服务器成功处理请求，但没有返回任何内容
  • 205 （重置内容）服务器成功处理请求，但没有返回任何内容
  • 206 （部分内容）服务器成功处理了部分请求

3xx

表示要完成请求，需要进一步操作，通常这些状态代码用来重定向

  • 300 （多种选择）针对请求，服务器可执行多种操作。
  • 301 （永久移动）请求的网页已永久移动到新位置。
  • 302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应该继续使用原有位置来进行以后的请求
  • 303 （查看其它位置）请求者应当对不同位置使用单独的 GET 请求来检索响应时，服务器返回此代码
  • 305 （使用代理）请求者只能使用代理访问请求的网页。
  • 307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求

4xx

代表了客户端看起来可能发生了错误，妨碍了服务器的处理

  • 400 （错误请求）服务器不理解请求的语法
  • 401 （未授权）请求要求身份验证。
  • 403 （禁止）服务器拒绝请求
  • 404 （未找到）服务器找不到请求的网页
  • 405 （方法禁用）禁用请求中指定的方法
  • 406 （不接受）无法使用请求的内容特性响应请求的网页
  • 407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理
  • 408 （请求超时）服务器等候请求时发生超时

5xx

表示服务器无法完成明显有效的请求。这类状态代码代表了服务器在处理请求的过程中有错误或异常状态发生

  • 500 （服务器内部错误）服务器遇到错误，无法完成请求

  • 501 （尚未实施）服务器服务器不具备完成请求的功能

  • 502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应

  • 503 （服务不可用）服务器目前无法使用，（由于超载或停机维护）

  • 504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求

  • 505 （ HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本

十、webSocket如何兼容低浏览器?

参考文章

十一、css 语言有哪些选择器? 哪种选择器优先级最高?

1.选择器

  • id选择器(#myid)
  • 类选择器(.myclass)
  • 属性选择器(a[rel="external"])
  • 伪类选择器(a:hover, li:nth-child)
  • 标签选择器(div, h1,p)
  • 相邻选择器（h1 + p）
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器(*)

2.优先级：

  • !important
  • 内联样式（1000）
  • ID选择器（0100）
  • 类选择器/属性选择器/伪类选择器（0010）
  • 元素选择器/伪元素选择器（0001）
  • 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

十二、position的值 relative和absolute 分别有什么区别?

1.static(普通流定位)

默认定位

2.relative(相对定位)

  • 相对本元素的左上角进行定位（相对于自身位置进行定位），本元素需要设置position为relative，top、left、bottom、right都可以有值。
  • 虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。

3.absolute(绝对定位)

  • 相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
  • 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  • 绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。

4.fixed(固定定位)

类似于absolute定位，但是是相对于浏览器窗口进行定位

5.inherit

继承父级元素position属性值

6.sticky （额外补充）

粘性的

十三、style 标签写在 body 后与 body 前有什么区别?

  1. 一般情况下，页面加载时自上而下的。将style标签置于body之前，为的是先加载样式。
  2. 若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象（页面闪烁）。

十五、CSS3 有哪些新特性?

  1. transtion transition-property 规定设置过渡效果的 CSS 属性的名称。

  2. transition-duration 规定完成过渡效果需要多少秒或毫秒。

  3. transition-timing-function 规定速度效果的速度曲线。

  4. transition-delay 定义过渡效果何时开始。

  5. animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

  6. ainimation实现动画效果主要由两部分组成：

  7. 通过类似Flash动画中的帧来声明一个动画；

  8. 在animation属性中调用关键帧声明的动画。

  9. translate 3D建模效果

十六、XML和JSON的区别?

1.JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。

2.xml

  • XML 指可扩展标记语言（EXtensible Markup Language），很类似 HTML
  • XML 的设计宗旨是传输数据，而非显示数据

3.JSON与XML 之间的差异

尽管 JSON 和 XML 的功能非常相似，但它们之间还是存在一些差异的，如下表所示：

JSONXML
JSON 是一种数据格式XML 是一种标记语言
与 XML 相比，JSON 数据更容易阅读XML 文档相对来说阅读起来比较困难
JSON 数据可以存储在 .json 格式的文本文件中XML 数据可以存储在 .xml 格式的文本文件中
JSON 中支持字符串、数字、数组、布尔值等类型XML 中只有字符串类型
JSON 没有显示功能XML 提供了显示数据的能力，因为它是一种标记语言
JSON 仅支持 UTF-8 编码XML 支持各种编码
JSON 不支持注释XML 支持注释
JSON 不支持命名空间XML 支持命名空间
JSON 读写速度更快，且更容易解析相对于 JSON，XML 数据结构更加复杂，解析速度相对较慢
相对于 XML，JSON 的安全性较低相对于 JSON，XML 的安全性更高

十七、Js 延迟加载的方式有哪些?

一般有以下几种方式：

  • defer 属性
  • async属性
  • 动态创建DOM方式
  • 使用jquery的getScript方法
  • 使用settimeout延迟方法
  • 让js最后加载。

详细参考

十八、Ajax 过程?

AJAX请求的五个步骤：

1.建立XMLHttpRequest对象;
2.设置回调函数;
3.配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
4.向服务器发送数据;
5.在回调函数中针对不同的响应状态进行处理;

十九、Vue 的生命周期?

image.png

二十、vue-router 有哪些钩子函数?

image.png

二十一、前端有哪些页面优化方法?

  • 减少 HTTP请求数
  • 从设计实现层面简化页面
  • 合理设置 HTTP缓存
  • 资源合并与压缩
  • 合并 CSS图片，减少请求数的又一个好办法。
  • 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
  • 多图片网页使用图片懒加载。
  • 在js中尽量减少闭包的使用
  • 尽量合并css和js文件
  • 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
  • 减少对DOM的操作
  • 在JS中避免“嵌套循环”和 “死循环”
  • 尽可能使用事件委托（事件代理）来处理事件绑定的操作
avatar
文章
阅读
粉丝