《优化》

狡辉两门

于 2022-11-01 22:00:00 发布

阅读量469

点赞数 2

分类专栏：前端面试题文章标签： javascript 原型模式前端开发语言 vue.js

本文链接：https://blog.csdn.net/qq_46262422/article/details/127500359

版权

前端面试题专栏收录该内容

30 篇文章 2 订阅

订阅专栏

优化

1. 性能优化

1.1 加载更快

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

1.1.1 图片压缩和文件压缩

减小文件的大小

1.1.2 雪碧图/精灵图

雪碧图/精灵图：多张图标合并在一张大图中
使用方法

1. 引入图片

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

1.1.3 ssr服务器端渲染

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文件的位置

css写head：

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

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

重新计算布局渲染网页

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H49XEMOq-1666613724073)(01_性能优化\image-20210622152231779.png)]$

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

js文件放在头部如图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zhVHxGp-1666613724075)(D:\秋招集训营\11_前端优化\01_性能优化\image-20210622152902203.png)]$

js文件放在body底部如图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yeoCJMNr-1666613724075)(D:\秋招集训营\11_前端优化\01_性能优化\image-20210622152958088.png)]$

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）函数：对于持续的事件触发，每达到固定时间间隔，执行事件处理函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SMKINbRz-1666613724076)(01_性能优化\image-20210622160456616.png)]$
防抖（Debounce）函数: 事件触发停止后开始计时，在固定时间内不再有事件触发，执行事件处理函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuAybZgS-1666613724076)(01_性能优化\image-20210622161004096.png)]$

2. html语义化

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

header

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

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

footer

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

nav

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

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

article

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

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

section

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

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

aside

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

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

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

3. seo优化

搜索引擎工作原理

在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
seo搜索引擎优化

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。
seo优化前端的方法：
1. 创建唯一且准确的网页标题 <title>
  
  <title> 标记可告诉用户和搜索引擎特定网页的主题是什么。它应放置在 HTML 文档的 <head> 元素中。我们应该为网站上的每个网页创建一个唯一标题，并且尽量避免与网页内容无关或使用默认或模糊的标题。如：
```

<title>前端搜索引擎优化的技巧</title>


<title>我的文档</title>
```
2. 使用 <meta> 元标签
  
  我们可以使用 <meta> 的 keywords 元数据来提炼网页重要关键字，以及 description 元数据准确总结网页内容，而避免在 description 元数据的内容中出现关键词的堆砌，描述过长，或“这是一个网页”这种没有实际性意义的描述等现象。正确示范如下：
```
<meta name='keywords' content='SEO,title,meta,语义化,alt'>
<meta name='description' content='介绍搜索引擎优化的技巧，如使用创建title标题、meta关键词和描述、语义化标签、img的alt属性等。'>
```
3. 使用语义化元素
  
  在合适的位置使用合适的元素表达合适的内容，让用户和“蜘蛛”能一目了然文档结构。例如使用 <h1> 可以让“蜘蛛”知道这是很重要的内容。然而，值得注意的是，例如在想要表达强调时，我们不应该滥用标题元素或者 <b> 、 <i> 这种没有实际意义的标签，换而可以使用 <em> 或 <strong> 来表示强调。此外， <h1> 的权重比 <h2> 的大，我们不应该为了增大权重而去滥用 <h1> ，一般来说 <h1> 用于正文的标题。
4. 利用 <img> 中的 alt 属性
  
  alt 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。
5. 设置rel='nofollow' 忽略跟踪
  
  如果某个 <a> 的链接不需要跟踪，那么添加 rel='nofollow' 即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的，为了集中网页权重并将权重分给其他必要的链接，为不必跟踪的链接添加这个属性就显得很必要了。
6. 尽量保证 HTML 的纯粹和高质量
  
  应尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 <img> 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富（合理插入图片说明）等，会被认为质量较高符合用户需求，从而提高 SEO 的排名。
7. 扁平化网站结构
  
  一般来说，一个网站的结构层次越少，越有利于“蜘蛛”的爬取。所以目录结构一般不多于 3 级，否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样，层级大于 3 就很影响用户体验了，“蜘蛛”就是模仿用户的心理。
8. 合理安排重要内容的位置
  
  应该将重要内容的 HTML 代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。并且，重要内容不应该由 JavaScript 或 iframe 输出，“蜘蛛”没有办法读取 JavaScript ，一般不会去读取 iframe 中的内容。
为什么要做SEO

提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。