2019-03-27 十个初级面试题

2019-04-15 本文已影响0人追夢的蚂蚁

第一题

1.请写出一个符合 W3C 规范的 HTML 文件，要求
页面标题为「我的页面」
页面中引入了一个外部 CSS 文件，文件路径为 /style.css
页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
页面中引入了一个外部 JS 文件，路径为 /main.js
页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/print.css" media="print">
    <link rel="stylesheet" href="/mobile.css" media="screen and (max-width: 500px)">

    <title>我的页面</title>
</head>

<body>

    <svg width="100%" height="200">
        <circle cx="100" cy="100" r="50" fill="red" />
    </svg>

    <script src="/main.js"></script>
    <script src="/gbk.js" charset="gbk"></script>
</body>

</html>

第二题

2016年腾讯前端面试题：
移动端是怎么做适配的？

回答要点：

meta viewport
媒体查询
动态 rem 方案

1.meta viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.媒体查询
<style> @media(max-width:320px){ body{background: green;} } </style>
这里的max-width:320px指手机分辨率，如果媒体满足max-width320px，就生效这个css样式。
3.动态 rem 方案
rem是通过根元素的字体大小来设置元素的宽高的,以此来达在不同屏幕尺寸中等比例缩放达到完美的展现效果
1rem = 根元素字体大小
@function px( $px ){ @return $px/$designWidth*10 + rem; } $designWidth: 320px; //为设计稿的宽度

第三题

2017年腾讯前端实习面试题（二面）：
用过CSS3吗? 实现圆角矩形和阴影怎么做?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
.div1{
  border-radius:20px;
  border: 1px solid red;
  width:110px;
  height:100px;
}
.div2{
  box-shadow: 5px 5px 10px #555;
  border: 1px solid black;
  width:20px;
  height: 20px;
}
  </style>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>
</html>

border-radius:10px;设置矩形外边框圆角
box-shadow: 5px 5px 10px #555;设置阴影效果
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */

第四题

什么是闭包，闭包的用途是什么？

什么是闭包?
概念:如果一个函数,使用了它范围外的变量,那么(这个函数+这个变量) 就叫做闭包
ps:

var a=1
function f4(){ //函数f4可以访问到局部变量a.这就是一个闭包
  console.log(a) 
}

闭包的作用

2.1 使函数内部可以访问外部变量

 var num = 12;
 function showNum() {
     console.log(num);
 }
showNum();//12

2.2 在函数内部再定义一个内部函数，并将这个内部函数当做返回值，这样我们就可以获取函数的局部变量。

function showNum() {
      var num = 12;
      function showNum2() {
           console.log(num);
      };
      return showNum2;
  }
var myNum = showNum();
myNum();//12

2.3 将创建的变量的值始终保持在内存中，以供本地环境使用

 function showNum() {
      var num = 12;
      function showNum2() {
           console.log(++num);
      };
      return showNum2;
  }
var myNum = showNum();
myNum();//13

一般情况下在函数被调用完后不再被引用时，该函数都会被垃圾回收机制（garbage collection），但是由于上述代码中函数showNum2被myNum引用，而函数showNum2又依赖于函数showNum，因此函数showNum不会被垃圾回收机制回收。

第五题

出处同上：
call、apply、bind 的用法分别是什么？

1.call,apply,bind都可以改变函数体内this的指向
2.在使用时，传入第一个参数都是用来传递this的指向，对上下文的指定
3.都可以传入多个参数，call和bind都是按顺序传递，apply的传参类型是数组，bind参数不会立即调用,可以在函数执行的时候再次添加

第六题

请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
例如：

状态码 200 表示响应成功。

200:OK ,表示请求已成功
202:Accept ,表示服务器已接受请求,但未处理
301:Moved Permanently ,表示服务器永久搬家
302:Found ,表示服务器临时搬家
400:Bad Request ,表示错误请求
403:Forbidden ,表示禁止访问
404:Not Found ,表示服务器找不到请求网页
408:Request Timeout ,表示请求超时
500:Internal Server Error ,表示服务器内部错误

第七题

出处同上：
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

POST /path HTTP/1.1
HOST: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
Content-Length: 24
Content-Type: application/x-www-form-urlencoded

username=ff&password=123

第八题

请说出至少三种排序的思路，这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)

O(n*n):冒泡排序
相邻元素两两比对，大的元素放右边，小的放左边。对每一对相邻元素做同样工作，这样最大的就会在最后面。对所有元素重复以上步骤除了最后一个，直到排序完成
O(n log2 n):快速排序
以一个元素为基准重新排列，比基准大的排右边，比基准小的排左边，然后分别对左边右边重复上面操作，直到只有一个数字为止
O(n + max): 基数排序
将所有待比较的数值(正整数)统一成同样长度的数位数值，数位短的在前面补零。然后从最低位开始排序一直到高位排完后，数列就变成有序序列

第九题

著名前端面试题：
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

这一题是在挖掘你的知识边界，所以你知道多少就要答多少。

DNS解析
DNS解析就是根据域名查找IP地址
TCP连接
在获取到IP地址后，便会开始建立一次连接，由TCP协议完成，主要通过三次握手进行连接。
　　第一次握手：主机向服务器发送一个连接的请求（您好，我想认识您）
　　第二次握手：服务器收到请求后发送同意连接的信号（好的，很高兴认识您）
　　第三次握手：主机收到服务器的信号,再次向服务器发送了确认信号（我也很高兴认识您）,自此主机与服务器建立了连接
完成三次握手,主机与服务器开始传送数据。
发送HTTP请求
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
浏览器解析渲染页面
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
连接结束
通过四次挥手关闭连接。
　　1. 主机向服务器发送一个断开连接的请求（不早了，我该走了）；
　　2. 服务器接到请求后发送确认收到请求的信号（知道了）；
　　3. 服务器向主机发送断开通知（我也该走了）；
　　4. 主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接

补充一点点缓存知识:
浏览器查找域名的 IP 地址
这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存

DNS域名解析过程后会缓存解析结果，其中主要在两个地方缓存结果，一个是本地域名服务器，一个是用户的本地机器，这两个缓存都是TTL值和本机缓存大小控制的。

DNS域名解析过程
可以深入了解关于浏览器的缓存机制

第十题

著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）

//  ES5:
var array =[1,5,2,3,4,2,3,1,3,4]
function unique(ar) {
    var tmp = {},
        ret = [];

    for (var i = 0, j = ar.length; i < j; i++) {
        if (!tmp[ar[i]]) {
            tmp[ar[i]] = 1;
            ret.push(ar[i]);
        }
    }

  console.log(ret)
}
unique(array)

//  ES6:
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr){
      return Array.from(new Set(arr))
  }
unique(array)

2019-03-27 十个初级面试题

第一题

第二题

第三题

第四题

第五题

第六题

第七题

第八题

第九题

第十题

猜你喜欢

热点阅读