阿里 天猫超市 前端一面

1.问一堆开放性问题

2.问一些实际生产中遇到的问题，

比如前端性能优化方式、多次提交、表单填写过程中遇到突发事件， 在用户填写表单或者进行多次提交的过程中，可能会遇到各种突发事件，如网络中断、浏览器崩溃、电脑死机等。为了提高用户体验和数据安全性，可以采取以下措施来应对突发事件：

1. 自动保存草稿：

   • 在用户填写表单时，定期自动保存用户填写的数据为草稿。
   • 可以利用浏览器的本地存储（如localStorage）或者后端数据库存储用户填写的数据，以防止数据丢失。

2. 增量保存：

   • 在用户填写表单时，可以实时将用户填写的数据发送到后端进行增量保存。
   • 每次填写的数据发生变化时，立即发送到服务器进行保存，以防止数据丢失或者重复填写。

3. 断点续传：

   • 对于上传文件或者提交大量数据的表单，可以实现断点续传功能，使得用户可以在提交过程中中断并恢复提交。
   • 可以通过前端实现断点续传，将上传文件分块并逐步上传，或者通过后端实现上传进度保存和恢复功能。

4. 异常处理：

   • 在发生突发事件时，及时捕获并处理异常，给用户友好的提示信息，并提供相应的操作选项。
   • 可以通过全局异常捕获、try-catch语句等方式来捕获异常并进行处理。

5. 数据验证：

   • 对用户填写的数据进行实时验证，确保数据的完整性和正确性。
   • 在提交前进行数据验证，防止用户填写错误或者不完整的数据提交到服务器。

通过以上措施，可以有效地应对突发事件，保障用户填写数据的安全性和完整性，并提高用户体验。同时，还可以增加用户对网站的信任度，提升用户满意度。 然后填写的东西都没了、 如何获取千百万用户首页加载时间、、等等，

获取千百万用户首页加载时间可以通过以下几种方式：

1. 实时监控工具：

   • 使用实时监控工具（如Google Analytics、New Relic、Sentry等）来收集和分析用户的页面加载时间数据。
   • 这些工具可以提供实时的页面加载时间统计信息，包括平均加载时间、百分位加载时间等指标。

2. 自定义监控系统：

   • 搭建自定义的监控系统，通过在网站代码中埋点或者使用浏览器提供的API收集页面加载时间数据。
   • 可以使用JavaScript性能API（如Performance API）来获取页面加载时间等性能数据，并将数据发送到服务器进行分析和存储。

3. 日志分析：

   • 分析服务器日志或者应用日志，统计用户的访问和页面加载时间数据。
   • 可以通过日志文件中的时间戳信息计算页面加载时间，然后进行统计和分析。

4. 用户调查和反馈：

   • 发送用户调查问卷或者收集用户反馈，了解用户对页面加载时间的感知和评价。
   • 可以通过问卷调查或者用户反馈收集用户体验数据，包括页面加载时间、页面加载速度等方面的评价。

5. A/B测试：

   • 进行A/B测试，比较不同页面加载优化策略对用户体验的影响。
   • 可以将用户随机分为不同组，分别应用不同的页面加载优化策略，并比较不同组的页面加载时间和用户满意度等指标。

无论采用哪种方式，都需要注意用户隐私和数据安全，并且根据实际情况选择合适的方法来收集和分析页面加载时间数据，以优化用户体验和提升网站性能。

3.项目相关，是自己封装组件还是调用等等

4.问基本八股，箭头函数、原型链、闭包、基本数据类型等等，从一个问题延申到更多问题，比如构造函数、垃圾回收等等

面了1.5h

人要炸了

我晕了

电话面

没录音成功

懒加载加载时机

懒加载（Lazy Loading）是一种优化技术，用于在页面加载时延迟加载页面中的某些内容，以提高页面加载速度和性能。懒加载的加载时机通常取决于具体的内容和需求，以下是一些常见的懒加载加载时机：

1. 滚动到可视区域：

   • 最常见的懒加载加载时机是当页面中的某个元素滚动进入用户可视区域时进行加载。
   • 当用户滚动页面，某个元素进入浏览器视口时，触发懒加载操作，加载元素的内容。

2. 滚动到特定位置：

   • 可以指定一个特定位置或者元素作为懒加载的触发点，当页面滚动到该位置或者元素时进行加载。
   • 例如，可以指定页面底部或者某个特定的DIV元素作为懒加载触发点。

3. 延迟加载：

   • 在页面加载完成后，等待一段时间后再开始加载懒加载内容。
   • 通过设置setTimeout函数或者使用IntersectionObserver API等方式实现延迟加载。

4. 事件触发：

   • 当用户执行某个特定的操作或者触发某个事件时进行懒加载。
   • 例如，当用户点击某个按钮、切换选项卡、展开折叠内容等操作时进行加载。

5. 横向滚动时机：

   • 在横向滚动页面时，当某个元素进入水平滚动区域时进行加载。
   • 适用于横向滚动的页面，如横向滚动的图片轮播等。

6. 条件触发：

   • 根据特定的条件进行触发，例如网络条件、设备类型、用户权限等。
   • 可以根据用户设备类型选择性加载高分辨率或低分辨率图片，或者根据网络条件选择性加载资源。

在实际开发中，懒加载的加载时机需要根据具体的业务需求和用户体验进行合理的选择和调整，以提高页面性能和用户体验。

作者：钱多多哦耶
链接：www.nowcoder.com/discuss/484…
来源：牛客网

阿里前端实习一面

1.淘宝token是怎么处理的

淘宝 Token 是指用于身份验证和访问控制的令牌。在淘宝平台上，Token 通常是通过 OAuth 认证协议生成和处理的。OAuth 是一种开放标准，用于授权第三方应用访问用户数据，而不需要将用户的用户名和密码提供给第三方应用。

在淘宝平台上，Token 通常用于实现用户授权、身份验证和 API 访问等功能。具体来说，Token 的处理流程通常如下：

1. 用户授权：

   • 用户在第三方应用中发起登录请求，第三方应用将用户重定向到淘宝平台的授权页面。
   • 用户在授权页面登录并同意授权，淘宝平台生成一个授权码（Authorization Code）并返回给第三方应用。

2. 获取 Access Token：

   • 第三方应用使用授权码向淘宝平台的 Token 接口发送请求，同时提供应用的 App Key、App Secret 和授权码等参数。
   • 淘宝平台验证授权码和应用信息的有效性后，生成并返回一个 Access Token 给第三方应用。

3. 使用 Access Token：

   • 第三方应用在调用淘宝平台的 API 时，将 Access Token 放在请求头或者请求参数中，用于身份验证和访问控制。
   • 淘宝平台接收到请求后，验证 Access Token 的有效性，并根据 Token 所关联的用户身份和权限来执行相应的操作。

4. Token 更新和刷新：

   • Access Token 通常有一定的有效期限制，过期后需要重新获取。
   • 第三方应用可以通过 OAuth 协议中的刷新令牌（Refresh Token）机制来获取新的 Access Token，而不需要用户重新授权。

总的来说，淘宝 Token 的处理过程是通过 OAuth 认证协议实现的，包括用户授权、获取 Access Token、使用 Access Token 和 Token 的更新和刷新等步骤。通过 Token，第三方应用可以安全地访问淘宝平台的用户数据和 API 接口。

2.Settimeout误差问题

在使用 setTimeout 函数时，可能会遇到误差问题，主要是因为 JavaScript 是单线程执行的语言，而 setTimeout 是基于事件队列的异步执行机制。

主要的误差问题包括：

1. 定时器精度不高：setTimeout 的执行时间并不是精确的，而是在指定的延迟时间之后，将回调函数添加到事件队列中等待执行。因此，实际执行时间可能会受到其他代码执行时间和系统性能等因素的影响。

2. 延迟时间不准确：setTimeout 指定的延迟时间并不是准确的等待时间，而是最小的等待时间。在大部分情况下，setTimeout 回调函数将会在指定的延迟时间之后执行，但并不能保证绝对的准确性。

3. 定时器积累误差：如果在 setTimeout 回调函数中执行了耗时较长的操作，或者多次调用了 setTimeout 函数，可能会导致定时器的累积误差。即使每次延迟时间相同，但由于前一个任务尚未完成，后续任务的执行可能会延迟。

为了减少 setTimeout 的误差，可以采取以下措施：

• 避免依赖精确的定时器：在需要精确时间控制的场景下，尽量避免依赖 setTimeout 或 setInterval，考虑使用其他技术实现，如 Web Workers、requestAnimationFrame 等。

• 避免多个定时器嵌套：尽量避免在定时器回调函数中嵌套调用 setTimeout，以减少定时器积累误差。

• 使用性能优化：尽量减少在定时器回调函数中执行耗时较长的操作，以提高代码执行效率。

• 注意浏览器性能和负载：定时器的执行受到浏览器的性能和负载影响，可以通过监控浏览器的性能参数来评估定时器的准确性。

3.cookie除了身份信息还用来存什么

除了存储用户的身份信息外，Cookie 还可以用来存储其他类型的数据，包括但不限于：

1. 会话状态：可以使用 Cookie 存储会话状态信息，以便在用户访问同一网站的不同页面时保持会话状态的一致性，例如用户的浏览历史、购物车信息等。

2. 偏好设置：可以使用 Cookie 存储用户的偏好设置，例如语言偏好、主题偏好、字体大小偏好等，以便在用户下次访问网站时提供个性化的体验。

3. 广告跟踪：广告商和网站可能会使用 Cookie 存储用户的广告偏好和行为数据，以便提供更加精准的广告投放和广告跟踪功能。

4. 网站性能优化：可以使用 Cookie 存储用户的访问频率、页面加载时间、浏览器类型等信息，以便进行网站性能优化和用户行为分析。

5. 安全控制：可以使用 Cookie 存储安全相关的信息，例如用户的登录状态、访问权限等，以便进行安全控制和身份验证。

6. 统计分析：可以使用 Cookie 存储用户的访问统计信息，例如访问次数、页面浏览量、页面停留时间等，以便进行网站流量分析和用户行为分析。

总的来说，Cookie 是一种在客户端存储数据的简单而有效的方式，可以用来存储各种类型的数据，帮助网站实现个性化服务、用户行为分析、广告跟踪等功能。但是需要注意的是，由于 Cookie 存储在客户端，因此可能存在安全风险，需要谨慎处理敏感信息。

4.代理服务器为什么能跨域

代理服务器能够实现跨域请求的主要原因是因为跨域请求是发生在客户端浏览器上的，而代理服务器是在服务端进行的中间转发。具体来说，代理服务器可以通过以下方式实现跨域请求：

1. 同源策略绕过：

   • 浏览器实施同源策略（Same-Origin Policy），限制了跨域请求。但是代理服务器是在服务器端进行请求转发的，请求由服务器发起而不是客户端浏览器，因此不受同源策略的限制。

2. 服务器间通信：

   • 当客户端浏览器需要跨域请求某个资源时，可以通过代理服务器向目标服务器发起请求。
   • 代理服务器接收到客户端请求后，再向目标服务器发起请求，并将目标服务器返回的数据返回给客户端浏览器。

3. 修改请求头：

   • 代理服务器可以修改请求头，将客户端浏览器发送的跨域请求转换为目标服务器能够接受的请求。
   • 例如，可以通过在请求头中添加 Access-Control-Allow-Origin 字段来允许跨域请求。

4. 隐藏客户端IP：

   • 代理服务器可以隐藏客户端的真实IP地址，将请求发送到目标服务器，并将目标服务器返回的数据返回给客户端。
   • 这样可以保护客户端的隐私和安全，同时也可以绕过一些安全限制。

总的来说，代理服务器能够实现跨域请求是因为它在服务端进行请求转发，不受浏览器同源策略的限制，并且可以修改请求头、隐藏客户端IP等方式来实现跨域请求。但是需要注意的是，使用代理服务器进行跨域请求也可能存在一些安全风险，需要谨慎使用。

5.父盒子1000px,左子盒子flex:1,右子盒子flex:1,再给左子盒子设置宽度100px，最后效果？为什么？

在这种情况下，父盒子宽度为 1000px，左右子盒子的 flex 属性都设置为 1，表示它们会均匀地分配父盒子剩余的空间。然后给左子盒子设置了固定宽度为 100px。

由于左子盒子的宽度被设置为 100px，而右子盒子的 flex 属性为 1，意味着右子盒子会占据父盒子剩余的空间。因此，右子盒子会占据 1000px - 100px = 900px 的宽度。

所以最终效果是，左子盒子的宽度固定为 100px，右子盒子的宽度为 900px。

6.flex-basis一般什么时候用，实现效果

flex-basis 属性用于指定 Flexbox 元素的初始主轴尺寸（在 flex-direction 属性指定的主轴方向上）。它决定了 Flex 元素在容器中的初始大小。

通常情况下，flex-basis 属性在以下情况下使用：

1. 指定 Flex 元素的初始大小：

   • 当 Flex 元素需要在初始状态下具有特定的大小时，可以使用 flex-basis 属性来指定其初始大小。

2. 与 flex-grow 和 flex-shrink 属性一起使用：

   • flex-basis 通常与 flex-grow 和 flex-shrink 属性一起使用，以确定 Flex 元素在容器中的最终大小。flex-basis 用于确定 Flex 元素在没有剩余空间分配时的初始大小，flex-grow 和 flex-shrink 用于确定 Flex 元素在剩余空间或者空间不足时的变化规则。

3. 响应式布局：

   • 在响应式布局中，flex-basis 属性可以用来根据不同的屏幕尺寸或者布局需求，调整 Flex 元素的初始大小，以实现页面的响应式效果。

4. 等宽布局：

   • 当需要实现 Flex 元素等宽布局时，可以使用 flex-basis 属性来指定所有 Flex 元素的初始大小相同。

实现效果：

• 使用 flex-basis 属性可以确保 Flex 元素在容器中具有初始的尺寸，从而使得布局更加稳定和可控。
• 结合 flex-grow 和 flex-shrink 属性，可以灵活地控制 Flex 元素的大小变化规则，适应不同的布局需求和屏幕尺寸。

7.gird适用于什么情景

Grid 布局适用于各种情景，特别是在需要实现复杂的网格结构和响应式布局时，Grid 布局能够提供更加灵活和强大的布局方式。以下是一些适合使用 Grid 布局的情景：

1. 复杂的网格结构：

   • 当需要实现复杂的网格结构，例如多列、多行、嵌套网格等，Grid 布局能够提供更加灵活和简洁的布局方式，同时可以实现更加复杂的布局需求。

2. 响应式布局：

   • Grid 布局支持响应式设计，可以根据不同的屏幕尺寸和设备类型，自适应调整网格布局，使得页面在不同设备上都能够呈现良好的布局效果。

3. 等高布局：

   • 当需要实现等高的布局效果，使得多个元素的高度保持一致时，Grid 布局能够很方便地实现等高布局，而不需要依赖于额外的样式技巧。

4. 自适应布局：

   • Grid 布局可以实现自适应的布局效果，使得页面元素能够根据容器的大小自动调整位置和大小，适应不同的屏幕尺寸和分辨率。

5. 项目管理工具：

   • 在项目管理工具中，例如任务列表、日程安排等，Grid 布局能够提供更加清晰和直观的布局方式，使得项目信息能够清晰地呈现在页面上。

6. 电子商务网站：

   • 在电子商务网站中，Grid 布局能够很好地实现商品展示、分类筛选、购物车结算等功能，使得用户能够更加方便地浏览和购买商品。

总的来说，Grid 布局适用于各种需要实现复杂、灵活、响应式和自适应布局的情景，能够帮助开发者更加方便地实现各种布局需求，并提高页面的可读性和用户体验。

8.hash router为什么不发送#️⃣后面的url？

在使用 hash 路由时，URL 中的 # 符号及其后面的内容称为 hash。在 Web 应用中，hash 通常被用来标识页面内的位置或者是前端路由的路径。

在传统的 Web 应用中，hash 的变化不会触发页面的刷新，因为 hash 变化只会影响浏览器的滚动位置，而不会引起页面的重新加载。因此，当使用 hash 路由时，浏览器不会将 # 后面的内容发送到服务器，而只会将 # 前面的内容发送到服务器，用来请求相应的页面。

这种行为的原因有两点：

1. 浏览器行为规范：根据浏览器行为规范，当发生 hash 变化时，浏览器不会向服务器发送请求，而只会在本地进行页面的跳转和渲染。

2. 历史原因：在过去的 Web 开发中，hash 通常被用来标识页面内的锚点位置，而不是用来表示前端路由路径。因此，浏览器默认不会将 hash 后面的内容发送到服务器。

基于以上两点原因，使用 hash 路由时，浏览器不会发送 # 后面的内容到服务器，而只会将 # 前面的内容发送到服务器，用来请求相应的页面。

9.后端是怎么处理两种router的
其他不记得了……基本无八股，被拷打的体无完肤

作者：offer全都来来来
链接：www.nowcoder.com/feed/main/d…
来源：牛客网