JS
1、js能表示多少位的数字,怎么表示一个负数
JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的
第1位:符号位,0表示正数,1表示负数
第2位到第12位(共11位):指数部分
第13位到第64位(共52位):小数部分(即有效数字)
符号位决定了一个数值的正负,指数部分决定了数值的大小,小数部分决定了数值的精度
所以最多只能到52+1个二进制位表示有效数字,这意味着,绝对值小于2的53次方的整数,即-2^53到2^53,都可以精确表示。
2^53对应的十进制是9后面15个0
1、bigint可以精确地表示从-2^63到2^63-1,即从-9,223,372,036,854,775,808到 9,223,372,036,854,775,807之间的整数都可以由bigint表示,它占用了八个字节的存储空间。
2、相比之下,int数据类型所表示的数值范围从-2^31到2^31-1,也就是可以用int数据类型来表达-2,147,483,648到2,147,483,647之间的整数。一个int型占用四个字节的存储空间。
3、ES6之后基本类型增加到了6种:String、Number、Boolean、Null、Undefined、Symbol。BigInt即是第七种基本类型,V8引擎v6.7 默认启用对 BigInt 的支持。在JavaScript中,Number可以准确表达的最大数字是2^53,没有比这个更大的数字
4、JavaScript中Number是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一
2、for in 与for of
for in 遍历key,适合遍历对象,for of 遍历value,适合遍历array,map,set等
1、for in
是ES5的语法标准,而for of
则是ES6语法标准。
2、for in
所遍历的数组下标是String类型而不是Number类型。(可理解为遍历的是key,所以为string类型)
3、for in
遍历时可以遍历到当前数组的所有属性名和方法名。包括其原型链上定义的属性名和方法名。
4、for of
遍历时则不会遍历原型链上的属性和方法且不会遍历定义在数组上的属性和方法。
5、for in
循环的是对象的可枚举(enumerable)属性;for of
遍历对象则会报错
6、for of
正常遍历的数据类型都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构,早就内置好了Iterator(迭代器),它们的原型中都有一个Symbol.iterator
方法,而Object对象并没有实现这个接口,使得它无法被for of
遍历。
为Object实现一个Iterator
Object.prototype[Symbol.iterator] = function() {
let _this = this
let index = 0
let length = Object.keys(_this).length
return {
next:() => {
let value = _this[Object.keys(_this)[index]]
let done = (index >= length)
index++
return {value,done}
}
}
}
for(let i of obj){
console.log(i) // obj的value
}
HTML
3、iframe 的优缺点
iframe是HTML中的一个标签,用于在网页中嵌入其他网页或文档。它可以将一个网页作为一个独立的窗口嵌入到另一个网页中,实现页面的分割和内容的复用。iframe也存在一些优缺点
优点:
1.代码模块化:使用iframe可以将一个网页划分为多个模块,每个模块单独编写HTML文档,使代码更加模块化和易于维护。
2.跨域通信:由于浏览器的同源策略,一个网页无法直接访问另一个域名下的内容。但是,使用iframe可以在同一个页面中加载不同域名下的内容,从而实现跨域通信。
3.独立性:iframe中的文档是独立的,它的样式和JavaScript代码不会影响到外层文档的样式和JavaScript代码。
4.异步加载:iframe可以异步加载嵌入的网页或文档,不会阻塞主页面的加载,提高页面的加载速度和用户体验。
缺点:
1. 降低性能:每个iframe都需要单独加载和渲染,这会导致网页的加载速度变慢,降低性能。iframe会阻塞主页面的Onload事件
2. SEO问题:iframe中的内容不会被搜索引擎抓取和索引,这会对网页的SEO产生影响。
3. 安全问题:iframe中的文档可以在外层文档中执行脚本,这可能导致安全问题。(在标签上加sandbox属性,会为iframe提供沙箱环境)
4. 很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差。
5. 浏览器的后退按钮无效(只能针对实现当前光标所在页面的前进与后退,无法实现frameset整个页面的前进与后退)
父子iframe通信:window.postmessage(message, targetOrigin) message: string, 传对象需要JSON.stringify;targetOrigin: 接受你传递消息的域名,可以设置绝对路径,也可以设置"“或者”/"。"/"表示只能传递给同域域名。
接收方:window.addEventListener('message', receiver, false); receiver回调函数,形参e,取数据e.data
在iframe中获取父级内容
window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self
iframe中的安全问题:
安全漏洞:由于iframe可以加载其他域名下的网页,存在一定的安全风险。恶意的网页可以通过iframe加载其他网页,并进行一些攻击行为。例如,通过在iframe中加载一个恶意的网页,可以进行跨站脚本攻击(XSS),从而窃取用户的敏感信息或进行其他恶意操作。另外,通过iframe还可以进行点击劫持攻击,即将一个透明的iframe覆盖在一个看似无害的按钮或链接上,当用户点击按钮或链接时,实际上是点击了透明的iframe,从而触发了恶意操作。
可以采取以下措施:
1、验证和限制加载内容的安全性:在使用iframe加载内容之前,需要对加载的内容进行验证和限制,确保加载的内容是可信的。可以使用一些安全机制,如内容安全策略(CSP)或跨域资源共享(CORS),对加载的内容进行安全检查和限制。
2、防止XSS攻击:为了防止XSS攻击,可以在加载的网页中进行输入验证和输出编码,避免恶意脚本的注入。另外,可以使用一些安全机制,如HTTP头部的X-XSS-Protection字段或Content Security Policy(CSP)来提高网页的安全性。
3、限制跨域访问:为了限制跨域访问,可以在服务器端设置适当的响应头,如Access-Control-Allow-Origin,限制只允许特定的域名进行访问。另外,还可以使用一些安全机制,如跨域资源共享(CORS)或跨域资源嵌入(XRI),对跨域访问进行限制和控制。
4、 谨慎使用第三方内容:在加载第三方内容时,需要谨慎选择可信的第三方服务提供商,并对加载的内容进行安全检查。可以使用一些安全机制,如内容安全策略(CSP)或沙箱机制,对加载的内容进行限制和隔离
框架相关
1、Vite和webpack、rollup打包工具对比
vite是一种前端构建工具,由两部分组成:
- 一个基于浏览器原生ES模块的开发服务器。利用浏览器去解析模块,在服务端按需编译返回,完全跳过了打包这个概念。同时另有Vue文件支持,还搞定了热更新,而且热更新的速度不会随着模块增加而变慢
- 一套构建指令,它使用RollUp打包代码,并且是预配置的,可输出用于生产环境的高度优化过的静态资源。
- 兼容性注意,Vite2 需要Node版本 >= 12.0.0。
rollup、webpack、vite 的区别
- rollup更适合打包库,webpack更适合打包项目,vite基于rollup实现了热更新也适合打包项目。
- rollup基于esm打包,打包生成的文件更小。Rollup不支持HMR(热更新)(识别commonJs需要插件)
- rollup原生支持tree-shaking,webpack2开始支持且消除效果不好。
- webpack支持代码切割。(分包)
- webpack支持HMR。(热更新)
- vite在生产环境通过rollup进行打包(打包体积小),生成esm模块包。(快)
- vite在开发环境时,基于浏览器支持esm,让浏览器解析模块,然后服务器按需编译返回。同时基于esbuild进行预构建(开发环境)打包不常变动的第三包,并进行缓存。(缓存+快)
- Vite 同时利用 HTTP 头来加速整个页面的重新加载(再次让浏览器为我们做更多事情),源码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age,immutable 进行强缓存,因此一旦被缓存它们将不需要再次请求。
- vite热更新,实现按需编译,按模块更新。webpack需要全部重新编译并更新。(快)
为什么选 Vite
- webpack:分析各个模块之间的依赖,然后进行编译,打包后的代码在本地服务器渲染。随着模块增多,打包的体积变大,造成热更新速度变慢,文件修改后的效果也需要几秒钟甚至更长时间才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。
- vite:vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite可按需动态编译缩减时间。当项目越复杂、模块越多的情况下,vite明显优于webpack。
webpack是基于nodejs构建,js是以毫秒计数。
vite是基于esbulid预构建依赖,可提高页面加载速度,esbulid是采用go语言编写的,go语言是纳秒级别的。
Vite采用了ES模块来实现模块的加载。目前基于web标准的ES模块已经覆盖了超过90%的浏览器。