2020-01-03

2020-01-04 本文已影响0人 cl_c1c1

知识点：

1.在js里面0.1+0.2等于0.3吗为什么，如果让你设计一个函数可以实现浮点类型的精确运算你如何设计，说一下核心思路

0.1不是真正的0.1因为硬件的问题，0.1换算位二进制不是真正的0.1。所以会存在误差。

判断：

1）Number.EPSILON：

ES6 在Number对象上面，新增一个极小的常量Number.EPSILON。根据规格，它表示 1 与大于 1 的最小浮点数之间的差。

如果误差值小于2的-50次方，则误差可以忽略

计算：

1）整数转化。先乘以10的倍数，在除以10的倍数：(0.1*10+0.2*10)/10

2）parseFloat((0.1 + 0.2).toFixed(10))

2.如何实现大数相乘，说一下核心思路（我的思路拆分成份，反转递归，记录位数，最后反转，其实也可以把一个数拆分出来分别和第二个数相乘再想加，要考虑优化度哈）

3.缓存资源过期判断(一般静态资源都是有版本号和hash的，响应请求出来检测到url变化自然就认为资源需要更新，反正差不多就行了)

缓存过期：

hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。

1.主动过期：自己删除。2.被动过期：会产生一个回调函数的逻辑

4.假设css文件失效了，页面会出现什么现象（假设css文件只有一个失效或者全部失效，或者判断资源过期从新从cdn拉去新资源过程时间消耗包括新资源引入从新加载过程）

页面报错空白

5.单页面多页面的差别

实践：

用css写个气泡

<pre>

<!DOCTYPE html>

<head>

.tag {

width: 100px;

height: 22px;

border: 1px solid Gainsboro;

position: relative;

background-color: #F9F5C7;

font-size: 8px;

text-align: center;

line-height: 20px;

border-radius: 4px;

}

.tag:before, .tag:after {

content: "";

display: block;

border-width: 10px;

position: absolute;

bottom: -20px;

left: 30px;

border-style: solid dashed dashed;

border-color: Gainsboro transparent transparent;

font-size: 0;

line-height: 0;

text-align: center;

}

.tag:after {

bottom: -19px;

border-color: #F9F5C7 transparent transparent;

}

.pop-sty{

width:100px;

height:20px;

border-radius: 4px;

border:1px #E3E2E5 solid;

position: relative;

}

.pop-sty::before{

content:"";

position: absolute;

display: block;

border-width: 10px;

left:10px;

bottom: -20px;

background-color: #fff;

border-style:solid dashed dashed;

border-color:#e3e2e5 transparent transparent

}

</style>

</head>

<body>

1111

</div>

<span class="pop-sty">popover</span>

</body>

</html>

</pre>

webpack怎么搭建

webpack的loader和plugin的原理