每日三问-前端（第二十八期）

先来回顾一下上期的问题及答案：

2023年6月21日

1. 解释一下浏览器的同源策略（Same-Origin Policy）是什么？它对前端开发有什么影响？

同源策略（Same-Origin Policy）是一种浏览器安全策略，它限制了不同源（协议、域名和端口）的页面之间的交互。按照同源策略，浏览器只允许在同一源下加载和执行资源，不同源的页面之间的脚本访问和通信会受到限制。这个策略的目的是保护用户的隐私和安全。

同源策略对前端开发有重要影响。它阻止了跨域请求和跨域资源的直接访问，限制了从不同源加载的资源（例如脚本、样式表和字体等）对当前页面的操作。这意味着前端开发人员需要注意跨域问题，并使用合适的解决方案（例如JSONP、CORS、代理等）来实现跨域请求和资源的安全加载。

解释一下前端路由和后端路由的区别，并说明前端路由的优势和适用场景。

前端路由和后端路由在处理请求和页面导航时有所不同。后端路由是指由服务器处理路由请求，并返回相应的页面或数据。它通常基于URL路径和请求方法（如GET、POST）来匹配并处理请求。

而前端路由是指在前端应用中处理路由请求和页面导航的一种机制。它通过监听浏览器的URL变化，并根据不同的URL匹配对应的组件或页面进行展示。前端路由使用JavaScript来处理路由逻辑，根据URL的变化加载不同的组件或页面，无需向服务器发送请求。

前端路由的优势在于无需重新加载整个页面，提供了更快的页面切换体验。它可以实现单页应用（SPA）的开发模式，用户在应用中进行导航时只加载必要的资源，减少了服务器的压力和网络延迟。

前端路由适用于需要快速、平滑的页面切换和动态内容加载的应用，如社交媒体、购物网站、管理系统等。

解释一下前端性能优化中的懒加载（Lazy Loading）和预加载（Preloading）的概念和用法。

懒加载（Lazy Loading）和预加载（Preloading）是前端性能优化中常用的两种策略。

懒加载是指在页面滚动或触发某些事件时，才加载特定的资源，而不是在页面加载时一次性加载所有资源。懒加载可以减少初始页面的加载时间，提升用户体验。常见的应用场景是图片懒加载，即在图片进入可视区域之前不进行加载，当用户滚动页面时再加载图片。

预加载是指在页面加载完成后，提前加载未来可能需要的资源。预加载可以通过 <link> 标签的 rel="preload" 属性来实现，或者通过 JavaScript 动态创建 <link> 标签。预

加载适用于提前加载下一个页面所需的资源，以加快页面切换的速度。

懒加载和预加载在一定程度上都可以减少初始页面的加载时间和带宽消耗。懒加载适用于大型网页或包含大量媒体资源的页面，可以减少初始加载的压力。预加载适用于需要快速切换页面或提前加载未来可能需要的资源的场景。

示例代码： 懒加载图片：

<img data-src="image.jpg" alt="Lazy-loaded Image">

<script>
  window.addEventListener('load', function() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(function(img) {
      if (img.getBoundingClientRect().top < window.innerHeight) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.removeAttribute('data-src');
      }
    });
  });
</script>

预加载资源：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">

在以上代码示例中，懒加载图片使用 data-src 属性存储图片地址，通过监听页面滚动事件，在图片进入可视区域前将 data-src 的值赋给 src 属性，实现图片的懒加载。

预加载资源通过 <link> 标签的 rel="preload" 属性将需要预加载的资源提前加载到浏览器缓存中，以便在后续页面导航时快速加载。

2023年6月22日

1. 解释一下什么是Symbol类型

2. 在 Vue.js 中，什么是 Vue Router？请解释 Vue Router 的作用和主要功能，并说明如何定义和使用路由。

3. 解释一下前端开发中的模块化概念，例如 CommonJS 和 ES6 模块化。请比较它们的区别和使用方式。

上面问题的答案会在第二天的公众号推文中公布，大家可以关注公众号：程序员每日三问，第一时间获得推送内容。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题（死磕自己，愉悦大家） 希望大家在这浮夸的程序员圈里保持冷静，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。