每日前端签到（第121天）

第121天（2018-12-03）

• [html] 精灵图和base64如何选择呢？
• [css] 说说visibility属性的collapse属性值有什么作用？在不同浏览器下有什么区别？
• [js] 说说你对js包装对象的理解
• [软技能] 知道为何有些网站访不需要端口号？说说你对端口的理解？
  题目一：
  可参考https://www.cnblogs.com/wangqi2019/p/10498627.html
  Css Sprites（雪碧图或css精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
  原理：
  将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
  优点：
  减少网页的http请求，提升网页加载速度。
  合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.
  缺点：
  前期需要处理图片将小图合并，多些许工程量。
  对于需要经常改变的图片维护起来麻烦。

base64：
介绍：
base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。
通俗点讲：将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。
比如一张图片转成base64编码后就像这样，图片直接以base64形式嵌入文件中
生成base64编码：
图片生成base64可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。
特别说下，webpack中的url-loader可以完成这个工作，可以对限制大小的图片进行base64的转换，非常方便。

优点：
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点：
老东西（低版本）的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载。
适用场景：
应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片

按我来说还是雪碧图见得比较多，如王者荣耀官网英雄联盟官网

http://game.gtimg.cn/images/lol/v3/topfoot-spr.png
http://game.gtimg.cn/images/yxzj/m/m201706/images/bg/index.png

题目二：
设置visibility: collapse后对于普通元素来说跟visibility: hidden效果一样，隐藏元素，且占用空间
但对于一些table元素，比如row、columu、group，效果则跟display: none一样，隐藏元素，但不占空间
但这些效果会随着浏览器底层实现不同而改变：

在Chrome下，visibility: collapse都与visibility: hidden没有什么区别，即仍会占用空间
在火狐浏览器、Opera里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置，不占用空间。
在IE即使设置了visibility: collapse，还是会显示元素。
题目三：
包装对象是用来处理基础类型数据的对象，使得字符串、布尔值等变量可以直接调用方法，在对字符串、布尔值进行方法调用的时候，js引擎会自动创建一个包装对象，将操作的值作为原始值，这一过程是隐式的。但是数字类型除外，想要调用数字对象的方法必须显示创建一个Number对象，否则报类型错误。 例如 “a”.slice(0) 可以，但是 10.toString(2) 不可以，应该写成
new Number(10).toString(2)
10.toString(2)报的是Uncaught SyntaxError: Invalid or unexpected token，这是词法分析出错而不是类型错误。错误原因在于js编译器将.视为小数点而非点运算符，由于小数点后出现了非数字字符故而被视为无效的token。

更深层的原因在于js中只存在IEEE 754规范的双精度数字，并没有整数这一类型，出现在数字之后的第一个.会被看作是小数点。

Workaround

10…toString(2)
10 .toString(2)
(10).toString(2) // recommended
题目四：
所有使用tcp/ip协议的网络应用，都需要端口。
ip只能帮你找到哪一台主机，端口的作用就是帮你找到该主机所对应的的程序。
不加端口号，是以为一些常用的都默认了端口号，如浏览器默认访问80端口。

想稍加思考可以看https://blog.csdn.net/codexjli/article/details/89842688
里面谈到服务器到底是怎么使用端口的以及为什么一个端口上建立了那么多的TCP连接呢，它为什么没有端口冲突的问题，而用一个新应用监听端口就会冲突
一般来说，一台服务器上会运行很多个服务程序，每个程序分配了一个端口，但是访问的时候不需要加端口，除了浏览器添加默认端口以外，服务器代理程序可以将请求链接映射到不同的端口，也就是程序，从而使访问正常触达。