利用html解决seo优化

1.<meta name="title" content="html 对 SEO 的优化">/不推荐用这个/
<meta name="keywords" content="SEO,爬虫，搜索引擎、百度、html 优化">
<meta name="description" content="通过 html 标签及属性的使用提高网站被爬虫 爬取的几率，使用户百度时网站尽量排在前面，提高用户的点击率">

2.添加 robots.txt ，搭建网站与搜索引擎对话的桥梁

3.使用语义化标签比如 header、footer、content、section，js、css 使用外部文件。

浏览器标准模式和怪异模式之间的区别是什么?

在怪异模式下，盒模型为 IE 盒模型
怪异盒模型：width：content.width + padding + border
标准盒模型：width：content.width

<script>标签中 defer 和 async 属性的区别

async: 与后续元素渲染异步执行，乱序执行，只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。
defer: defer 是有序执行的,与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行

async 和 defer 异步加载，async 下载完立即执行，defer 待界面文档解析完成之后执行

html5 语 义化标签

1 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
2 有利于 SEO 和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息.
3 方便其它设备解析。
4 便于团队开发和维护，语义化根据可读性

Cookies，sessionStorage 和 localStorage 的区别?

存储位置不同:
cookies 是为了标识用户身份而存储在用户本地终端上的数据，始终在 同源 http 请求中携带，即 cookies 在浏览器和服务器间来回传递，
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同:
cookie 保存的数据很小，不能超过 4k，
sessionStorage 和 localStorage 保存的数据大，可达到 5M
数据的有效期不同:
cookie 在设置的 cookie 过期时间之前一直有效，即使窗口或者 浏览器关闭。
sessionStorage 仅在浏览器窗口关闭之前有效。
localStorage 始终有效， 窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同:
cookie 在所有的同源窗口都是共享;
sessionStorage 不在不同的浏览器 共享，即使同一页面;
localStorage 在所有同源窗口都是共享。

实现不使用 border 画出 1px 高的线

<div style="height:1px;overflow:hidden;background:red"></div>

介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎和 JS 引擎。
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件(一种浏览器扩展)显示其他类型数据，例使用 PDF 阅读器插件，可以显示 PDF 格式。
JS 引擎:解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见浏览器所用内核

IE：Trident
safari和chrome：webkit
Firefox：Gecko

浏览器的渲染原理?

(1)首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
(2)然后对 CSS 进行解析，生成 CSSOM 规则树。
(3)根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象， 渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
(4)当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
(5)布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容。

渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 js，那么它会暂停文档的解析，将控制权移交给 js 引擎， 等 js 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。
也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，可以给 script 标签添加 defer 或者 async属性。

defer 和 async区别

defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：用于异步下载脚本文件，下载完毕立即解释执行代码。
同：
defer和async的脚本下载都是异步进行的；
只适用于外联脚本；
异：
1，defer要在页面解析完成后执行脚本，
如有多个声明defer的脚本，则会按顺序下载和执行，
defer脚本会在DOMContentLoaded和load事件之前执行。

2，async是下载完脚本立刻执行脚本，会影响脚本的解析，
如有多个声明了async的脚本，下载和执行也是异步的，不能确保彼此的先后顺序；
async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序 。

什么是文档的预解析?(浏览器解析过程)

Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。
需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

CSS 如何阻塞文档解析?(浏览器解析过程)

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们。

然而， 存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。

如果浏览器尚未完成 CSSOM 的下载和构建，想在此运行脚本，那浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。

在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript。

渲染页面时常见哪些不良现象?

主要是 css 加载时间过长，或者 css 被放在了文档底部。
FOUC:主要指的是样式闪烁的问题，由于浏览器渲染机制，在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。

1 CSS 部分放在尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏;
2 把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析， 从而页面迟迟未渲染出来，出现白屏问题
白屏:有些浏览器渲染机制要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染

如何优化关键渲染路径?(浏览器渲染过程)

我们需要最大限度减小以下三种可变因素:
(1)关键资源的数量。
(2)关键路径长度。
(3)关键字节的数量。
优化关键渲染路径的常规步骤如下:
(1)最大限度减少关键资源的数量:删除它们，延迟它们的下载，将它们标记为异步
(2)对关键路径进行分析和特性描述:资源数、字节数、长度。
(3)优化关键字节数以缩短下载时间(往返次数)。
(4)优化其余关键资源的加载顺序:您需要尽早下载所有关键资产，以缩短关键路径长度。

什么是重绘和回流?(浏览器绘制过程）

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。
回流:当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流属性和方法:
任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发回流。
(1)添加或者删除可见的 DOM 元素;
(2)元素尺寸改变——边距、填充、边框、宽度和高度
(3)内容变化，比如用户在 input 框中输入文字
(4)浏览器窗口尺寸改变——resize 事件发生时
(5)当你修改网页的默认字体时。

回流必定会发生重绘，重绘不一定会引发回流。

回流所需的成本比重绘高的多，改变父点里的子节点很可能会导致父节点的一系列回流。

如何减少回流?(浏览器绘制过程)

(1)使用 transform 替代 top
(2)不要把节点的属性值放在一个循环里当成循环里的变量
(3)不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
(4)把 DOM 离线后修改。如:使用 documentFragment 对象在内存里操作 DOM
(5)不要一条一条地修改 DOM 的样式。预先定义好 css 的 class，然后修改 DOM的className。

为什么操作 DOM 慢?(浏览器绘制过程)

可能会引起页面的回流和重绘，从而引起性能上的消耗。

DOMContentLoaded 事件和 Load 事件的区别?

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发， 而无需等待样式表、图像和子框架的加载完成。
Load 事件是当所有资源加载完成后触发的。

简述一下你对 HTML 语义化的理解?

相关知识点:
(1) 用正确的标签做正确的事情。
(2) html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
(3) 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
(4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO ;
(5) 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

前端需要注意哪些 SEO ?

(1)合理的 title、description、keywords:
搜索对着三项的权重逐个减小，
title 值强调重点即可，重要关键词出现不要超过 2 次，要靠前，不同页面要不同;
description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面要不同
keywords 列举出重要关键词即可。
(2)语义化的 HTML 代码，让搜索引擎容易理解网页。
(3)重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
(4)重要内容不要用 js 输出:爬虫不会执行 js 获取内容
(5)少用 iframe:搜索引擎不会抓取 iframe 中的内容
(6)非装饰性图片必须加 alt
(7)提高网站速度:网站速度是搜索引擎排序的一个重要指标

HTML5 的离线储存怎么使用，工作原理能不能解释一下?

在用户没连网时，可以正常访问站点或应用
在用户连网时，更新用户机器上的缓存文件。
原理:HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)， 通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用:

(1)创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。
<html lang="en" manifest="index.manifest">
(2)在如下 cache.manifest 文件的编写离线存储的资源。 
CACHE MANIFEST
#v0.11
CACHE:
js/app.js 
css/style.css 
NETWORK: 
resourse/logo.png 
FALLBACK:
/ /offline.html

如何更新缓存:
(1)更新 manifest 文件
(2)通过 javascript 操作
(3)清除浏览器缓存

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件
如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

请描述一下 cookies，sessionStorage 和 localStorage 的区别?

存储大小:
cookie 数据大小不能超过 4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间:
cookie:过期时间之前一直有效，即使窗口或浏览器关闭。
localStorage:浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage 数据在页面会话结束时会被清除。
页面会话在浏览器打开期间一直保持， 并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。

作用域:
cookie 在所有同源窗口中都是共享的。
sessionStorage 只在同源的同窗口(或标签页)中共享数据，也就是只在当前会话中共享。
localStorage 在所有同源窗口中都是共享的。
同源： 协议，主机，端口相同。
所有同源窗口：在当前浏览器再用当前url打开一个新的，localstorag有值，sesion没有。

iframe 有那些缺点?

主要缺点有
(1) iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态 设置 iframe 的 src 可以避免这种阻塞情况。
(2) 搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。
(3) iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
(4) 浏览器的后退按钮失效。
(5) 小型的移动设备无法完全显示框架。

如何实现浏览器内多个标签页之间的通信?

1可以调用 localStorage、cookies 等本地存储方式，localStorge 另一个浏览上下文里被 添加、修改或删除时，它都会触发一个 storage 事件，我们通过监听 storage 事件，控制它的值来进行页面信息通信;
2如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标 签页通信的
3 使用 WebSocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。

浏览器架构

* 用户界面 
  * 主进程
  * 内核
      * 渲染引擎
      * JS 引擎
          * 执行栈
      * 事件触发线程 
          * 消息队列
               * 微任务 
               * 宏任务
          * 网络异步线程
          * 定时器线程

css reset 和 normalize.css 有什么区别?

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置，而尽力让这些样式保持一致并尽可能与现代标准相符合。相对与 css reset，normalize.css 的方法保留了有价值的默认值，并且修复了一些浏览器的 bug，而且使用 normalize.css 不会造成元素复杂的继承链。

disabled 和 readonly 的区别?

disabled 指当 input 元素加载时禁用此元素。对所有表单元素都有效，input 内容不会随着表单提交
readonly 规定输入字段为只读。只针对input，textarea，input 内容会随着表单提交。
无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value

alt和title

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。

title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。鼠标悬浮就可以出来。