前端进阶学习笔记

1. html标签

1. 搜索优化

• meta标签：提取关键信息

<meta content="关键字，关键字" name="keywords">

在实际工作中，推荐一些关键字工具来挑选，比如Google Trends、站长工具 

• link标签：减少重复

<link href="https://xx.com/a.html" rel="canonical">

 对于同一个页面会有多个网址，又或者存在某些重定向页面，比如https://xx.com/a.html、https://xx.com/deril?id="abcd"。​​​​​​ 可以采取合并网址的方式，比如使用站点地图，或者在http请求响应头部添加rel="canonical"

2. meta标签：自动刷新/跳转

• 可以实现ppt自动播放的功能。

<meta http-equiv="Refresh" content="5;URL=page2.html">
  5s后会自动跳转到page2的页面 

•  隔60s就刷新一下屏幕

<meta http-equiv="Refresh" content="60">

注意：

meta的刷新和跳转是不可取消的，对于刷新时间和需要手动取消的，推荐使用javascript定时器来实现。

如果只是实现页面的定时刷新或跳转，是建议使用meta标签的。（比如某些页面缺乏访问权限，在x秒后跳回首页的场景）

3. scrip标签：调整加载顺序提升渲染速度

 script的三个属性

async——立即请求文件，但不阻塞渲染引擎，文件加载完毕后阻塞渲染并立即执行文件内容。

defer——立即请求文件，但不阻塞渲染引擎，等到解析完html之后再执行文件内容。

html5标准的type属性，值为module——让浏览器按照es6标准将文件当作模块进行解析，默认阻塞效果通defer，也可以配合async在请求完成后立即执行。

4. link标签：通过预处理提升渲染速度 

dns-prefetch：当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名预先进行DNS解析并缓存。

5. 开放图标协议，OGP，Open Graph Protocal

OGP是FaceBook公司在2010年提出的，目的是通过增加文档信息来提升社交网站在被分享时的预览效果，只需要在一些分享页面中添加一些meta标签及属性，支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息，比如站点名称、网页作者、预览图片。

---

2.DOM元素