优化篇：前端需要注意哪些seo？

这是我参与8月更文挑战的第四天，活动详情查看：8月更文挑战

一、什么是事件代理

• 事件代理又叫事件委托，是JavaScript中常用的绑定事件的技巧。

'事件代理'即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听职务。 事件代理原理是DOM元素的冒泡事件，使用事件代理的好处是提高性能

• 可以节省内存的占用，减少事件注册
• 可以实现新增子对象时无需再次对其绑定

二、new操作符做了什么

• 创建一个空对象: 并且this变量引入该对象,同时还继承了函数的原型
• 设置原型链 空对象指向构造函数的原型对象
• 执行函数体 修改构造函数this指针指向空对象,并执行函数体
• 判断返回值 返回对象就用该对象,没有的话就创建一个对象

三、前端需要注意哪些seo

1. 合理使用

• 值强调重点即可，不要重复出现
• 概括页面高度，长度合适
• 列举重要关键字

2. 语义化HTML代码（占比很重要）

• 符合W3C规范，语义化代码可以让搜索引擎更容易理解网页

3. 重要内容的HTML代码放在前面

• 搜索引擎抓取顺序是从上到下，保证搜索引擎优先抓取

4. 重要内容不使用JS输出

• 爬虫不会执行JS去获取内容

5. 少用iframe

• 搜索引擎不会抓取iframe中的内容

6. 非装饰性图片必须加alt（可见题四）

7. 提高网站速度

• 网站速度也是搜索引擎排序的一个重要指标

四、<img>的title和alt区别

• alt是当图片无法显示的时候，对当前对象起描述作用（对SEO优化有一定帮助）
• title是图片标题，当鼠标移入停滞时展示描述信息

五、从浏览器地址栏输入url到显示页面的步骤

1. 要解析域名转换成对应的公网IP；

• 域名解析为Ip地址，依靠DNS服务，DNS服务将该域名解析为IP地址,如果这一级的DNS服务器上找不到，则会进步向上一级的DNS发去查询请求。直到根域名服务器为止。如果中间找到了对应的公网Ip，则再一级一级返回，如果找不到则返回错误信息，域名解析失败。

2. 根据公网IP通过庞大的互联网路由到对应的服务器上；

• 获取公网IP地址，就可以通过路由器找到对应的服务器所在。

3. 建立可靠的TCP数据连接；

• 这里使用的TCP协议在使用前需要首先在客户端和服务端之间，建立起一条数据链路。分为三步，也叫作TCP三次握手。

4. 服务器对该URL中的请求进行处理分发，返回一个html；

• 客户端根据URL携带的不同信息，对其进行分发和数据处理。通过对应的URL格式dispatch到不同的后台处理Java类中，进行数据处理后，再返回对应的HTML文件给客户端

5. 浏览器或者客户端对该HTML进行渲染；

• 网页多是动态HTML。里面包含了大量的JS代码。目前的浏览器为了尽快加载页面，普遍采用了一边解析一边加载的原则。

六、语义化的理解

• 去掉或者丢掉样式时，依然能够让页面呈现清晰的解构。
• 有利于SEO，和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效信息。
• 方便其他设备进行解析。
• 利于团队开发维护，语义化标签更具有可读性，都遵守这个标准，可以减少差异化。

七、Canvas和SVG有什么区别

Canvas

• 它是H5新出的标签
• Canvas画布，利用JavaScript在网页绘制图像（也因此无法被引擎抓取）
• 通过绘制工具。getContext("2d")在画布中绘制图形

SVG

• 它是可缩放矢量图形（Scalable Vector Graphics），基于可拓展标记语言XML，出来时间较旧
• 它用来定义用于网格的基于矢量的图形

二者的区别

• SVG 可以在H5中直接绘制，但绘制的是矢量图
• Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
• Canvas不支持事件处理器，SVG支持事件处理器

八、css sprite是什么有什么优缺点

• CSS Sprites是一种网页图片应用处理方式（雪碧图），就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
• 优点
  1. 减少网页的http请求，提高页面的加载速度
  2. 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和
  3. 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率
  4. 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
• 缺点
  1. 背景设置需要得到每一个背景单元的精确位置
  2. 维护合成图片麻烦，若页面背景少许变动，整个合成图片都要改
  3. 图片合并时，需要预留足够空间，图片不够宽容易出现背景断裂

九、什么是FOUC,如何避免

• FOUC (Flash of Unstyled Content)文档样式短暂失效
• 原因：
  1. 使用import方法导入样式表
  2. 样式表放在了页面底部
  3. 几个样式表放在了HTML结构的不同位置
• 解决方法：使用link标签将样式表放在文档head中

十、link与@import的区别

• 二者都是外部引用CSS，但是有一定的区别
  1. link除引用样式文件，还可以引用图片等资源文件（@import只可引用样式文件）
  2. link引用CSS时，在页面载入时同时加载（@import需要页面完全载入后才加载）
  3. link是HTML标签，无兼容性问题（@import是CSS2.1提出的，低版本浏览器不支持）
  4. link支持JavaScript操控DOM去改变样式（@import不支持）

十一、BFC规范的理解

• 称之为块级格式化上下文
• 形成BFC的条件
  1. float：给元素添加浮动（left，right）
  2. position：给元添加定位（absolute，fixed）
  3. display：给元素添加display（inline-block，table-cells，table-captions）
  4. overflow：给元素添加overflow（hidden，auto，scroll）