sialvsic的Tech空间

# 浏览器

# 常见的跨域解决方案

  • cors
  • node/nginx代理
  • jsonp
  • websocket
  • window.name/document.domain + iframe
  • postMessage + iframe
  • img/iframe 标签

参考：FE CORS 跨域

# 宏任务和微任务区别和联系

js-003

执行一个宏任务，然后扫完该宏任务产生的微任务，把产生的宏任务放到下次循环，依此类推

执行同步代码，这属于宏任务
执行栈为空，查询是否有微任务需要执行
执行所有微任务
必要的话渲染 UI
然后开始下一轮 Event loop，执行宏任务中的异步代码

1.同步任务(宏任务) -> 微任务(全部执行完) -> 渲染 -> 2.同步任务(宏任务) -> 微任务 -> 渲染 ...

宏任务有

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务有

Promise.then
Object.observe
MutationObserver
process.nextTick(node.js中)

参考：JavaScript 运行机制

# 100 * 100 像素的图片大小计算

对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），
所以该图片大小大概为 ~39KB（10000 * 1 * 4 / 1024）

# 常见的图片格式

  • BMP：是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件
  • GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景
  • JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大
  • PNG PNG-8 PNG-24
  • SVG：是无损的矢量图
  • WebP：google提出的新的格式

# Canvas和SVG的区别

SVG: 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 其特点如下：

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

Canvas: Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以.png 或 .jpg格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

# HTML5的离线储存怎么使用，它的工作原理是什么

# 渐进增强和优雅降级之间的区别

渐进增强（progressive enhancement） 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验

优雅降级 graceful degradation 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

两者区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带

# HTML5 drag API

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

# cookie有哪些属性

  • name：名字
  • value：值
  • path：路径
  • domain：域名
  • expires：过期时间
  • size：长度大小
  • httpOnly：是否允许通过js访问cookie
  • secure：是否通过https
  • samesite：cookie携带的站点规范

# 怎么禁止js访问cookie

cookie的添加属性 http only属性

三个值：

  • Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
  • Lax 允许部分第三方请求携带 Cookie
  • None 无论是否跨站都会发送 Cookie

fe-dev-001

← 网络 →

陕ICP备20004732号-3