前端优化

优化

1. 性能优化

1.1 加载更快

  • 让传输的数据包更小（压缩文件/图片）
  • 减少网络请求的次数
  • 减少渲染的次数
  • 提前渲染

1.1.1 图片压缩和文件压缩

  • 减小文件的大小

1.1.2 雪碧图/精灵图

  • 雪碧图/精灵图：多张图标合并在一张大图中

  • 使用方法

    ? 1. 引入图片

    ? 2. 通过背景定位具体图标

  • 优化的方式

    • 减少加载网页图片时服务器的请求次数

      可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数， 降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

1.1.3 ssr服务器端渲染

  1. CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，

? js文件运行在浏览器上面，服务端只返回一个html模板。

? 2. SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，

? 浏览器直接显示服务端返回的html就可以了。

  • 优化方式

? 减少网络传输：响应快，用户体验好，首屏渲染快

? 对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO.

1.1.4 缓存

  • http缓存：不需要通过服务器传输数据，直接从http缓存中获取

    • 协商缓存
    • 强制缓存

  • 本地缓存：

    • localstorage：把一般不需要变动的大型数据存储在localstorage中，打开页面判断localstorage中是否有该数据，有就直接从浏览器中获取

  • 优化方式：

    • 减少网络传输的次数

1.2 渲染更快

1.2.1 css和js文件的位置

  1. css写head：

? css放在body标签尾部时, DOMTree构建完成之后便开始构建RenderTree, 并计算布局渲染网页,

? 等加载解析完css之后, 开始构建CSSOMTree, 并和DOMTree重新构建RenderTree,

? 重新计算布局渲染网页

? css放在head标签中时, 先加载css, 之后解析css构建CSSOMTree, 于此同时构建DOMTree,

? CSSOMTree和DOMTree都构建完毕之后开始构建RenderTree, 计算布局渲染网页

   2. js写底部
             1. JavaScript时会阻止其他内容的下载，要等到JS文件下载解析完之后才会显示网页内容。若JS文件很大放在前面就会导致加载时间较长，网页会一直白屏
             2.  因为JS一般会涉及到一些DOM操作，所以要等全部的dom元素都加载完再加载JS。

js文件放在头部如图：

js文件放在body底部如图：

1.2.2 懒加载

  • 方法：默认进入页面只展示首屏能够展示的内容，当滚动条拉动到页面底部继续拉动再进行数据加载和渲染
  • 优化方法：
    • 减少不必要的数据传输和渲染
    • 使页面渲染更快

1.2.3 对dom查询进行缓存

  • 每次查询dom元素都需要遍历，将查询结果缓存起来

    // 不缓存DOM查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
// 每次循环，都会计算length，频繁进行DOM查询
}

    // 缓存DOM查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i++) {
// 缓存length，只进行一次DOM查询
}

  • 优化方式：减少相同运算的运算次数

1.2.4 将dom操作合并

  • 多次dom操作合并成一次

  • 优化方式：减少dom渲染的次数

    // 未合并
const listNode = document.getElementById('list')
// 执行插入
for (let i = 0; i < 10; i++) {
  const li = document.createElement('li')
  li.innerHTML = 'list item ' + i
  // 创建一个插入一个
  listNode.appendChild(frag)
}

    // 合并
const listNode = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()
// 执行插入
for (let i = 0; i < 10; i++) {
const li = document.createElement('li')
li.innerHTML = 'list item ' + i
frag.appendChild(li)
}
// 都完成之后，再插入到DOM树中
listNode.appendChild(frag)

1.2.5 节流和防抖

  • 节流（Throttle）函数： 对于持续的事件触发，每达到固定时间间隔，执行事件处理函数

  • 防抖（Debounce）函数: 事件触发停止后开始计时，在固定时间内不再有事件触发，执行事件处理函数

2. html语义化

  • HTML 语义化的核心是反对大篇幅的使用无语义化的 div + css + span，而鼓励使用 HTML 定义好的语义化标签。那么我们应该关心的就是标签的语义以及应该是用的场景。
  • 使用语义化标签的优势：让页面具有良好的语义和结构，从而方便人类和机器都能快速理解网页内容，在无css样式的情况下也展示出页面良好的结构，有利于seo

header 代表网页或 section 的页眉，通常需要包含 h1~h6 或者 hgroup。

（tip：虽然 w3c 规范中认为 header 在一个页面中可以存在一个或者多个，但是通常要头部结构信息较为复杂，包含多个导航和菜单的内容，才适合使用 header 进行包裹。）

footer 代表网页或 section 的页脚。通常包含一些基本信息，如：作者、相关文档链接、版权资料等。

代表页面的导航链接区域。

（tip：规范中认为 nav 只适用于页面主要导航部分。）

article

代表一个在网页中自成一体的内容，其目的是为了方便开发者独立开发或重。通常需要包含一个 header/h1~h6 和一个 footer。

（tip：如果在 article 内部再嵌套 article，那就代表内嵌的 article 是与它外部的内容有关联的，比如文章下面的评论。）

section

代表文档中的“节”或“段”。通常需要包含 h1~h6。

（tip：虽然 html5 中会对 section 的标题自动降级，但建议手动对其进行降级。）

aside

代表一块独立的内容区域。通常使用分为两种情况：

  • 在 article 中：作为主要内容的附属内容
  • 在 article 外：最典型的应用是侧边栏

到这里，相信已经将 HTML 语义化大致讲清楚了。我们接下来聊聊 CSS 语义化

3. seo优化

前端知识整理

相关

标签

一品网 冀ICP备14022925号-6