1. 请写出一个符合 W3C 规范的 HTML 文件
<!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">
<title>「我的页面」</title>
<link rel="stylesheet" rel="text/css" href="./style.css">
<link rel="stylesheet" href="./mobile.css" media="screen and (max-width:500px;)">
<link rel="stylesheet" href="./print.css" media="print">
<script src="./main.js"></script>
<script src="./gbk.js" charset="GBK"></script>
</head>
<body>
<svg width："200" height:"200" xmlns="http://www.w3.org/2000/svg" version="1.1" >
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
</body>
</html>
2. 移动端是怎么做适配的？
设置理想可视化窗口
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>媒体查询
如果设备满足媒体查询条件就生效
link中css媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" >
样式表中的css媒体查询
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
- 动态rem方案
使用js动态调整rem
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
</script>
用scss转化语法
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。设计师的设计稿宽度需要统一
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
3. 用过CSS3吗? 实现圆角矩形和阴影怎么做?
通过·border-radius·属性制作，例：
border-radius:6px
border-radius有四个属性
border-top-left-radius
border-top-right-radius
border-botton-righ-radius
border-botton-left-radius
通过border-shadow设置，例：
box-shadow: inset 2px 2px 2px 1px red;
会生成一个在边框内，水平、竖直偏移量均为 2px，模糊半径为 2px，同时阴影会扩大 1px 的红色阴影。
4.什么是闭包，闭包的用途是什么？
闭包
var a=1
function f4(){
console.log(a)//2}
如果一个函数使用了他范围外的变量，那么（这个函数+这个变量） 就叫做闭包,
闭包的用途
- 模仿块级作用域
- 存储变量
- 封装私有变量
5. call、apply、bind 的用法分别是什么？
function x(a,b){
console.log(a+b)
console.log(this.a + this.b)
}
var obj = {a:1,b:2}
x.call(obj,3,4) // 7 3
x.apply(obj,[3,4]) // 7 3
var foo = x.bind(obj,3,4)
foo() // 7 3
call()、apply()、bind()都可以通过传入第一个参数改变this对象的指向。 call()的arguments传入具体参数，apply()的arguments传入包裹着参数的数组,bind()的arguments传入具体参数。 call()、apply()是立即调用，bind()的返回值是传给一个变量，可以稍后调用。
6.常见的HTTP状态码
- 200 OK
请求正常处理完毕 - 204 No Content
请求成功处理，没有实体的主体返回 - 206 Partial Content
GET范围请求已成功处理 - 301 Moved Permanently
永久重定向，资源已永久分配新URI - 302 Found
临时重定向，资源已临时分配新URI - 303 See Other
临时重定向，期望使用GET定向获取 - 304 Not Modified
未修改 - 307 Temporary Redirect
临时重定向，POST不会变成GET - 400 Bad Request
请求报文语法错误或参数错误 - 401 Unauthorized
未授权 - 403 Forbidden
禁止访问 - 404 未发现指定网址
无法找到请求资源（服务器无理由拒绝） - 500 Internal Server Error
服务器发生错误 - 503 Service Unavailable
服务器超负载或停机维护
7.请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
POST /path HTTP/1.1
Host: localhost:8081
User-Agent: curl/7.54.0
Accept: */*
no1harm: xxx
Content-Length: 10
Content-Type: application/x-www-form-urlencoded
username=ff&password=123
8.请说出至少三种排序的思路，这三种排序的时间复杂度分别为
- O(n*n)
- O(n log2 n)
- O(n + max)
- 冒泡排序
比较相邻的数字第一个比第二个大就交换位置，对每队相邻的数组重复此操作，从第一队到最后一队，这一步让会让最后一个数字变成最大的，重复此操作，直到没有任何数字可以进行对比 - 快速排序
以一个元素为基准，大的放右边，小的放左边，然后左右重复此操作，直到只有一个数字为止 - 基数排序
将所有待比较的数值统一为同样数位长度，数位较短的数前面补零。然后，从最低位开始，依次进行一次排序。这样从最低位排序一直到最高位排序完成以后，数列就变成一个有序数列。
9.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- 客户端进行DNS解析，把域名转换为IP
- 进行TCP连接（三次握手）客户端我要连接你了，你准备好了吗？ 服务端：我准备好了，你可以连接了。客户端：那我开始连接你了
- 浏览器通过TCP协议对指定端口发起请求报文，请求报文包括请求方法、请求路径、HTTP协议、请求报头等。
- 服务端接受请求报文，开始分析处理，查询服务器内是否存在路径和文件，返回响应报文；如果不存在此路径，返回响应报文，状态码404等消息；如果有，则发送响应报文，包括HTTP协议、状态码200、响应报头、响应内容等；
- 浏览器接收内容，并把它渲染到页面上，页面加载完成
10.著名面试题：如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
- 不要做多重循环，只能遍历一次
- 请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行
ES5
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
var n=[]
for(vari= ;i<array.lenght;i++){
if(n.indexOf(arry[i]) == -1){
n.push(array[i])
}}return n;
}
unique(array)
ES6
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
return [...new Set(array)];
}
console.log(unique(array))
//一遍
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})return res
}
console.log(array)
11.请问JSONP为什么不支持POST请求
因为JSONP是通过动态创建script实现的
动态创建script只能用GET请求，没办法用POST请求
12. JS和JSON又什么区别
这是两门语言
13.请手写一个AJAX
myButton.addEventListener('click', (e)=>{
let request = new XMLHttpRequest()
request.open('GET','/xxx')//配置request
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >= 200 && request.status<300){
let string = request.responseText
let object = window.JSON.parse(string)
}
}
}
})
