前端开发深入了解性能优化

前置知识

图片预加载

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

原理：

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

html 复制代码

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

javascript 复制代码

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

图片懒加载

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

原理：

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

方法一：

使用loading属性实现

html 复制代码

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

方法二：

使用js自定义实现

html 复制代码

<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">

javascript 复制代码

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标签，提升搜索引擎友好性