作者：Yuri

发布日期：2024-04-04 清明

全文字数：1000

阅读时长：5min

Yuri 阅读

人民日报

中企在阿联酋引入无人驾驶集装箱卡车——中阿合作提高码头数智化水平：在繁忙的中远海运港口阿布扎比码头，伴随着“嘀、嘀”的提示音，多台桥吊正同时装卸着货物。一辆白色车头的卡车拖着集装箱匀速驶来——与众不同的是，车头没有其他卡车常见的挡风玻璃，车内也没有司机，只有一块条形显示屏显示着行驶状态。

技术刊

文章阅读时长：

前端与后端系统设计

在传统的软件工程师系统设计面试中，应聘者会被要求描述分布式系统的架构，通常涉及 Web 服务器、负载均衡器、缓存、数据库、微服务、任务队列等。对于前端工程师来说，系统设计面试略有不同，与后端相比，面试更注重客户端以及客户端与服务器之间的 API 设计。

方面	后端	前端
收集需求	需要	需要
架构/高级设计	分布式云服务	应用/组件
事后估算	需要	不需要
系统组成	云服务（例如负载平衡器、应用服务器、数据库、文件存储、缓存、消息队列、CDN）	应用模块（模型、视图、控制器）
数据模型	SQL Schema	应用状态
组件之间的 API 类型	网络（任何协议）	网络（HTTP、WebSocket）、JavaScript 函数
关注领域	可扩展性、可靠性和可用性	性能、用户体验、可访问性、国际化
不太重要（可作为黑盒处理）	客户端	服务端

RADIO 框架

在前端系统设计面试中，您被要求设计的系统往往是产品，因此我们从这里开始将系统称为 "产品"。首先了解 Requirements（需求），定义高层 Architecture（架构）和 Data Model（数据模型）。然后定义产品组件之间的Interfaces（接口），并讨论任何 Optimizations or dive deep（优化或深入）到需要特别关注的特定领域。

Yuri 学习

🔗：Intersection Observer API 学习

阅读时长：10min

运用场景：图片懒加载、加载更多

// 实现图片懒加载
const ob = new IntersectionObserver((entries) => {
  for(const entry of entries){
    if(entry.isIntersecting){
      const img = entry.target;
      img.src = img.dataset.src;
      ob.unobserve(img)
    }
  }
}, {
  // root: null,
  // rootMargin: 0,
  threshold: 0,
});

const imgs = document.querySelectorAll('img[data-src]');
imgs.forEach((img) => {
  ob.observe(img);
})

Yuri 思考

Q：为什么选择做这件事（创建 Yuri Diary）？

我的 140 字观点：初衷是帮助更多的人，这是我想了好久才想出来的，于是我打算一直这么做。我现在的这种方式是借助平台和工具的力量分享出我内心想法，这样就会与更多的人产生交互，但是不排除是打扰。祝福每一个人都能意识到自己独立意识的魅力。

感兴趣的同学欢迎分享观点

工具推荐

Alfred 5
价值：Option + Space 就能快速唤出🔍，还支持 Snippets、Clipboard History、soon
GreatFrontEnd
价值：slogan：The great way to prepare for front end interviews

招聘广告

🔗：当贝网络·DB-前端开发工程师(J10436) 15-25K

Base：杭州
公司规模： 500-999
HC：2（高级）
BU：海外站点（Need：SSR，nextjs）
面试流程：技术一面 + 总监二面 + HRBP

需要内推请加我微信联系或者邮箱联系

交流方式

邮箱📮：itstaryuri@gmail.com

微信号：yuri0090

Yuri 日记-[2024-04-04]：前端面试？“GoodFrontEnd”，了解一下~