写在前面
春招第一面，现实沉重的一击
面试官是一位四五十岁的大叔，压迫感还是给足了。就面了20分钟，估计看我太菜了...
八股很少，问题略微偏门...
直接上题目吧：
面试题
问：echarts底层是用什么实现的？ 答：用的canvas吧...（我只单纯用过...）
正解： 底层库是ZRender引擎。对于支持 Canvas 的浏览器，eCharts会使用Canvas 来绘制图形;而对于不支持Canvas的浏览器，则会使用SVG 来实现图形的绘制
问：svg和canvas有什么区别？
答：不知道（canvas一条路走到黑了是吧，我不了解啊...）
正解：
- 渲染方式
svg是基于 XML 的矢量图形格式，每个图形元素是独立的 DOM 节点，可通过 CSS 或 JS 直接操作，修改图形属性（颜色、位置）时，浏览器会自动重新渲染；
canvas是位图，基于像素的绘制，Canvas 是一个整体元素，内部图形无法直接通过 DOM 操作，修改图形需手动清空画布并重新绘制所有内容。
- 性能
svg 当图形数量较少时性能良好（静态图表、图标）；矢量图形对内存占用较小；
canvas适合动态/大数据量，高性能绘制，适合实时渲染（游戏、数据可视化、动画），分辨率越高 内存占用越大。
- 缩放与清晰度
矢量图无限缩放不模糊；位图放大后会出现像素化，需通过 scale() 方法或适配分辨率优化
- 代码风格
svg声明式；canvas命令式
- 兼容性与工具
canvas兼容性更好(echarts, threejs); svg(D3.js)
问：https为什么比http安全？
答：（我选择性地没咋背计网面经，因为我觉得计网八股太恶心了...）因为https建立了TLS连接..
正解：
http明文传输，https通过 SSL/TLS 协议对数据进行加密(对称加密、非对称加密、混合加密)（非对称加密用于密钥交换，对称加密用于数据传输，混合加密结合两者 既安全又高效）;
http无法验证服务器身份，https使用数字证书,客户端可验证服务器身份，防止中间人攻击。
问：你会如何做图片的加载？
答： 可以使用懒加载。先创建一个img元素，然后在它的src加载好后再赋值(onload回调)；使用渐进式渲染，比如使用静态图片占位；考虑图片的大小 还可以分块传输（瞎扯的）
问（平淡地说）：你这不叫懒加载【后来自己搜了一下 我这叫预加载】
正解：
a.图片格式与压缩优化：使用合适的图片格式，使用自动化压缩工具 比如webpack的imagemin-webpack-plugin
b.响应式图片加载：
<img
srcset="image-320w.jpg 320w,
image-640w.jpg 640w,
image-1024w.jpg 1024w"
sizes="(max-width: 480px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="fallback.jpg"
alt="响应式图片示例"
/>
c.懒加载 (只加载可视区域的图片)：
getBoundingClientRect（ele.src = ele.dataset.original）、 Intersection Observer API
d.预加载 (提前加载需要的图片资源，加载完毕会缓存到本地，需要时可以立马显示)：
1.css方式
<div class="preload-pic"></div>
.preload-pic { background: url(xxx) no-repeat }
或
<link rel="preload（or prefetch）" href="hero-image.jpg" as="image">
2.js方式
const img = new Image()
img.src = ele.dataset.original
e.渐进式加载：模糊 ——> 清晰
f.占位策略：保持布局稳定
g.错误处理与降级方案：
<img
src="image.jpg"
onerror="this.src='fallback.jpg';this.onerror=null"
alt="图片加载失败"
>
（降级处理见下文webp的代码例子）
h.CDN加速与浏览器缓存，使用 HTTP/2 协议（多路复用）并行加载多个图片
问：png、jpg、jpeg等有什么区别？
答：（我答个锤子...今天是死磕canvas、图片是吧...真倒霉）
正解：
png 无损压缩，支持透明度
jpg/jpeg 有损压缩（通过丢弃人眼不敏感的细节减小文件体积），无透明度，适用于 商品图、用户上传的图片
webp 谷歌主推， 比png、jpg小，可用 < picture > 标签回退
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="WebP回退示例">
</picture>
总结上图：
问：开发移动端和网页端有什么区别
答：1.页面布局 2.性能
正解:（未知）
问：一个高访问量的网站，怎么做优化
答：缓存，预加载，懒加载，ssr，（沉默...） （之后想起来 用nginx做负载均衡 反向代理、Webworker、控制并发请求的相关方法...）
正解:（未知） 我觉得就是从前端性能优化的微观角度【防抖节流、减少重排重绘、事件委托、异步加载、react性能优化相关】和宏观角度【gzip压缩、静态资源缓存、浏览器请求资源缓存】两方面考虑
问：304状态码是什么
答：命中协商缓存。cach-control为no-cache 或者 max-age=0（硬背八股没理解的后果）
问：你确定是max-age=0？
正解：
http响应头中cache-control为max-age = 1000，意思是说在 1000 秒后该资源过期，如果未超过过期时间，浏览器会直接使用缓存结果，强制缓存生效
总结
有自身基础不扎实的原因，也有面试官略有些刁钻的成分
我恨八股（可我除了八股也没别的了呀哈哈哈哈哈哈）
补——对于问题2.
我今天忽然想起来，面试官还问了我canvas和svg的实现原理。
canvas：基于HTML5的getContext("2d")返回的一个上下文对象，操作画布上的像素
svg：基于XML，使用数学公式来描述图形，通过一系列指令来定义图形的形状、颜色等，支持多种坐标变换
补
笑死今天又想起来两个问题：
1.除了websocket还有那些服务端主动向客户端发送消息的主要技术方案？（除了长轮询其他的我感觉不是前端范畴内的了...）
2.js中字符和ascii码互转的方法：charCodeAt(index)、String.fromCharCode()
