栗知
追逐中的前端
集中一点，登峰造极 -
凡事预则立，不预则废 -
意志在于磨练，成功在于坚持
获得徽章 16
- #每天一个知识点#
viewport
viewport 是浏览器的可视区域，可视区域的大小是浏览器自己设置的。它可能大于移动设备可视区域，也可能小于移动设备可视区域。一般来讲，移动设备上的viewport都是大于移动设备可视区域。在控制台输出window.innerWidth查看Viewport大小。
相关概念
设备像素：设备屏幕分辨率。iphone6p 的分辨率是 1334*750；
设备独立像素：设备上程序用来描绘数据的一个个的“点”, 在控制台用 screen.width/height查看。iphone6p 的设备独立像素是375*667；
设备像素比（DPR）：设备像素(宽)/设备独立像素(宽)，DPR越高渲染越精致。在控制台输出window.devicePixelRatio查看设备像素比。iphone6s 的设备像素比就是 750 / 375 = 2；
CSS像素：浏览器使用的单位，用来精确度量网页上的内容。在一般情况下(页面缩放比为 1)，1 个 CSS 像素等于 1 个设备独立像素。
屏幕尺寸：屏幕对角线的长度，以英尺为单位。
像素密度（PPI）：每英寸屏幕拥有的像素数。展开评论点赞 - #每天一个知识点#
解决ios audio无法自动播放、循环播放的问题
ios手机在使用audio或者video播放的时候，个别机型无法实现自动播放，可使用下面的代码hack。
ini复制代码//解决iosaudio无法自动播放、循环播放的问题
varmusic=document.getElementById('video');
varstate=0;
document.addEventListener('touchstart',function(){
if(state==0){
music.play();
state=1;
}
},false);
document.addEventListener("WeixinJSBridgeReady",function(){
music.play();
},false);
//循环播放
music.onended=function(){
music.load();
music.play();
}展开等人赞过 评论7 - #每天一个知识点#
BigInt
JavaScript可以处理的最大数字是2的53次方- 1，这一点我们可以在Number.MAX_SAFE_INTEGER中看到。
arduino复制代码consoel.log(Number.MAX_SAFE_INTEGER);//9007199254740991
更大的数字则无法处理，ECMAScript2020引入BigInt数据类型来解决这个问题。通过把字母n放在末尾, 可以运算大数据。
BigInt可以使用算数运算符进行加、减、乘、除、余数及幂等运算。它可以由数字和十六进制或二进制字符串构造。此外它还支持AND、OR、NOT和XOR之类的按位运算。唯一无效的位运算是零填充右移运算符。展开赞过 评论1 - #每天一个知识点#
js的堆内存和栈内存
JavaScript中的基本数据一共有6种：String、Number、Boolean、Null、undefined、Symbol
基本数据类型存储在栈内存中，因为基本数据类型占用空间较小、大小固定，按值访问，属于频繁使用的数据
需要注意的是，闭包中的基本数据类型的变量不是在栈内存中，而是在堆内存中
引用数据类型如对象、数组、方法等存储在堆内存中，因为引用数据类型大小不确定，经常需要占用很大的空间，引用数据类型会在栈内存中存储指针，指向堆中实体的起始地址，寻找引用值时，会首先检索他在栈中的地址，取的地址之后从堆中获取到实体。展开赞过 13 - #每天一个知识点#
输入标签 <input/>
name：为文本框命名，用于提交表单，后台接收数据用。
value：为文本输入框设置默认值。
type：通过定义不同的type类型，input的功能有所不同。
以下为type的具体类型
text 单行文本输入框
password 密码输入框（密码显示为***)
radio 单选框 （checked属性用于显示选中状态）
checkbox 复选框（checked属性用于显示选中状态）
file 上传文件
button 普通按钮
reset 重置按钮（点击按钮，会触发form表单的reset事件）
submit 提交按钮（点击按钮，会吃饭form表单的submit事件）
email 专门用于输入 e-mail
url 专门用于输入 url
number 专门用于number
range 显示为滑动条，用于输入一定范围内的值
date 选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color 选取颜色展开评论点赞 - #每天一个知识点#
使用<script>的两种方式
1.页面中嵌入script代码， 只需指定type属性
<script type="text/javascript">
function sayHi() {
console.log('hihihi');
// 内部不能出现'</script>'字符串，如果必须出现，必须使用转义标签‘\’
alert('<\/script>');
}
</script>
包含在<script>元素内的代码会从上而下依次解释，在解释器对<script>元素内的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示
2.包含外部js文件, src属性是必须的。
<script src="example.js"></script>
// 带有src属性的元素不应该在标签之间包含额外的js代码，即使包含，只会下载并执行外部文件，内部代码也会被忽略。
与嵌入式js代码一样, 在解析外部js文件时，页面的处理会暂时停止。展开1点赞 - #每天一个知识点#
前端 readyState
document.readyState 表示页面的加载状态，有三个值：
loading 加载 —— document仍在加载。
interactive 互动 —— 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete —— 文档和所有子资源已完成加载。 load 事件即将被触发。
可以在 readystatechange 中追踪页面的变化状态：
document.addEventListener('readystatechange', () => {
console.log(document.readyState);
});展开1点赞