HTML知识点汇总(四)

最新推荐文章于 2024-09-23 17:12:42 发布

xiaoLiang o

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量80

点赞数

分类专栏： HTML 文章标签： html 数据库前端

本文链接：https://blog.csdn.net/qq_42445025/article/details/131462109

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

1. SEO是什么？原理是什么？如何实现SEO优化

1.SEO是什么？

SEO（Search Engine Optimization），汉译为搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

2. 原理

搜索引擎排名大致上可以分为四个步骤。

爬行和抓取

搜索引擎派出一个能够在网上发现新网页并抓取文件的程序，这个程序通常被称为蜘蛛或机器人。
搜索引擎蜘蛛从数据库中已知的网页开始出发，就像正常用户的浏览器一样访问这些网页并抓取文件。
并且搜索引擎蜘蛛会跟踪网页上的链接，访问更多网页，这个过程就叫爬行。
当通过链接发现有新的网址时，蜘蛛将把新网址记录入数据库等待抓取。
跟踪网页链接是搜索引擎蜘蛛发现新网址的最基本方法，所以反向链接成为搜索引擎优化的最基本因素之一。
搜索引擎蜘蛛抓取的页面文件与用户浏览器得到的完全一样，抓取的文件存入数据库。

索引

搜索引擎索引程序把蜘蛛抓取的网页文件分解、分析，并以巨大表格的形式存入数据库，这个过程就是索引。在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。
搜索引擎索引数据库存储巨量数据，主流搜索引擎通常都存有几十亿级别的网页。

搜索词处理

用户在搜索引擎界面输入关键词，单击“搜索”按钮后，搜索引擎程序即对输入的搜索词进行处理，如中文特有的分词处理，对关键词词序的分别，去除停止词，判断是否需要启动整合搜索，判断是否有拼写错误或错别字等情况。搜索词的处理必须十分快速。

排序

对搜索词进行处理后，搜索引擎排序程序开始工作，从索引数据库中找出所有包含搜索词的网页，并且根据排名计算法计算出哪些网页应该排在前面，然后按一定格式返回“搜索”页面。
排序过程虽然在一两秒之内就完成返回用户所要的搜索结果，实际上这是一个非常复杂的过程。排名算法需要实时从索引数据库中找出所有相关页面，实时计算相关性，加入过滤算法，其复杂程度是外人无法想象的。搜索引擎是当今规模最大、最复杂的计算系统之一。
但是即使最好的搜素引擎在鉴别网页上也还无法与人相比，这就是为什么网站需要搜索引擎优化。没有 SEO 的帮助，搜索引擎常常并不能正确返回最相关、最权威、最有用的信息。

3.优化

SEO主要分为内部和外部两个方向。

1、内部优化

META 标签优化：例如：TITLE，KEYWORDS，DESCRIPTION （TDK）等的优化
内部链接的优化，包括相关性链接（Tag 标签），锚文本链接，各导航链接，及图片链接
网站内容更新：每天保持站内的更新(主要是文章的更新等)
服务器端渲染（SSR）
2、外部优化
外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性
外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名

2. js和css是如何影响DOM树构建的？

CSS不会阻塞DOM的解析，但是会影响JAVAScript的运行，javaSscript会阻止DOM树的解析，最终css（CSSOM）会影响DOM树的渲染，也可以说最终会影响渲染树的生成。

JavaScript脚本在html页面中
当解析到script脚本标签时，HTML解析器暂停工作，javascript引擎介入，并执行script标签中的这段脚本。
因为这段javascript脚本修改了DOM中第一个div中的内容，所以执行这段脚本之后，div节点内容已经修改为time.geekbang了。脚本执行完成之后，HTML解析器回复解析过程，继续解析后续的内容，直至生成最终的DOM。
html页面中引入javaScript文件
执行到JAVAScript标签时，暂停整个DOM的解析，执行javascript代码，不过这里执行javascript时，需要现在在这段代码。这里需要重点关注下载环境，因为javascript文件的下载过程会阻塞DOM解析，而通常下载又是非常耗时的，会受到网络环境、javascript文件大小等因素的影响。

优化机制：

谷歌浏览器做了很多优化，其中一个主要的优化就是预解析操作。当渲染引擎收到字节流之后，会开启一个预解析线程，用来分析HTML文件中包含的JavaScript、CSS等相关文件，解析到相关文件之后，会开启一个预解析线程，用来分析HTML文件中包含的javascprit、css等相关文件、解析到相关文件之后，预解析线程会提前下载这些文件。

再回到 DOM 解析上，我们知道引入 JavaScript 线程会阻塞 DOM，不过也有一些相关的策略来规避，比如使用 CDN 来加速 JavaScript 文件的加载，压缩 JavaScript 文件的体积。

另外，如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码，使用方式如下所示：

<script async type="text/javascript" src='foo.js'></script>
<script defer type="text/javascript" src='foo.js'></script>

async和defer区别：

async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前。
defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机DOMContentLoaded事件派发之前。

html页面中有css样式
在执行 JavaScript 之前，需要先解析 JavaScript 语句之上所有的CSS 样式。所以如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。

而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行CSS 文件下载，解析操作，再执行 JavaScript 脚本。所以说 JavaScript 脚本是依赖样式表的，多了一个阻塞过程。