前置知识

图片预加载

图片预加载是指在用户访问网页时，提前加载一些图片资源，以便在用户需要查看这些图片时能够更快地显示

原理：

1. 提前请求：在页面加载时，浏览器会发送请求获取图片资源。预加载通常使用 JavaScript 或 HTML 标签（如 `<link rel="preload">`）来指示浏览器提前加载这些图片
2. 缓存机制：预加载的图片会被存储在浏览器的缓存中，当用户滚动或导航到需要显示这些图片的部分时，浏览器可以直接从缓存中获取，减少加载时间
3. 提升用户体验：通过减少因加载图片而造成的延迟，预加载提升了用户体验，特别是在图像密集型的网站上

<link rel="preload" as="image" href="image.jpg">

const img = new Image();
img.src = 'image.jpg';

图片懒加载

图片懒加载是一种优化网页性能的技术，只有在用户滚动到图片所在位置时才加载这些图片，从而减少初始加载时间和带宽消耗

原理：

1. 占位符：在页面加载时，使用占位符（如低质量图像或空白空间）替代真实图片，避免在页面初始加载时请求所有图片
2. 监听滚动事件：通过监听用户的滚动事件，判断图片是否在可视区域内
3. 动态加载：当用户滚动到图片的可视区域时，动态加载真实图片，替换占位符
4. 浏览器支持：现代浏览器支持 `loading="lazy"` 属性，可以直接在 `<img>` 标签中使用，简化实现

方法一：

使用loading属性实现

 <img src="image.jpg" loading="lazy" alt="Description">

方法二：

使用js自定义实现

<img data-src="image1.jpg" alt="Image 1" class="lazy">
<img data-src="image2.jpg" alt="Image 2" class="lazy">
<img data-src="image3.jpg" alt="Image 3" class="lazy">

const images = document.querySelectorAll('img.lazy');
const options = {root: null,rootMargin: '0px',threshold: 0.1
};
const loadImage = (image) => {image.src = image.dataset.src;image.classList.remove('lazy');
};
const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {loadImage(entry.target);observer.unobserve(entry.target);}});
}, options);
images.forEach(image => {observer.observe(image);
});

服务端渲染

服务端渲染（Server-Side Rendering, SSR）是指在服务器上生成 HTML 内容，并将其发送到客户端浏览器进行展示的过程。在 SSR 中，当用户请求一个页面时，服务器会处理请求并生成完整的 HTML 页面，而不是仅发送 JavaScript 文件。
优点：

• SEO 友好：搜索引擎能够更好地抓取页面内容。
• 首屏加载快：用户可以更快看到页面内容，提升用户体验。
• 社交分享：分享链接时，能够展示完整的预览。

缺点：

• 服务器负担重：所有的渲染工作在服务器上进行，可能导致性能瓶颈。
• 交互性延迟：页面渲染后，可能需要额外的时间来加载 JavaScript 实现交互功能。

css优化

css加载时不会阻塞DOM的解析

• 使用CSS Sprites（雪碧图），将多个图像合并为一张，减少HTTP请求
• 使用预处理器，如Sass或Less
• 避免内联样式，提高缓存效率
• 利用css继承，减少代码量

js优化

js加载时会阻塞DOM的解析

• js脚本置底；因为浏览器有并发机制，所以把js放到底部，减少占用的并发数，使页面能够更快的渲染出来
• 异步加载；使用async或defer属性异步加载脚本，避免阻塞页面渲染
• 减少DOM操作；批量处理DOM更新，减少重排和重绘
• 使用事件委托；通过将事件监听器绑定到父元素，减少事件处理器数量
• 避免全局变量；使用模块化或闭包，减少全局作用域污染
• 优化循环和算法；提高算法效率，避免不必要的循环和计算

加载优化

• 压缩合并文件；使用工具压缩文件，合并多个文件，减少请求数量
• 使用CDN；将静态资源托管在内容分发网络（CDN）上，提高加载速度
• 懒加载；对图片和一些其他资源使用懒加载，只有在需要时才加载，减少初始加载时间
• 优化图片；使用适当格式，调整分辨率和质量，减少图片大小
• 缓存策略；利用浏览器缓存等，减少重复加载
• 异步加载；使用async或defer属性加载js，避免阻塞页面渲染
• 减少重定向；降低请求时间
• 优化CSS渲染；将关键css内联，减少外部请求，提升首屏加载速度
• 预加载：使用<link rel="preload"> 和 <link rel="prefetch">，提前加载资源

图片优化

• 使用适当格式，如webp格式，调整分辨率和质量，减少图片大小
• 使用懒加载
• 小图使用雪碧图、iconFont
• 压缩图片
• 使用img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省带宽，提高加载速度

渲染优化

• 减少DOM操作，批量更新DOM，尽量减少重绘和重排
• 使用虚拟DOM，减少真实DOM的操作
• 减少重绘和重排，避免频繁改变元素的样式、布局和尺寸
• 动画元素使用absolute定位，脱离文档流，使用transform、opacity、translate3d(0, 0, 0)
• 动画尽量使用requestAnimationFrame，不要用定时器

首屏优化

• 减少资源请求，把文件合并压缩
• 优先加载关键资源，使用<link rel="preload">
• 延迟加载非关键资源，使用懒加载技术
• 将静态资源托管在CDN上，减少加载时间
• 使用async和defer异步加载javascript，避免阻塞渲染
• 通过服务端渲染页面（SSR），提升首屏加载速度
• 设置合适的缓存策略，减少后续加载时间

打包优化

• 代码分割，使用splitChunks进行代码分割，按需加载模块
• Tree Shaking，确保使用ES6模块语法，去除未使用的代码
• 压缩和混淆，使用TerserPlugin压缩JavaScript，optimize-css-assets-webpack-plugin压缩CSS
• 使用生产环境模式，在Webpack配置中设置mode为production，启用内置优化
• 尽量减少依赖，检查和移除不必要的依赖，减小打包体积

vue优化

• 路由懒加载，使用import动态导入组件，减少初始加载体积
• 使用异步组件，按需加载
• 根据需要选择使用v-if和v-show，优化DOM操作
• 对大型组件进行懒加载，降低初始渲染时间
• v-for中使用key优化列表渲染，提高渲染性能
• 对频繁触发的事件（如滚动、输入）使用防抖或节流
• 尽量避免不必要的watch，使用computed代替
• 使用vuex进行状态管理，避免不必要的组件重渲染
• 确保使用生产环境构建，启用优化
• 合理使用生命周期钩子

SEO优化

SEO优化（Search Engine Optimization）是指通过一系列技术和策略，提高网站在搜索引擎结果页面（SERP）中的排名，从而增加网站的可见性和流量

主要包括以下几个方面：

• 关键词优化：识别和选择用户搜索的相关关键词
• 页面优化：优化网页内容、标题、描述和URL结构，使其更符合搜索引擎的标准
• 技术优化：改善网站的加载速度、友好性、安全性

可以通过以下方式进行优化：

• 使用语义化HTML，使用适当的标签（如<header>、<article>、<footer>）增强可读性和可索引性
• 设置合适的meta标签，添加适当的标题、描述和关键字meta标签，提升搜索引擎友好性