前置知识
图片预加载
图片预加载是指在用户访问网页时，提前加载一些图片资源，以便在用户需要查看这些图片时能够更快地显示
原理：
- 提前请求：在页面加载时，浏览器会发送请求获取图片资源。预加载通常使用 JavaScript 或 HTML 标签（如 `<link rel="preload">`）来指示浏览器提前加载这些图片
- 缓存机制：预加载的图片会被存储在浏览器的缓存中，当用户滚动或导航到需要显示这些图片的部分时，浏览器可以直接从缓存中获取，减少加载时间
- 提升用户体验：通过减少因加载图片而造成的延迟，预加载提升了用户体验，特别是在图像密集型的网站上
<link rel="preload" as="image" href="image.jpg">
const img = new Image();
img.src = 'image.jpg';
图片懒加载
图片懒加载是一种优化网页性能的技术，只有在用户滚动到图片所在位置时才加载这些图片，从而减少初始加载时间和带宽消耗
原理：
- 占位符：在页面加载时，使用占位符（如低质量图像或空白空间）替代真实图片，避免在页面初始加载时请求所有图片
- 监听滚动事件：通过监听用户的滚动事件，判断图片是否在可视区域内
- 动态加载：当用户滚动到图片的可视区域时，动态加载真实图片，替换占位符
- 浏览器支持：现代浏览器支持 `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标签，提升搜索引擎友好性
