⎛深圳SEO优化⎞如何提升品牌关键词的竞争力？
网站SEO关键词优化，除了优化网站基本结构、链接结构、内容和程序代码外，关键词的布局也是重中之重。 但是，当网站布局关键词不是根据个人喜好随意排列的时候，就具有一定的定位技巧。
一、页面标题中必须包含关键字并且必须在页面meta属性的meta标签的“关键字”部分进行相应的关键字布局。 这里的关键词要么是目标关键词的主关键词，要么是品牌关键词。 建议您安排合理的关键字，包括“描述”部分。 那么，从具体的角度来看，关键词应该放在哪里，品牌关键词应该如何分布？ 关键词优化布局技巧：首先一般品牌词做seo比较好，因为你的品牌词竞争基本为零，但是如果公司比较有名，注意是否有人抢 做品牌词。 同时，品牌关键词只需要出现在官网首页的meta和首页底部、提示文字、新闻标题、面包屑等，这个操作可以增加品牌词在首页的密度 主页。 但是在数量上，请注意不要填满首页，5-10个就可以了。 二、是关键词的放置：1、在正文的正文部分，将关键词放在尽可能靠前的位置，第一句必须放置关键词。 由于首页是网站权重最大的页面，也是整个网站的摘要页面，所以把主要关键词放在这里最为合适。 2、URL布局中对应的关键词和站内外的链接文字也应该与关键词相结合。 3、在网页的H1和H2标签和图片标签的ALT属性中合理安排相应的关键词。 4、栏目标题可以采用“展开关键词——品牌词”的形式。 栏目页的权重仅次于首页，每一栏都是拓展关键词的有力工具。 5、除了主要关键词，还有长尾关键词。 长尾关键词适用于内容页面。 这个页面需要有有价值和丰富的内容。 最适合长尾关键词的布局，但是要记住，内容页的长尾关键词必须是与本栏目相关的长尾词，栏目不能更新。细品原生JS从初级到高级知识点汇总（四）
作者：火狼1
转发链接：https://juejin.im/post/5daeefc8e51d4524f007fb15
细品原生JS从初级到高级知识点汇总（四）本篇
小编建议小伙们从第一篇开始，按照顺序来看，更清晰明了。
冒泡排序，选择排序，插入排序，此处不做赘述.
特点：第三项等于前面两项之和
特点：通过全局规划,将大问题分割成小问题来取最优解 案例：最少硬币找零 美国有以下面额(硬币）：d1=1, d2=5, d3=10, d4=25 如果要找36美分的零钱，我们可以用1个25美分、1个10美分和1个便士（ 1美分)
特点：通过最优解来解决问题 用贪心算法来解决2.3中的案例
}
var minCoinChange = new MinCoinChange([1, 5, 10, 25]); console.log(minCoinChange.makeChange(36)); console.log(minCoinChange.makeChange(34)); console.log(minCoinChange.makeChange(6));
设计模式如果应用到项目中，可以实现代码的复用和解耦，提高代码质量。 本文主要介绍14种设计模式 写UI组件,封装框架必备
1.定义：又叫静态工厂方法，就是创建对象，并赋予属性和方法 2.应用：抽取类相同的属性和方法封装到对象上 3.代码：
1.定义：对产品类的抽象使其创建业务主要负责用于创建多类产品的实例 2.应用:创建实例 3.代码:
1.定义:设置函数的原型属性 2.应用:实现继承 3.代码:
1.定义:只允许被实例化依次的类 2.应用:提供一个命名空间 3.代码:
1.定义:为子系统中的一组接口提供一个一致的界面 2.应用:简化复杂接口 3.代码: 外观模式
1.定义:将一个接口转换成客户端需要的接口而不需要去修改客户端代码，使得不兼容的代码可以一起工作 2.应用:适配函数参数 3.代码: 适配器模式
1.定义:不改变原对象的基础上,给对象添加属性或方法 2.代码
1.定义:将抽象部分与它的实现部分分离，使它们都可以独立地变化 2.代码 桥接模式
1.定义:定义一个模板,供以后传不同参数调用 2.代码: 模块方法模式
1.作用:解决类与对象,对象与对象之间的耦合 2.代码:
1.定义:一个对象状态改变会导致行为变化 2.作用:解决复杂的if判断 3.代码 状态模式
1.定义:定义了一系列家族算法，并对每一种算法单独封装起来，让算法之间可以相互替换，独立于使用算法的客户 2.代码 策略模式
1.定义:通过继承封装一些该数据类型不具备的属性, 2.作用:让对象具备数组的操作方法 3.代码: 访问者模式
1.定义:设置一个中间层,处理对象之间的交互 2.代码: 中介者模式
HTTP 是一个连接客户端，网关和服务器的一个协议。
支持客户/服务器模式：可以连接客户端和服务端； 简单快速：请求只需传送请求方法，路径和请求主体； 灵活：传输数据类型灵活； 无连接：请求结束立即断开； 无状态：无法记住上一次请求。
无状态：HTTP 协议本身无法解决这个状态，只有通过 cookie 和 session 将状态做贮存，常见的场景是登录状态保持；
无连接：可以通过自身属性 Keep-Alive。
HTTP(S) 请求地址 → DNS 解析 → 三次握手 → 发送请求 → 四次挥手
三次握手过程图片来源 CSDN）
在这里插入图片描述
只允许客户端发送 GET 这一种请求； 且不支持请求头，协议只支持纯文本； 无状态性，每个访问独立处理，完成断开； 无状态码。
有身份认证，三次握手； 请求与响应支持头域； 请求头内容；
属性名 含义 Accept 可接受的 MIME 类型 Accept-Encoding 数据可解码的格式 Accept-Language 可接受语言 Connection 值 keep-alive 是长连接 Host 主机和端口 Pragma 是否缓存,指定 no-cache 返回刷新 Referer 页面路由 If-Modified-Since 值为时间
响应头内容；
属性名 含义 Connection 值 keep-alive 是长连接 Content-Type 返回文档类型,常见的值有 text/plain,text/html,text/json Date 消息发送的时间 Server 服务器名字 Last-Modified 值为时间,s 返回的最后修改时间 Expires 缓存过期时间,b 和 s 时间做对比
注意
expires 是响应头内容，返回一个固定的时间,缺陷是时间到了服务器要重新设置; 请求头中如果有 If-Modified-Since，服务器会将时间与 last-modified 对比，相同返回 304; 响应对象以一个响应状态行开始; 响应对象不只限于超文本; 支持 GET、HEAD、POST 方法; 有状态码; 支持长连接（但默认还是使用短连接）、缓存机制以及身份认证。
请求头增加 Cache-Control
属性名 含义 Cache-Control 在1.1 引入的方法,指定请求和响应遵循的缓存机制,值有:public(b 和 s 都缓存),private(b 缓存),no-cache(不缓存),no-store(不缓存),max-age(缓存时间,s 为单位),min-fresh(最小更新时间),max-age=3600 If-None-Match 上次请求响应头返回的 etag 值响应头增加 Cache-Control，表示所有的缓存机制是否可以缓存及哪种类型 etag 返回的哈希值,第二次请求头携带去和服务器值对比
注意
Cache-Control 的 max-age 返回是缓存的相对时间 Cache-Control 优先级比 expires 高 缺点：不能第一时间拿到最新修改文件
采用二进制格式传输; 多路复用，其实就是将请求数据分成帧乱序发送到 TCP 中。TCP 只能有一个 steam，所以还是会阻塞; 报头压缩; 服务器推送主动向 B 端发送静态资源，避免往返延迟。
1.是基于 QUIC 协议，基于 UDP 2.特点: 自定义连接机制：TCP 以 IP/端口标识,变化重新连接握手，UDP 是一 64 位 ID 标识，是无连接； 自定义重传机制：TCP 使用序号和应答传输，QUIC 是使用递增序号传输； 无阻塞的多路复用：同一条 QUIC 可以创建多个 steam。
1.https 是在 http 协议的基础上加了个 SSL； 2.主要包括：握手(凭证交换和验证)和记录协议(数据进行加密)。
1.按协议分：协议层缓存和非 http 协议缓存： 1.1协议层缓存：利用 http 协议头属性值设置； 1.2非协议层缓存：利用 meta 标签的 http-equiv 属性值 Expires,set-cookie。
2.按缓存分：强缓存和协商缓存： 2.1强缓存：利用 cache-control 和 expires 设置，直接返回一个过期时间，所以在缓存期间不请求，If-modify-since； 2.2协商缓存：响应头返回 etag 或 last-modified 的哈希值，第二次请求头 If-none-match 或 IF-modify-since 携带上次哈希值，一致则返回 304。
3.协商缓存对比： etag 优先级高于 last-modified； 4.etag 精度高，last-modified 精度是 s，1s 内 etag 修改多少次都会被记录； last-modified 性能好，etag 要得到 hash 值。
5.浏览器读取缓存流程： 会先判断强缓存；再判断协商缓存 etag(last-modified)是否存在； 存在利用属性 If-None-match(If-Modified-since)携带值； 请求服务器,服务器对比 etag(last-modified)，生效返回 304。
F5 刷新会忽略强缓存不会忽略协商缓存，ctrl+f5 都失效
序列 详情 1XX(通知) 2XX(成功) 200(成功)、201(服务器创建)、202(服务器接收未处理)、203(非授权信息)、204(未返回内容)、205(重置内容)、206(部分内容) 3XX(重定向) 301(永久移动)、302(临时移动)、303(查看其他位置)、304(未修改)、305(使用代理)、307(临时重定向) 4XX(客户端错误) 400(错误请求)、401(未授权)、403(禁止)、404(未找到)、405(方法禁用)、406(不接受)、407（需要代理授权） 5XX(服务器错误) 500(服务器异常)、501（尚未实施）、502（错误网关）、503（服务不可用）、504（网关超时）、505（HTTP 版本不受支持）
协议
版本 内容 http0.9 只允许客户端发送 GET 这一种请求;且不支持请求头,协议只支持纯文本;无状态性,每个访问独立处理,完成断开;无状态码 http1.0 解决 0.9 的缺点,增加 If-modify-since(last-modify)和 expires 缓存属性 http1.x 增加 cache-control 和 If-none-match(etag)缓存属性 http2.0 采用二进制格式传输;多路复用;报头压缩;服务器推送 http3.0 采用 QUIC 协议,自定义连接机制;自定义重传机制;无阻塞的多路复用
缓存
类型 特性 强缓存 通过 If-modify-since(last-modify)、expires 和 cache-control 设置，属性值是时间，所以在时间内不用请求 协商缓存 通过 If-none-match(etag)设置，etag 属性是哈希值，所以要请求和服务器值对比
这只是 JS 原生从初级到高级的梳理; 整理码字不易,欢迎点赞+关注!
本篇已完结
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者：火狼1
转发链接：https://juejin.im/post/5daeefc8e51d4524f007fb15
你真的熟悉 HTML 标签吗？
本文主要讲解那些“看不见”的 HTML 标签。
提到 HTML 标签，前端工程师会非常熟悉，因为在开发页面时经常使用。但往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文。
其实还有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部 head 标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们就可以达到事半功倍的效果。
这一课时就和你来聊聊那些“看不见”的 HTML 标签及其使用场景。
交互实现
我经常会向我的团队成员提倡一个编码原则：Less code, less bug。
在实现一个功能的时候，我们编写的代码越多，不仅开发成本越高，而且代码的健壮性也越差。
它和 KISS（Keep it simple, stupid）原则及奥卡姆剃刀原则（如无必要，勿增实体）有相同的意思，都是提倡编码简约。
下面介绍几个标签，来看看如何帮助我们更简单地实现一些页面交互效果。
meta 标签：自动刷新/跳转
假设要实现一个类似 PPT 自动播放的效果，你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。但其实有更加简洁的实现方法，比如通过 meta 标签来实现：
上面的代码会在 5s 之后自动跳转到同域下的 page2.html 页面。我们要实现 PPT 自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。
另一种场景，比如每隔一分钟就需要刷新页面的大屏幕监控，也可以通过 meta 标签来实现，只需去掉后面的 URL 即可：
细心的你可能会好奇，既然这样做又方便又快捷，为什么这种用法比较少见呢？
一方面是因为不少前端工程师对 meta 标签用法缺乏深入了解，另一方面也是因为在使用它的时候，刷新和跳转操作是不可取消的，所以对刷新时间间隔或者需要手动取消的，还是推荐使用 JavaScript 定时器来实现。但是，如果你只是想实现页面的定时刷新或跳转（比如某些页面缺乏访问权限，在 x 秒后跳回首页这样的场景）建议你可以实践下 meta 标签的用法。
title 标签与 Hack 手段：消息提醒
作为前端工程师的你对 B/S 架构肯定不陌生，它有很多的优点，比如版本更新方便、跨平台、跨终端，但在处理某些场景，比如即时通信场景时，就会变得比较麻烦。
因为前后端通信深度依赖 HTTP 协议，而 HTTP 协议采用“请求-响应”模式，这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息（HTML5 下可使用 WebSocket 协议）。
消息提醒功能实现则比较困难，HTML5 标准发布之前，浏览器没有开放图标闪烁、弹出系统消息之类的接口，只能借助一些 Hack 的手段，比如修改 title 标签来达到类似的效果（HTML5 下可使用 Web Notifications API 弹出系统消息）。
下面这段代码中，通过定时修改 title 标签内容，模拟了类似消息提醒的闪烁效果：
通过模拟消息闪烁，可以让用户在浏览其他页面的时候，及时得知服务端返回的消息。
定时修改 title 标签内容，除了用来实现闪烁效果之外，还可以制作其他动画效果，比如文字滚动，但需要注意浏览器会对 title 标签文本进行去空格操作。
动态修改 title 标签的用途不仅在于消息提醒，你还可以将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。
性能优化
性能优化是前端开发中避不开的问题，性能问题无外乎两方面原因：渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案，但其实只要通过合理地使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。
script 标签：调整加载顺序提升渲染速度
由于浏览器的底层运行机制，渲染引擎在解析 HTML 时，若遇到 script 标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至 JavaScript 引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。
在这一过程中可以看到，页面渲染过程中包含了请求文件以及执行文件的时间，但页面的首次渲染可能并不依赖这些文件，这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。
为了减少这些时间损耗，可以借助 script 标签的 3 个属性来实现。
async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
defer 属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
HTML5 标准 type 属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。
具体效果可以参看下图：
其中，绿色的线表示执行解析 HTML ，蓝色的线表示请求文件，红色的线表示执行文件。
从图中可以得知，采用 3 种属性都能减少请求文件引起的阻塞时间，只有 defer 属性以及 type="module" 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗的时间，让用户更快地看见页面（即使这些页面内容可能并没有完全地显示）。
除此之外还应当注意，当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染。所以这也就是为什么构建工具会把编译好的引用 JavaScript 代码的 script 标签放入到 body 标签底部，因为当渲染引擎执行到 body 底部时会先将已解析的内容渲染出来，然后再去请求相应的 JavaScript 文件。如果是内联脚本（即不通过 src 属性引用外部脚本文件直接在 HTML 编写 JavaScript 代码的形式），渲染引擎则不会渲染。
link 标签：通过预处理提升渲染速度
在我们对大型单页应用进行性能优化时，也许会用到按需要加载的方式，来加载对应的模块，但如果能合理利用 link 标签的 rel 属性值来进行预加载，就能进一步提升渲染速度。
dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程，从而减少时间损耗。下图是淘宝网设置的 DNS 预解析。
preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。
prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。
这几个属性值恰好反映了浏览器获取资源文件的过程，在这里我绘制了一个流程简图，方便你记忆。
浏览器获取资源文件的流程
搜索优化
你所写的前端代码，除了要让浏览器更好执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用 meta 标签和 link 标签，恰好能让搜索引擎更好地理解和收录我们的页面。
meta 标签：提取关键信息
通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。
例如，在百度中搜索“拉勾”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。
为了让搜索引擎更好地识别页面，除了描述信息之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。
当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息，虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样，这就是因为拉勾网页面中设置了这个关键字。
对应代码如下：
在实际工作中，推荐使用一些关键字工具来挑选，比如 Google Trends、站长工具。下图是我使用站长工具搜索“招聘”关键字得到的结果，可以看到得到了相当关键的一些信息，比如全网搜索指数、关键词特点。
link 标签：减少重复
有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：
这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。
当然，要合并网址还有其他的方式，比如使用站点地图，或者在 HTTP 请求响应头部添加 rel="canonical"。这里，我就不展开介绍了，道理都是相通的，你平时可以多探索和实践。
延伸内容：OGP（开放图表协议）
好了，前面我们说了 HTML5 标准的一些标签和属性，下面再延伸说一说基于 meta 标签扩展属性值实现的第三方协议——OGP（Open Graph Protocal，开放图表协议 ）。
OGP 是 Facebook 公司在 2010 年提出的，目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些 meta 标签及属性，支持 OGP 协议的社交网站就会在解析页面时生成丰富的预览信息，比如站点名称、网页作者、预览图片。具体预览效果会因各个网站而有所变化。
下面是微信文章支持 OGP 协议的代码，可以看到通过 meta 标签属性值声明了：网址、预览图片、描述信息、站点名称、网页类型和作者信息。
现在百度已经宣布支持，微信文章的不少页面上也添加了相关标签属性，有兴趣的话你可以查看官方网站：https://ogp.me/
总结
本文，从交互实现、性能优化、搜索优化场景出发，分别讲解了 meta 标签、title 标签、link 标签，以及 script 标签在这些场景中的重要作用，希望这些内容你都能有效地应用到工作场景中，不再只是了解，而是能够熟练运用。
最后留下一道思考题：说一说你还知道哪些“看不见”的标签及用法？
态度
