HTML

🌻 前言 SEO 代表搜寻引擎最佳化/搜寻引擎优化(英文全名Search Engine Optimization，简称SEO)，是指通过了解搜寻引擎的自然排名的算法逻辑，以提高目标网站在有关搜寻引擎内排名的方式。 网站的 SEO 至关重要，它可以让你的网站获得更好的排名和流量，从而提高网站知名度。对于一些盈利的网站，做好seo，还可以以低成本提高投资回报率。 本文将为你带来非常全面的SEO方案🔥🔥🔥，当然了，网站SEO是长线工作，在做好一些基础的配置之后，更重要的是后期的维护，比如定期更新网站动态文章，不断寻找优质外链资源等🤌。 本文将以三个层面展开： TDK优化 网站质量 SEO手段（10种手段） ❄️ 一、TDK优化 TDK是Title(页面标题)、Meta Description（页面描述）和Meta Keywords（页面关键词）的缩写，对网站的这三个信息的提炼是网站SEO的重要环节。 但是由于一些原因，各大主流搜索引擎基本都已经大大降低甚至移除了 <keywords> 对排名的影响。例如： 百度：几乎放弃了对标签的参考价值。参考：百度官方称：keywords这个meta标签已经被丢进历史垃圾堆了； 谷歌：目前几乎已经不考虑这个标签对于SEO的作用了，它可能更侧重于内容的相关性以及反向链接的考量。参考：# Google 不会将关键字元标记用于网页排名 必应：目前 keywords 标签仍然对排名有一定影响； （一）title标签-网站名片 title标签相当于网站的名片，他会直接显示在搜索结果中。一个好的标题势必可以为网站带来流量，从而提升网站排名。 注意：网站标题避免冗长 例如：<title>掘金</title> （二）META标签-网站信息 META标签是网页head区的辅助性标签，它的作用是经过配置一些参数用以描述页面属性。目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类。 2.1 meta标签如何使用 meta标签的属性有两种：name和http- equiv。 🍀 “name"属性有以下配置项： Keywords(关键词，现在不再重要了)：逗号分隔的关键词列表（告诉搜索引擎页面是与什么相关的）； description(网站内容描述，很重要)：页面描述。搜索引擎会把这个描述显示在搜索结果中； format-detection：格式检测，比如禁止识别电话，邮箱等； author：作者的名字； Robots：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引； theme-color：网站主题色； <meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python"> <meta name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。"> <meta name="format-detection" content="telephone=no"> <meta name="author" content="cece"> <Meta name="Robots" Content="Nofollow"> /** all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用) index：文件将被检索；（让robot/spider登录） follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录) nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找) */ <meta name="theme-color" content="#4285f4" /> 🍀 “http- equiv"属性有以下配置项： ...

SPA、MPA、SSR 和 CSR 这几个词可能在你的工作生涯中经常出现，网上相关文章也很多。如果你对这些概念感到模糊或完全不了解，希望本文能帮助你理解这些渲染模式。 SPA 与 MPA MPA MPA（multiple page application） 称为多页应用, 指的是有多个页面的应用，从技术手段上来讲，你可以这么粗略地理解。 首屏速度快：各个页面相互独立，需要单独维护多个 html 页面，每个请求都直接返回 html。 切换页面比较慢：基于原生浏览器的文档跳转（navigating across documents）。因此每一次的页面更新都是一次页面重载，这将带来巨大的重启性能消耗。 对 SEO 友好：页面在初始时，就具有全部的页面内容而非 「无状态」，从而达到更好的收录效果。 SPA SPA（single page application）称为单页应用。通过 js 去感知到 url 的变化，动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上。此时的路由不是后端来做了，而是前端来做，动态显示需要的组件。 页面切换速度快：路由跳转是基于特定的实现（如 vue-router，react-router 等前端路由），而非原生浏览器的文档跳转，避免了不必要的整个页面重载。 前后端分离：基于前端路由，SPA 与应用后端解耦，使得前端不再依赖于后端的路由分配。 首屏时间慢：首屏除了 html 还要额外请求并执行 js 文件，通过 js 在空页面上渲染首屏。 SEO 不友好：内容都是靠 js 渲染生成出来的，但搜索引擎并不识别这部分内容，导致 SEO 效果差 CSR（Client Side Rendering） CSR（客户端渲染）是一种在浏览器上执行 JavaScript 以生成 DOM 并显示内容的渲染方法。CSR 更贴近现代前端开发，我们通常使用的 Vue 和 React 默认使用 CSR。其大致流程如下： 浏览器向前端服务器请求 html 和 js html 页面为空，初始加载不显示任何内容，通过执行 js 渲染内容 通过后端暴露的 API 进行交互 对于典型的 CSR 应用程序，浏览器仅接收一个用作应用程序容器的 HTML 页面，因此也称为单页应用，所以 CSR 的特点与之前提到的 SPA 类似。 ...

1. 什么是浏览器解析和渲染HTML 一句话概括：将html代码转换成页面上显示的内容。 表1：形象展示将HTML转换成页面上显示的内容 2. 浏览器解析和渲染HTML过程？ 那么浏览器拿到HTML代码后是如何把其转换成页面上显示的内容的？ 2.1 宏观描述执行过程 2.1.1 解析和渲染 首先我们来看两个概念，解析和渲染，确切来说是DOM解析和DOM渲染。 DOM解析： 生成DOM tree的过程。就是把你所写的各种html标签，生成一个DOM tree，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰。 DOM渲染： 将DOM tree与css样式结合，生成Render tree，并将其呈现在浏览器页面上。浏览器会把本身默认的样式+用户自己写得样式整合到一起，形成一个CSS tree，而DOM渲染就是指DOM tree 和CSS tree 结合到一起，生成一个Render tree，呈现出一个带有样式的页面。 这里需要注意，DOM解析和DOM渲染由两个不同的线程来完成的，简单说就是二者可以并行进行。 DOM解析通常是由浏览器的主线程来完成的。DOM渲染是由浏览器的渲染线程来完成的。 分离解析和渲染的这种设计使得浏览器能够在解析 HTML 文档的同时将页面渲染到屏幕上，这样用户就能够更快地看到完整的页面了。 2.1.2 宏观描述执行过程 补充了解析和渲染的概念，我们来看看浏览器具体是如何把其转换成页面上显示的内容的。其过程大致分为下图的四步。 图1：浏览器解析和渲染HTML的过程 第一步：将载入的HTML文件解析成DOM树（DOM tree），并且将各个标记标识解析成DOM树的各个节点；在解析HTML的同时会将CSS样式解析成CSS规则（CSS rules）。 第二步：将解析成的DOM树和CSS规则进行关联生成渲染树（Render tree）。 第三步：进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标（这一阶段还是渲染树） 第四步：进入绘制阶段，在这里渲染引擎的工作就结束了，接下来就给用户界面后端（UI Backend）对渲染树的每个节点进行绘制，呈现出页面效果。 2.2 细化执行过程 2.2.1 顺序执行 dom解析过程是从上向下，顺序执行的。顺序执行的意思是一行一行的执行，上一行执行完再执行下一行。 <h1>1<h1> <h1>2<h1> <h1>3<h1> <script></script> <style></style> <!-- 先1，再2，再3，按顺序解析。 --> 2.2.2 渐进式 浏览器是渐进式渲染，即边解析边渲染。通俗的说就是，这一行代码解析完，就可以在浏览器的页面渲染展示出来。因为浏览器的解析和渲染由两个不同线程来完成，所以可以实现边解析边渲染。 <h1>1</h1> <script>debugger</script> <h1>2</h1> <script>debugger</script> <h1>3</h1> <!-- 先解析渲染出1，再debugger;再解析渲染出2，再debugger;最后解析渲染出3 --> 2.3 问题：css、js会阻塞解析和渲染吗？ 这部分内容可参考这篇掘金内容，内含测试代码：关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析 - 掘金 ...

一、网站加载概述 面试过程中，常常遇到这样一道面试题，输入URL到页面加载完毕，浏览器做了哪些工作？ 首先输入一个URL，你会看到浏览器上面的标签页出现了一个loading图标，开始时是逆时针旋转，接着顺时针旋转，当前页面消失，显示我们常说的空白页面，接着出现显示我们请求的新页面。此时如果网络很差，你有可能看到短暂的DOM页面，然后再看到渲染后的正常页面，这是从表面看到的加载过程，实际浏览器做的要多得多。 为什么浏览器这么多戏呢？直接显示不好吗，当然不行，就像喝粥，能直接吃米、喝水吗？ 在用户输入URL到页面展示，浏览器要先向服务器获取前端资源，然后再将服务器返回的字节流转化成对应的页面，每一阶段都需要浏览器对应的能力进行处理的。 作为前端开发，了解整个过程其实很重要，只有知道了浏览器加载页面的整个过程，才能在开发中避免可能跳的坑，才能在发现问题后迅速定位问题，才能在性能优化时提出更多的解决方案。 比如下面问题，看了文章相信你就知道了为什么了 为什么会存在空白页面？(为了解决这个问题，各大厂都在实践各种方案） 为什么js要在Dom后面引入 为什么有个页面崩溃会导致多个页面崩溃 浏览器的缓存策略是怎样的？ 为什么我们常常修改host就可以访问对应的域名 等等 二、浏览器的多进程架构 为了看懂下面的内容，这里必须要了解下现代浏览器的多进程架构，进程和线程的关系等知识点。 浏览器也是从单个进程架构一步步迭代到现代的多进程架构。 如上图，我们可以看到线程和进程的关系 通常一个程序实例就是一个进程，浏览器会为他分配内存空间。 一个进程间的数据是共享的，单线程就是一个进程包含一个线程，一个线程处理所有的任务 多线程就是，一个进程中包含多个线程可以同时执行任务，共享数据和内存 线程不能单独存在，必须依附于进程，一个线程失败，会导致进程执行失败，进程销毁，内存会被立即回收。 1、进程 下图是我们打开一个掘金首页后，再打开任务管理器，观察发现，此时浏览器包括的进程有很多，浏览器主进程，GPU进程，网络进程，存储进程，音频进程，渲染进程，多个插件进程。 这些进程负责的功能如下： 进程 说明 浏览器进程 负责浏览器各个子进程的通信，处理浏览器界面，包括地址栏等 渲染进程 也就是我们看到的图中的标签页进程，也就是我们常说的浏览器内核，v8就在这个进程。主要负责解析html、js、css渲染页面等 网络进程 负责发起网络请求，解析返回头信息 GUI进程 负责将渲染进程生成的图块转化成位图 渲染进程是运行在沙箱之中的，可以执行js，但是不能获取系统权限，和浏览器进程通过IPC通讯。这是为了保证浏览器进程的安全，锁进沙箱，即使有恶意代码，也不能突破沙箱读取或写入系统信息。 2、线程 通过上图，我们已经知道线程是不能独立存在的，必须依附于进程。这里我们主要关注下渲染进程，因为他的主要工作就是：完成页面的渲染和展示。 如图，我们可以看到渲染进程包括很多线程，除了图上展示的，还有合成线程等，各有各的作用，具体内容，我们将会在后面一章节，浏览器渲染原理分析中在来讨论。 三、浏览器请求的具体流程 从用户输入域名到浏览器渲染页面完成的过程，可以分为以下几个部分： 1、输入信息处理 2、网络请求 3、服务器返回请求资源 4、浏览器渲染 这里每一步涉及到的知识都非常多，其中缓存也在每个阶段占了很大比重，接着展开描述前三个阶段： 1、地址栏输入信息处理 当输入一个URL，浏览器会判断输入信息是检索信息还是请求URL 如果是检索的信息，就构建请求搜索的URL，调用浏览器默认的搜索引擎进行检索。 如果符合URL格式，浏览器主进程就通过IPC通信机制将URL发送给网络进程。 2、网络进程发起网络请求 1）网络进程首先会查找浏览器缓存，判断缓存是否存在，是否过期 如果存在且不过期，就直接返回缓存信息。具体的缓存策略可以接着看下面的浏览器缓存策略 2）如果没有缓存或过期，就开始进行DNS解析 DNS解析的过程也很复杂，最终目的就是拿到目标主机的IP地址，具体的解析过程可以看下面的域名解析 3）建立http连接或https连接 http通过三次握手建立连接 https需要建立TLS连接，浏览器会验证网站的数字证书是否合法，是否到期，是否安全等，这里https有自己的一套认证逻辑，我们重点不在这一块。 这里两个问题常被问到，不了解可以学习一下 http和https的区别？ 简述三次握手、四次挥手？ 4）发送请求 网络进程会构建http请求头，向服务器发送实际请求 5）网络传输，服务器处理，返回对应的资源 请求从应用层发出，经过运输层、网络层、物理层、数据链路层找到服务器，服务器拿到请求信息，返回对应的资源 这里的服务器可能是代理服务器，也可能是CDN节点，会判断当前数据是否存在缓存，如果有缓存且有效，直接返回（具体看配置的缓存策略），否则才会从服务器获取。 网络传输数据也是很复杂的过程，具体可以看下面简单的介绍计算机网络体系模型 3、服务器返回对应资源 1）处理返回信息 ...