第一题
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)
网友评论