每日思考（2020/07/10）

题目概览

favicon.ico有什么作用？
编写css中你有遇到过哪些浏览器兼容性的问题？
移动端点击事件为什么会有延迟？有哪些方法可以解决？
对RESTful的理解

题目解答

favicon.ico有什么作用？

作用：favicon 中文译名是收藏夹图标，不仅是网站的头像，也是其可以让浏览器的收藏夹中除了显示相应的标题外，还以图标的方式区分不同的网站。 FF 浏览器还支持动态的 favicon，让你的网站更有个性。favicon 在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

引用：

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon"  href="/favicon.ico">

尺寸：16x16 32x32

webpack 打包：

//html-webpack-plugins 来处理 html的话，这个插件已经提供了 favicon
const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, './imgs/favicon.ico')
});
pluginsConfig.push(htmlPlugin);

编写css中你有遇到过哪些浏览器兼容性的问题？

概念：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况；而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的
解决思路和方案：
- 使用CSS Hack解决兼容性问题
  - 浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种
    - 代码本身有问题，如： bg:red ，bg并不是一个有效的css属性
    - 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本身没有问题，但由于使用的是CSS3的属性box-sizing ，会造成在一些低版本内核的浏览器中无法识别。总之，当浏览器遇到这些无法识别的代码时，浏览器不会中止程序的执行，它会立即跳过这些无法识别的代码，就当作没看见一样，继续执行后面的代码
```
.main{
	color1 : red; /*这句代码无法被浏览器识别，浏览器就当这句代码不存在*/
	color: green;
}
```
    - 浏览器方面，除了拥有这种特殊的错误处理方式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有自己独特的CSS属性，这些属性在CSS标准之外。造成这种现象的原因是一些历史遗留问题。比如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒子宽高影响范围的，但其他内核的浏览器是无法识别该属性的。
- 浏览器CSS样式初始化：由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样
```
*{
 margin: 0;
 padding: 0;
}
```
- 渐近增强和优雅降级
  - 优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的供给。优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式
```
.transition{
	transition: all .5s;
	-o-transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
}
```
  - 渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应新版本浏览器的需要。优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性
```
.transition {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
```
- 使用现代化的CSS插件解决兼容问题

移动端点击事件为什么会有延迟？有哪些方法可以解决？

原因：等待300ms看用户是点击还是双击缩放
解决办法：
- 禁止缩放、设置默认视口宽度为设备宽度、
- 设置css touch-action:none、
- fastclick.js：主要的原理就是，创建了一个div，并且执行了这个div的点击事件并且取消默认事件，再隐藏这个div

对RESTful的理解

理解RESTful架构
RESTful API 设计指南
使用nodejs简单设计接口例子：接口设计