跳到主要内容

平时是怎么做web优化的？

一、性能优化

  1. 加载优化

    • 减少 HTTP 请求：合并 CSS 和 JavaScript 文件、使用 CSS Sprites 技术减少图片请求数量。
    • 压缩文件：对 HTML、CSS、JavaScript 文件进行压缩，减小文件体积，加快传输速度。
    • 利用浏览器缓存：设置合理的缓存策略，让浏览器缓存静态资源，减少重复请求。
    • 异步加载：对于非关键的资源，可以采用异步加载的方式，不阻塞页面的渲染。
    • 优化图片：选择合适的图片格式（如 WebP），对图片进行压缩，使用懒加载技术，当图片进入可视区域时再加载。

  2. 渲染优化

    • 优化 CSS 和 JavaScript 的加载顺序：将 CSS 文件放在头部，JavaScript 文件放在底部，避免阻塞页面渲染。
    • 减少重排和重绘：避免频繁操作 DOM，使用类名切换代替直接修改样式，减少触发重排和重绘的次数。
    • 使用硬件加速：对于动画和复杂的图形，可以使用 CSS3 的 transform 和 opacity 属性开启硬件加速。
    • 优化首屏加载：优先加载首屏内容，延迟加载非关键内容，提高用户的初始体验。

二、代码优化

  1. HTML 优化

    • 语义化标签：使用语义化的 HTML 标签，提高代码的可读性和可维护性，也有利于搜索引擎优化。
    • 去除不必要的标签和属性：减少 HTML 文件的体积，提高加载速度。
    • 优化表格布局：避免使用表格进行页面布局，因为表格的渲染速度较慢。

  2. CSS 优化

    • 避免使用通配符选择器：通配符选择器会匹配页面上的所有元素，效率较低。
    • 避免使用!important：尽量通过合理的 CSS 优先级来控制样式，避免使用!important 强制覆盖样式。
    • 提取公共样式：将重复使用的样式提取出来，形成公共的 CSS 类或模块，提高代码的复用性。

  3. JavaScript 优化

    • 优化循环：避免在循环中进行复杂的操作，尽量减少循环的次数。
    • 减少 DOM 操作：DOM 操作是比较耗时的，尽量减少对 DOM 的直接操作，可以使用文档片段（DocumentFragment）进行批量操作。
    • 缓存变量和函数：对于频繁使用的变量和函数，可以进行缓存，提高访问速度。

三、网络优化

  1. 使用 CDN：利用内容分发网络（CDN），将静态资源分布到全球各地的服务器上，让用户从最近的服务器获取资源，提高访问速度。
  2. 减少 DNS 查询：减少页面中不同域名的数量，因为每个域名都需要进行 DNS 查询，这会增加页面的加载时间。
  3. 开启 HTTP/2：HTTP/2 支持多路复用、头部压缩等特性，可以提高页面的加载速度。

四、工具和技术

  1. 使用性能监测工具：如 Google PageSpeed Insights、Lighthouse 等工具，定期对网站进行性能检测，发现问题并及时优化。
  2. 采用前端框架和库：一些优秀的前端框架和库，如 Vue、React、Angular 等，都有自己的性能优化策略，可以提高开发效率和页面性能。
  3. 持续学习和关注新技术：前端技术不断发展，关注新的性能优化技术和方法，及时应用到项目中。

总之，web 优化是一个综合性的工作，需要从多个方面入手，不断地进行优化和改进，以提高用户体验和网站性能。

《HTML 语义化标签》​

HTML4 及早期版本中的语义化标签​

  • <a>：定义超链接。
  • <abbr>：定义缩写。
  • <acronym>（已废弃，用 <abbr> 替代）：定义首字母缩略词。
  • <address>：定义文档或文章作者/所有者的联系信息。
  • <bdo>：定义文本的方向。
  • <blockquote>：定义长篇引用。
  • <cite>：定义作品的标题。
  • <code>：定义计算机代码文本。
  • <dfn>：定义定义术语。
  • <em>：定义强调文本。
  • <h1> 至 <h6>：定义标题级别。
  • <i>：定义斜体文本。
  • <ins>：定义插入的文本。
  • <kbd>：定义键盘输入。
  • <ol>：定义有序列表。
  • <pre>：定义预格式化的文本。
  • <q>：定义短引用。
  • <samp>：定义示例计算机代码。
  • <strong>：定义重要文本。
  • <sub>：定义下标文本。
  • <sup>：定义上标文本。
  • <table>：定义表格。
  • <ul>：定义无序列表。
  • <var>：定义变量。

HTML5 新增的语义化标签​

  • <article>：定义独立的内容。
  • <aside>：定义与页面主要内容相关的辅助信息。
  • <details>：定义用户可以查看或隐藏的额外详情。
  • <dialog>：定义对话框或窗口。
  • <figcaption>：定义 <figure> 元素的标题。
  • <figure>：定义媒体内容，如图像、图表等。
  • <footer>：定义文档或节的脚部。
  • <header>：定义文档或节的头部。
  • <main>：定义文档的主要内容。
  • <mark>：定义应被高亮显示的文本。
  • <menu>：定义命令菜单。
  • <nav>：定义导航链接。
  • <progress>：定义任务进度。
  • <ruby>：定义注音或字符解释。
  • <rt>：定义 <ruby> 元素中的注音。
  • <rp>：定义不支持 <ruby> 元素的浏览器中显示的备用内容。
  • <section>：定义文档中的一个部分。
  • <summary>：定义 <details> 元素的可见标题。
  • <time>：定义日期或时间。
  • <wbr>：定义可能的换行位置。

这些标签通过其名称就能表达出所包含内容的含义，从而提高了代码的可读性和可维护性，同时也增强了网页的可访问性和 SEO 效果。