项目中的实际问题
狐七 3/23/2022 render
# 1. 埋点请求怎么做？
查看答案
# 好处
- 没有跨域问题，代码需要用比较通用的，不适合使用ajax
- 出错不会阻塞页面加载，影响用户的体验
- 只要 new Image 对象就好了，排除 JS/CSS 文件资源方式上报
- 经常会用 1x1 像素的透明GIF图片，因为在比较 PNG/JPG中，GIF体积最小
# 2. 渐进增强和优雅降级之间的区别
查看答案
# 渐进增强（progressive enhancement）
主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
# 优雅降级 (graceful degradation)
一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
# 两者区别
- 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
- 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。
# 3. 如何实现浏览器内多个标签页之间的通信?
查看答案
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
通信方法如下：
- websocket协议：因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
- ShareWorker：shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。
- localStorage：我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。
- postMessage：如果我们能够获得对应标签页的引用，就可以使用postMessage方法，进行通信。
# 4. 网络中使用最多的图片格式有哪些?
查看答案
JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小。
在 ps 以 jpeg 格式存储时，可以提供 11 级压缩级别。