每日前端签到（第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连接呢，它为什么没有端口冲突的问题，而用一个新应用监听端口就会冲突
一般来说，一台服务器上会运行很多个服务程序，每个程序分配了一个端口，但是访问的时候不需要加端口，除了浏览器添加默认端口以外，服务器代理程序可以将请求链接映射到不同的端口，也就是程序，从而使访问正常触达。

每日前端签到（第121天）相关推荐

html七天签到页面,每日前端签到（第七天）
第一题: 多个标签页共享最能想到的是localstroe 和postmessage 第二题: 优雅降级是指向后兼容,兼容老版本.而渐进增强是在对行功能进行兼容,向前兼容第三题: //我们知道,判断类 ...
B站每日自动签到传统单节点网站的 Serverless 上云
什么是函数?刚刚考完数学没多久的我,脑力里立马想到的是自变量.因变量.函数值,也就是y=f(x).当然,在计算机里,函数function往往指的是一段被定义好的代码程序,我们可以通过传参调用这个定义好 ...
nodejs 获取cpu核心数量_用 NodeJS 充分利用多核 CPU 的资源[每日前端夜话0xCB]
每日前端夜话0xCA 每日前端夜话,陪你聊前端. 每天晚上18:00准时推送. 正文共:1558 字预计阅读时间:7 分钟作者:Nick Major 翻译:疯狂的技术宅来源:coderrocke ...
js打印线程id_Node.js多线程完全指南[每日前端夜话0x43]
每日前端夜话0x3D 每日前端夜话,陪你聊前端. 每天晚上18:00准时推送. 正文共:5177 字预计阅读时间: 17 分钟翻译:疯狂的技术宅原文:https://blog.logrocket ...
php 实现每日持续签到，累计签到，送积分
php 实现每日持续签到,累计签到,送积分地址:https://blog.csdn.net/qq_37462176/article/details/79009800#comments
使用 JS 和GitHub Actions实现哔哩哔哩每日自动签到、投币、领取奖励
使用 Axios 和GitHub Actions实现哔哩哔哩每日自动签到.投币.领取奖励 SCHEDULE-BILIBILI 是一个B站自动执行任务的工具,使用 JS + AXIOS 编写,通过它可以 ...
利用腾讯云Python函数实现机场每日自动签到领流量
利用腾讯云Python函数实现机场每日自动签到领流量基于项目 https://github.com/zhjc1124/ssr_autocheckin 修改 sspanel自动签到脚本(腾讯云函数) ...
每日持续签到，累计签到，送积分
一,功能要求如图: 二,数据表字段: 三,相关代码如下: //签到页面(累计签到) public function signedCount(Request $request){ $user_id = ...
微信考勤签到 php,【投稿】微信签到打卡领积分源码,每日积分签到
PHPwork模块化扩展开发,轻量mvc,原生php和常用封装,提供PHPwork开发文档,方便二次开发. 小白请勿拍,我们卖的只是源码,只能保证源码使用无错,无技术支持. 程序提供了自动安装,关键配 ...

每日前端签到（第121天）

第121天（2018-12-03）

每日前端签到（第121天）相关推荐

最新文章

热门文章