DAY6刷面试题

今日感慨：好像很多面试都会问到自己的一个规划和学习路线，我在这方面好像不是很清晰，只有一个大概的感觉，这几天要多多思考一下，下次就能说的更细致啦！

在JS中为什么0.2+0.1>0.3?

因为在JS中，浮点数是使用64位固定长度来表示的，其中1位表示符号位，11位用来表示指数位，剩下的52位尾数为，由于只有52位表示尾数位，而0.1转为二进制是一个无限循环数0.000110011001100....（1100循环）

由于只能存储52位尾数位，所以会出现精度缺失，把他存到内存中再取出来转换为十进制就不是原来的0.1了，就是0.100000000000000005551115123126

而为什么0.2+0.1是因为
0.1和0.2都转换为二进制后再进行运算再转换为十进制正好是
0.30000000000000004

为什么0.2+0.3=0.5？

因为0.2和0.3转换为二进制后进行计算的尾数位大于52位，而实际结果只取52位尾数位，就变成了

0.1000000000000000000000000000000000000000000000000000   //0.5

既然0.1已经不是0.1了，为什么在console.log（0.1）的时候还是0.1？

在console.log的时候会二进制转换为十进制，十进制再会转换为字符串的形式，在转换的过程中发生了取近似值，所以打出来就是一个近似值的字符串。

网络中使用最多的图片格式有哪些？

JPEG、GIF、PNG、JPEG，最流行的是JPEG格式，可以把文件压缩到最小，在PS中以JPEG格式存储的时候，提供11级压缩的级别。

CSS3新特性

边框：
border-radius：添加圆角边框
border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr[内/外部阴影]）
border-image：设置边框图像
bode-image-source：边框图片的路径
boder-image-repeat：图像边框是否平铺（repeat平铺 round铺满 stretch拉伸）
背景：
background-size：背景图片尺寸
background-origin：规定background-position属性相对于什么位置定位。
background-clip：规定背景的绘制区域（padding-box，border-box，content-box）
渐变：
linear-break：定义如何换行
word-wrap：允许长的内容可以自动换行
text-overflow：当文本溢出包含他的元素时应该干啥
text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
transform应用于2D3D转换，可以将元素旋转、移动
缩放、倾斜
transform-origin：可以更改元素转换的位置（xyz轴）
transform-style：指定嵌套元素怎么样在三位空间中呈现
2D转换方法：
rotate旋转translate（x，y）指定元素在二维空间的位移scale(n)定义缩放转换
3D转换方法：
perspective(n)为3D转换translate rotate scale
过渡：
transition-property过去属性名
transition-duration：完成过渡效果需要花费的时间
transition-timing-function：指定切换效果的速度
transition-delay：指定什么时候开始切换效果
动画：
animation-name 为@keyframes动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

如何让Chrome浏览器显示小于12px的文字？

可以添加谷歌私有属性：-webkit-text-size-adjust:none
现在也可以设置：-webkit-transform:scale()

margin和padding在什么场合下使用合适？

margin：外边距。自身边框到另一个边框之间的距离。
padding：内边距。自身边距到自身内容之间的距离。
需要在border外侧添加空白时用margin，当需要在border内侧添加空白时用padding。

弹性盒子布局有哪些属性？

flex-direction：弹性容器中子元素排列方式（主轴列方式）
flex-wrap：设置弹性盒子超过父容器时是否换行
flex-flow：是flex-direction和flex-wrap简写形式
align-item：设置弹性盒子元素在侧周上的对齐方式
align-content：设置行对齐
justify-content：设置弹性盒子元素在主轴上的对齐方式

什么实现标签的禁用？

添加disabled属性

如何判断一个数据是NaN

NaN非数字 但是用typeof检测是number类型
1、利用NaN的定义 用typeof判断是否为number类型且判断是否满足isNaN
2、利用NaN是唯一一个不等于任何自身的特点n！==n
3、利用ES6中提供的Object.is()方法（判断是否两个值相等）n==nan
4、JS中null与undefined区别

相同点：用if判断时，两者都会被转换成false
不同点：number转换的值不同number(null)为0
number（undefined)为NaN
null表示一个值被定义了，但是这个值是空值
undefined 变量声明但未赋值

减少页面加载时间的方式

1、优化图片
2、图像格式的选择（GIF提供的颜色较少，可以用在一些对颜色要求不高的地方）
3、优化CSS（压缩合并CSS，如margin-top，margin-left…)
4、网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型或者是目录）CDN托管。
5、标明高度和宽度（如果浏览器没有找到这两个参数，就需要一边下载图片一边计算大小，如果图片很多，浏览器就需要不断的调整页面。影响速度，影响用户体验）
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，但是页面上也会腾出图片的空位，然后继续加载后面的内容。加载时间变快，用户浏览体验变好）
6、减少http请求（合并文件、合并图片）

This指向

在JS中，this的指向通常指向的是正在执行的函数本身，或者是该函数所属的对象。
全局的this --> 指向的是Window
对象中的 this --> 指向其本身
事件中的this --> 指向时间对象

ajax如何使用

一个完整的AJAX请求包括五个步骤：

• 创建XMLHTTPRequest对象
• 使用open方法创建http请求，并设置请求地址xhr.open(get/post，url，async，true（异步），fasle（同步））经常使用前三个
• 设置发送的数据，用send发送请求
• 注册事件（给ajax设置事件）
• 获取响应并更新页面