前端面试题

最新推荐文章于 2023-01-05 10:28:38 发布

CahierX

最新推荐文章于 2023-01-05 10:28:38 发布

阅读量160

点赞数

分类专栏：前端面试

前端面试专栏收录该内容

1 篇文章

订阅专栏

数组去重

function merge(arr) {
  if (!Array.isArray(arr) || arr.length == 0) return [];
  var ret = [];

  for (var i = 0; i < arr.length; i++) {
    // 或者 ret.indexOf(arr[i] == -1)
  	if (arr.indexOf(arr[i]) == i) {
    	ret.push(arr[i]);
    }
  }
  
  return ret;
}

从输入URL到页面加载发生了什么？

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）。

刚刚你说到过缓存，说一下缓存相关的知识吧？

答案：

浏览器缓存,HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为强制缓存，对比缓存（协商缓存）。

强制缓存判断HTTP首部字段：cache-control，Expires。

Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致。因此该字段已经很少使用。

cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内均有效。如果同时存在cache-control和Expires，浏览器总是优先使用cache-control。

对比缓存通过HTTP的last-modified，Etag字段进行判断。

last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。

Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

页面导入样式时，使用link和@import有什么区别？

  （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

  （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

  （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
   
   (4)link支持使用js控制DOM去改变样式，而@import不支持;