每日思考（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插件解决兼容问题

    • postCSS
    • Autoprefixer
    • Browserslist

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

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

对RESTful的理解

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