前端面试试题收集1. css常见结构布局 2.用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值。 bac

本文仅记录本人学习知识，文章出现的题目都是转载网络的。互相学习，一起成长！

1. css常见结构布局

全背景下等宽内容居中
绝对底部
水平垂直居中
圣杯布局 (两边等宽，中间自适应的三栏布局)
双飞翼布局 (两边等宽，中间自适应的三栏布局)
类订单布局 (为左侧高度不固定，右侧自适应高度并且居中)
Flex 布局

2.用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值。

var arr = new Array(5);
function insertRandom(n) {
  if (n < 0) return
  let tmp = Math.floor(Math.random() * 31 + 2)
  if (arr.indexOf(tmp) !== -1) return insertRandom(n)
  arr[n] = tmp
  return insertRandom(n - 1)
}
insertRandom(arr.length - 1)

3.background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框下面

语法：
- background-clip: border-box;背景延伸至边框外沿（但是在边框下层）
- background-clip: padding-box;背景延伸至内边距（padding）外沿。不会绘制到边框处。
- background-clip: content-box;背景被裁剪至内容区（content box）外沿。
- background-clip: text;背景被裁剪成文字的前景色。(有兼容性，谷歌不支持，火狐支持)
例子：半透明边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	main {
		width: 100%;
		padding: 60px 80px 80px;
		background: #b4a078;
	}
	div {
		padding: 12px;
		margin: 20px auto;
		background: white;
		border: 10px solid hsla(0, 0%, 100%, .5);
		background-clip: padding-box;
	}
	label {color: #f4f0ea;}
</style>

<body>
	<main>
	    <div>A paragraph of filler text. La la la de dah de dah de dah de la.</div>
	</main>
</body>
</html>

输出：

4.实现多重边框

语法：
- 图一多重阴影边框用到box-shadow还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“边框”。
- 图二描边用到outline和对应的描边偏移outline-offset来实现
例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
  main{
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  div:nth-of-type(1) {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fafafa;
    margin: 105px 29px;
    box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,  
                0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,  
                0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
                0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
  }
  div:nth-of-type(2){
    width: 200px; height: 120px;
    background: #efebe9;
    border: 5px solid #B4A078;
    outline: #B4A078 dashed 1px;
    outline-offset: -10px;
    margin-bottom: 20px;
  }
</style>
<body>
	<main>
		<div></div>
		<div></div>
	  </main>
</body>
</html>

输出：

5.实现边框内圆角

语法：
- box-shadow是会紧贴border-radius圆角边的，但是，描边outline并不会与圆角边border-radius贴合，我们可以将两者组合，通过box-shadow去填补描边outline所产生的间隙来达到我们想要的效果。张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“边框”。
例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	main {width: 100%;}
	div {
		width: 209px;
		margin: 29px auto;
		padding: 8px 16px;
		border-radius: 8px;
		background: #f4f0ea;
		outline: 6px solid #b4a078;
		box-shadow: 0 0 0 5px #b4a078;
	}
</style>
<body>
	<main>
		<div>例子</div>
	</main>
</body>
</html>

输出：

6.实现图片背景定位

语法：
- background-position:一种CSS数据类型，2D坐标空间，用来设置相对盒子的坐标。
- calc：表达式使用标准运算符优先规则表示其包含的数学计算的结果，意味着从左到右计算表达式；除法或乘法将在加减运算符之前运算，括号内的表达式将首先进行计算。

.el { margin-left: calc(10% + 10px); //将元素的左边距指定为其父级宽度的 “10%” 加上额外的 “10px”; margin-left: calc(10% - 10px); //将元素的左边距指定为其父级宽度的 “10%” 减去额外的 “10px”： } ```

例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	main {
		width: 100%;
		padding: 80px 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	div {
		width: 229px;
		height: 139px;
		margin: auto;
		color: #f4f0ea;
		padding: 16px 29px 28px 20px;
		background: #b4a078 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAAqCAMAAABx9cIXAAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOXRSTlMAcBBQoPHQMJDgH/uwCwLs2iUU+MhgGuZ2BgRq1sx8VT+lnFk7K/WYAbyHgDXBuKqUi0llTbNFrYJ+UzMgAAAFQUlEQVRYw7VY53qiQBSlKS2IICq22Ets0ViSef8X27kwMo2yZL89f5Q77XD7oHDQZjf1oN5mmlKGljlV3+PRPVCqYSOENOXf0YsnLiKYxL2CWUP9u4EI+ovVfyDnOUd91OVEoeUiFu4lVGTsujbiEM1+Tc7Teo6zNo+zL73bVeMfy/j+iMb9DgKc2Jm6j0T4U1m5H0jC1uOmrE0OfTxjxYsGZOYZ5UMkt3snMvuxsBaPl3Z+djy3Yz+VN05z6zKfdIgLcB7QQFVwyMwIleCD7rhHgHb8WueobQS48tySgzuLVYvY5f6Wrgt/Ra7Nixv99uT0Zlz26vLLZHYcJYOjIev3o+QUlbVpYvlPTk9mlOhu8BtysJ1+n63MtdPTBkoBTLDPWEwMzhjC4kgTSATPNzF4LYRhUcGXXgWP7AdurVShNcHTmnJsak2QD1n1urq8/ADsjkpthOAQbOxq2k6e1YVXcHgZtePtRbVBrCxhDhmFk6hgfnEaxNyCeQ74Zc3cnDMEx5wqeZjCyw3p3uddbr6C4P7i/ARcmHowDc4l87zCz48qcncauBIgrd1T2/exUQvq1ZIcQwEpZyZb0Q2FcxdV5D7FjYS3+1YAT/xvXuS0Y+FcZQtpSHaekyi4VpAbNHCkCjJuySaJ8gtkenmc+lhXtMZY1sE7K4ixIK4gNxMWyV78JBnT3hW2DKJaPUhODufZEE8mK9lDtFWQi0sTwZFQD6GIKoVovrLCTktxgtDWGHxBE0P+DzLT6yI5ORF0hsU5cJMmhSdrOBmX184a+gt0MzuvRHJyhE+UYkzS4RtrFBkjGK5JDjJBIJMTo/6NE0h+3Mc/P3hpWDwLjHavSQ7YhBXksOtelHKD4R8LG79klvk6cqD+BdZZLmxQuPDIYaQotGxTCDGFOyQDrxSHhFI0UuqhgyqgJuT23CK5rHuV5Jxkr1rwUCW5Ss1ZqVm35eTWbDAHagmyqNIsHj4kK04yS5pDQynGAqEN/rnipcPiWSu2qOvl6uBQERBjKPvFOKfpNRYzvty+zP4DOZxu7PKr3Yk0Hk+ltMoF9ck5h8PhXSTXAyGxklWawSBvXYhTxcXkvrHxWyw5vSJsaJ76EMl5DdpfduFvqb3A04c48M/FRc6HprY2uXADXSpPjvj3hK4QG7WbYRhx1oIHxPodTQhRPGsRvjqbfX1y4AztlkTOcakHj7FJNPE6RtSpbV7tRiyn2dbp1bkvoIbXJuf5ZE9KjrZ+D8o/zinkjSCldMhatnZLvgDB0h5+F7vFkYvecnAGcvwhvpdD7ogw1pkW/VDycLgqaz7NILDzLafeu6tEcT+KUjNaW22yTE4lJ3q9mOd4nWZD5YCRT6Zj9rnbPvFdG4JmE9Ymt6TLKDnmpVOlBG5OcjyCEOYE7E0s8oRrZYRS7BWenN3MwZg9pwVPVn4S3sHDlnYertjnxuKp6w74v8DOaSCADeJ6AbGk2pErxJQODiYIwxrwtzJb/ESjgqAZyC0V+F0NclRxW6l8saMGWdVHGO3lkFJbyt/AdgZIOlfGvcw5UVxNclRxMjk6HBCT9RGgf5muNa+3Xm59lMKdsYntO5U9RquepwXPQ4QIjLrkhu1slWYmAIHGh7LxWtdEMnzgG7LsrkhGB4rQUiDn2znoU3KBgRGQbwkZNCZLQfnJ7Lh3EQ/36p0gVXNX6aeNBETrG8nYv2yZBh2JnAxn20AUm0WARTa+Z0z5rUZjjpqOuc/xrEddchTnSnIAT99GPtSLaDv1iqcd38/2Bptz/KkGeeOmUYKcpvCeDYqH/gH0uaoGeLQhjwAAAABJRU5ErkJggi8qICB8eEd2MDB8YzcwNDdjMGQ3NzA2ZTI2ZDhlZTlhMDVjOTFkZDA3MzggKi8=') no-repeat bottom right / 78px 21px;
	}
	div:nth-of-type(1) {
		background-position: right 29px bottom 28px;
	}
	div:nth-of-type(2) {
		background-origin: content-box;
		margin: 29px 0;
	}
	div:nth-of-type(3) {
		background-position: calc(100% - 29px) calc(100% - 28px);
	}
</style>

<body>
	<main>
		<div class="block1">background-position方案</div>
		<div class="block2">background-origin方案</div>
		<div class="block3">calc方案</div>
	</main>
</body>
</html>

输出：

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

link是HTML标签，@import是css提供的。
link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
link没有兼容性问题，@import不兼容ie5以下。
link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

8. html的元素有哪些（包含H5）？

块级元素：

名称	作用	名称
head		div
meat	申明页面的诸多属性	ul
title	窗口标题	li
style	样式	ol
body	文本内容	p
header	头部块	dl
section	内容块	dt
footer	底部块	dd
article	文章标签	form
hr	下划线	table
h1-h6	描述标题	theader
aside		tbody
nav		tr
menu		th
bir

行内元素：

名称
label
a
span
td
input
button
strong
b
i

9. CSS3有哪些新增的特性？

边框(borders):
- border-radius 圆角
- box-shadow 盒阴影
- border-image 边框图像
背景:
- background-size 背景图片的尺寸
- background_origin 背景图片的定位区域
- background-clip 背景图片的绘制区域
渐变：
- linear-gradient 线性渐变
- radial-gradient 径向渐变
文本效果:
- word-break
- word-wrap
- text-overflow
- text-shadow
- text-wrap
- text-outline
- text-justify
转换
2D转换属性
- transform
- transform-origin
2D转换方法
- translate(x,y)
- translateX(n)
- translateY(n)
- rotate(angle)
- scale(n)
- scaleX(n)
- scaleY(n)
- rotate(angle)
- matrix(n,n,n,n,n,n)
3D转换：
3D转换属性：
- transform
- transform-origin
- transform-style
3D转换方法
- translate3d(x,y,z)
- translateX(x)
- translateY(y)
- translateZ(z)
- scale3d(x,y,z)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- rotate3d(x,y,z,angle)
- rotateX(x)
- rotateY(y)
- rotateZ(z)
- perspective(n)
过渡
- transition
动画
- @Keyframes规则
- animation
弹性盒子(flexbox)
多媒体查询@media

10. 写一个方法去掉字符串中的空格

实现思路：用正则表达式中的replace方法匹配，'\s'是指空白符(包括空格，换行符，回车符，换页符，制表符等)；
如果正则表达式不太明白的掘友，可以查看我之前写过有关正则表达式的个人总结篇

var trim = function(str){
    str.replace(/\s*/g,""); //去除字符串内所有的空格
    str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
    str.replace(/^\s*/,""); //去除字符串内左侧的空格
    str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格
}

11. 在页面上隐藏元素的方法有哪些？

占位:
- visibility: hidden;
- margin-left: -100%;
- opacity: 0;
- transform: scale(0);
不占位:
- display: none;
- width: 0; height: 0; overflow: hidden;
仅对块内文本元素:
- text-indent: -9999px;
- font-size: 0;

12. 去除字符串中最后一个指定的字符？

function delLast(str, target) {
  return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
}
const str = delLast('asdfghhj', 'h')
console.log(str) // asdfghj

13. CSS选择器有哪些？哪些属性可以继承？

CSS选择器
可以继承的常用属性
- font-size
- font-weight
- font-style
- font-family
- color
- text-indent
- text-align
- text-shadow
- line-height
- word-spacing
- letter-spacing
- text-transform

14. 写一个方法把下划线命名转成大驼峰命名？

function transfor (str){
    var reg=/-[a-z]/g;
    return str.replace(reg,function(vc){
        return vc.slice(1).toUpperCase();
    })   
}

transfor("get-element-by-id");  //getElementById

15. 简述超链接target属性的取值和作用

_self: 在当前窗口打开页面
_blank: 在新窗口打开页面
_top: 在整个框架打开页面不是很理解(在iframe或者frameset里用的比较多)

16. 写一个把字符串大小写切换的方法

语法：

字符转ascii码：用charCodeAt()

ascii码转字符：用fromCharCode(number)

数组转字符串: Array.join("-")

字符串转数组: String.split(",")

function tansfrom(str){
//先把字符串转为数组
var charStr=str.split("");
//遍历数组
    for(let i=0;i<charStr.length;i++){
        if(charStr[i].charCodeAt()>=65&&charStr[i].charCodeAt()<=90){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()+32);
        }else if(charStr[i].charCodeAt()>=97&&charStr[i].charCodeAt()<=122){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()-32);
        }
    }
    return charStr.join("");
}
tansfrom("abA");

17. 认识BFC规范

BFC 全称为 块格式化上下文。是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
特性：
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

18. 统计某一字符或字符串在另一个字符串中出现的次数

方法一：

function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}

console.log(strCount('abcdef abcdef a', 'abc'));

方法二：

function substrCount(str, target) {
  let count = 0;
  while (str.includes(target)) {
    const index = str.indexOf(target);
    count++;
    str = str.substring(index + target.length);
  }
  return count;
}

方法三：（推荐！）

var str="abcdacd";
var target="a";
var childInNums = str.split(target).length - 1;

19. 浏览器内多个标签页之间的通信方式有哪些？

stroage

  localStorage和sessionStorage
  
  localStorage保存数据会一直保存没有过期时间，不会随浏览器发送给服务器。大小5M或更大
  
  sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大
  
  localStorage和sessionStorage都继承于Storage，提供了统一的api来访问和设置数据。api列表为：
  
  clear 清空存储中的所有本地存储数据
  getItem 接受一个参数key，获取对应key的本地存储
  key 接受一个整数索引，返回对应本地存储中索引的键
  removeItem 接受一个参数key，删除对应本地存储的
  keysetItem 接受两个参数，key和value，如果不存在则添加，存在则更新。

localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();// 对象访问方式同样有效
localStorage.order = 'b110';
localStorage.order; // b110

postmessage

  postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、
  跨域消息传递。html5引入的message的API，主要的功能：
  1.页面和其打开的新窗口的数据传递
  2.多窗口之间消息传递
  3.页面与嵌套的iframe消息传递
  4.上面三个问题的跨域数据传递

  postMessage(data,origin)方法接受两个参数

   1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，
   然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的
   时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
  
  2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，
  这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，
  当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

index.html


<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">Frame Color</div>
</div>
<div>
    <iframe id="child" src="https://www.test2.com/test2.html"></iframe>
</div>


window.onload=function(){//传输数据
    window.frames[0].postMessage('getcolor','http://lslib.com');
}

test2.html

window.addEventListener('message',function(e){ //接收消息
    if(e.source!=window.parent) return;
    var color=container.style.backgroundColor;
    window.parent.postMessage(color,'*');
},false);

20. 渐进增强和优雅降级

渐进增强

  一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、
  交互、追加功能达到更好的体验。

优雅降级

  一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。
  比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack
  使其可以在低版本浏览器上正常浏览。

若低版本用户居多，则优先采用渐进增强的开发流程；
若高版本用户居多，则为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。

21. 写一个判断数据类型的方法

分析

  typeof 只能判断基本类型 string,number,boolean,undefined,object
  null 会被判断成 object
  比较全面的是使用 Object.prototype.toString 方法，只需要对返回值进行字符串分割即可

const typeCheck = (obj) => {
  const typeStr = Object.prototype.toString.call(obj); //返回格式：[object xxxxx]
  return typeStr.toLowerCase().slice(8, typeStr.length - 1);
};

console.log(typeCheck("str")); //string
console.log(typeCheck(1)); //number
console.log(typeCheck(() => null)); //function
console.log(typeCheck({a: 1})); //object
console.log(typeCheck([1, 2, 3]));//array
console.log(typeCheck(new Set([1,2,3]))); //set

22. viewport常见设置都有哪些？

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

属性名	说明
width	设置viewport的宽度，为一个正整数，或字符串"width-device"
height	设置viewport的高度，这个属性对我们并不重要，很少使用
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

23. 对比下px、em、rem有什么不同？

px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr

em是指相对于父元素的大小

rem中的r就是root，也就是相对于root元素的大小（html标签）

24. ::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？

认识 :before 和 :after

默认 display: inline；

必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上；

默认user-select: none，就是 :before 和 :after 的内容无法被用户选中；

伪元素可以和伪类结合使用形如：.target:hover:after。

:before 和 :after 是在CSS2中提出来的，所以兼容IE8；

::before 和 ::after 是CSS3中的写法，为了将伪类和伪元素区分开；

CSS 中其他的伪元素有：::before、::after、::first-letter、::first-line、::selection 等；

不可通过DOM使用，它只是纯粹的表象。在特殊情况下，从一个访问的角度来看，当前屏幕阅读不支持生成的内容。

content 定义用法

content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。

说明： 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制。

比较
- :表示伪类，是一种样式，比如:hover, :active等
- ::表示伪元素，是具体的内容，比如::before是在元素前面插入内容，::after则是在元素后面插入内容，不过需要content配合，并且插入的内容是inline的。
- :before和:after其实还是表示伪元素，在css3中已经修订为::before和::after了，只是为了能兼容IE浏览器，所以也可以表示成:before和:after

25. http都有哪些状态码？

200 成功
301 重定向
304 (未修改) 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
400 (错误请求) 服务器不理解请求的语法。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
500 (服务器内部错误) 服务器遇到错误，无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。
504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

26. 说说bind、call、apply的区别？并手写实现一个bind的方法？

call和apply都是为了解决改变this的指向。作用都是相同的，只是传参的方式不同。除了第一个参数外，call可以接收一个参数列表，apply只接受一个参数数组。
bind：和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。bind方法不会立即执行，而是返回一个改变了上下this后的函数。

Function.prototype.myCall = function (context = window) {
  context.fn = this;
  var args = [...arguments].slice(1);
  var result = context.fn(...args);
  // 执行完后干掉
  delete context.fn;
  return result;
}

Function.prototype.myApply = function (context = window) {
  context.fn = this;
  var result
  // 判断 arguments[1] 是不是 undefined
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result;
}

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  var _this = this
  var args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

26. 说说图片格式及使用场景？

GIF
- 优点：GIF是动态的；支持无损耗压缩和透明度。
- 缺点：详细的图片和写实摄影图像会丢失颜色信息；在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，没有半透明效果或褪色效果。
- 适用场景：主要用于比较小的动态图标。
PNG
- 优点：PNG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小；图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。
- 缺点：占内存大,会导致网页加载速度慢；对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
- 适用场景：主要用于小图标或颜色简单对比强烈的小的背景图。
- PNG8 透明图会有锯齿，低版本ie支持，文件小很多;
- PNG24 透明图不会有锯齿，低版本ie不支持，文件大一些
JPG
- 优点：占用内存小，网页加载速度快。
- 缺点：JPG格式图片是有损压缩的图片，有损压缩会使原始图片数据质量下降，即JPG会在压缩图片时降低品质。
- 适用场景：由于这种格式图片对色彩表现比较好，所以适用于色彩丰富的图片。主要用于摄影作品或者大的背景图等。不合适文字比较多的图片。
SVG
- 优点：SVG是矢量图形，不受像素影响，在不同平台上都表现良好；可以通过JS控制实现动画效果。
- 缺点：DOM比正常的图形慢，而且如果其结点多而杂，就更慢；不能与HTML内容集成。
- 适用场景：主要用于设计模型的展示等。
WebP
- 优点：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。
- 缺点：相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
- 适用场景：WebP既支持有损压缩也支持无损压缩。将来可能是JPEG的代替品。

27. 视觉格式化模型(Visual formatting model)

mark: segmentfault.com/a/119000000…

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model

28. 说说前端性能优化方案有哪些？

客户端优化
- 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
- 使用CSS雪碧图（CSS Sprites）CSSSprites一句话：将多个图片合并到一张单独的图片，这样就大大减少了页面中图片的HTTP请求。
- 减少DOM操作次数，优化javascript性能。
- 少用全局变量、减少DOM操作、缓存DOM节点查找的结果。减少IO读取操作。
- 延迟加载 | 延迟渲染
- 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
- 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
服务端优化
- 尽量减少响应的体积，比如用 gzip 压缩，优化图片字节数，压缩 css 和 js；或加快文件读取速度，优化服务端的缓存策略。
- 客户端优化 dom、css 和 js 的代码和加载顺序；或进行服务器端渲染，减轻客户端渲染的压力。
- 优化网络路由，比如增加 CDN缓存；或增加并发处理能力，比如服务端设置多个域名，客户端使用多个域名同时请求资源，增加并发量。
最后
- 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
- 减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

29. 说说创建对象的方式？

new Object() 直接通过构造函数创建一个新对象

var obj = new Object() // 等同于 var obj = {}

使用字面量的方式更简单，其实他俩是一样的。优点是足够简单，缺点是每个对象都是独立的。

工厂模式

function createObj(name,age){
    var obj = {};
    obj.name=name;
    obj.age=age;
    return obj
}
var Anson = createObj('Anson', 18)
console.log(Anson)
//{name: "Anson", age: 18} obj = {}

优点是可以解决创建多个相似对象的问题，缺点是无法识别对象的类型。

构造函数

function Person(name,age){
    this.name =name;
    this.age=age;
    this.sayName =function (){ alert(this.name) }
}
var person = new Person('小明',13);
console.log(person);
//Person {name: "小明", age: 13, sayName: ƒ}

优点是可以创建特定类型的对象，缺点是多个实例重复创建方法

（构造函数+原型）组合模式

function Person(name, age){
    this.name = name;
    this.age = age;
    Person.prototype.sayName = function (){ alert(this.name) }
 }
var person = new Person('小白',18)
console.log(person);
//Person {name: "小白", age: 18} __proto__ -> sayName: ƒ ()

优点多个实例引用一个原型上的方法比较常用

动态原型

function Person(name,age){
    this.name=name
    this.age =age
    if(typeof this.sayName != 'function'){
        Person.prototype.sayName = function(){ alert(this.name) }
  }
}
var person = new Person('小红',15)
console.log(person);
//Person {name: "小红", age: 15} 动态创建sayName: ƒ ()

优点可以判断某个方法是否有效，来决定是否需要初始化原型，if只会在仅在碰到第一个实例调用方法时会执行，此后所有实例共享此方法，需要注意的一点是，不能重新原型对象。

寄生构造函数模式

function Person(name,age,job){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
        console.log(this.name)
    }
    return o;
}
var friend=new Person("her",18,"Front-end Engineer");
friend.sayName();//her

除了使用new操作符，其他的和工厂函数一样，可以为对象创建构造函数。

稳妥模式

function Person(name, age){
    var o={};
    o.sayName=function(){ alert(name) }
    return o;
}
var person = ('小亮'，24);
person.sayName();//’小亮‘

除了使用person.sayName()之外，没有办法在访问到name的值，适合在某些安全执行环景下使用。

Object.create()

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

传入一个原型对象，创建一个新对象，使用现有的对象来提供新创建的对象的__proto__，实现继承。