SEO
什么是SEO？为什么SEO？
Search Engine Optimization:搜索引擎优化
结合项目：
类似于门户网站、功能网站都是需要SEO
一方面需要通过营销宣传提高产品知名度，另一方面靠自然搜索结果获取流量
所以需要在了解一定搜索引擎自然排名机制的基础上，对网站进行内部和外部的调整优化，提升自然排名，获取更多流量，从而达到预期
SEO的优化操作？
给钱
按开发中的优先级排序：
方式一：SSR服务器端渲染
目前企业的项目，包括现在很多新项目，都是基于现代框架
如vue、react，大部分页面元素都是由客户端JS动态生成的
很多搜索引擎在爬虫时只能抓取静态HTML源代码，不会执行JS，因此动态生成的内容无法被爬虫索引
另外很多搜索情况不会等待数据加载完成后抓取，也会导致网站关键信息不能被完整收录
为确保SEO优化，我们采用SSR技术：
SSR能在服务器上执行JS并渲染出完整的HTML页面，然后将其发送到客户端，使爬虫在抓取网站时就能获取到完整的页面内容，提升SEO效果
如果在开发初期计划进行SEO，可以直接选择比较成熟的SSR框架，如：Nuxt.js、Next.js
方式二：准确的TDK描述
title：搜索引擎会首先检索收录title信息，多个关键词用"|"、"-"分割，会被搜索引擎提取收录
description：简短描述，要概述页面内容，包含相关关键词，吸引用户点击
keywords：反映页面主题和内容，虽然重视程度已经降低，但合理使用依然有助于SEO
方式三：语义化的HTML元素、图片的alt、h1、h2的合理使用
语义化元素：具有明确含义的HTML元素，如：header、footer、main、article、section、h1……、img、p……
搜索引擎在爬取网站时会更易理解网站内容以便收录，还能提高页面的可读性和可维护性
图片必须加alt规范：
一方面图片无法显示时用户可以看到提示，另一方面有利于SEO
重要标签h1/h2/h3等的使用
方式四：编写合理的robots.txt
存放在网站根目录的文本文件，告诉搜索引擎爬虫哪些部分的网站可以被爬取，哪些不应该被爬取
通过指示搜索引擎忽略不重要的文件或目录，使其更专注于重要内容的抓取和索引，避免搜索引擎在不重要的页面上浪费时间和资源，提升网站的SEO效率
避免一些敏感或私有内容被无意中索引
如：某乎
方式五：HTTPS
谷歌将HTTPS作为其搜索排名的信号之一
HTTPS也有利于用户安全
方式六：内部链接、外部链接
其他方式：……sitmap文件、网站导航、响应式处理……
script标签
浏览器在解析HTML的过程中，遇到script元素是不能继续构建DOM树的，会下载js代码并执行js脚本，阻塞DOM Tree的构建，等js脚本执行结束后，才会继续解析HTML，构建DOM树
现代开发模式中，脚本下载需要时间更长，造成页面解析阻塞，浪费时间和性能
控制外部脚本文件的加载和执行方式，对于改善页面加载速度非常有帮助
但他们的执行机制不同
defer属性作用
脚本由浏览器来下载，不会阻塞DOM Tree构建过程，在DOM Tree构建完成后，在DOMContentLoaded事件之前先执行defer脚本中的代码，而且defer脚本中的执行是有序的
async属性作用
浏览器不会因脚本下载而阻塞，不会阻止DOM的加载
async脚本还在下载完成后立即执行，不能保证在DOMContentLoaded之前或之后执行 （会阻塞DOM Tree的构建）
不能保证顺序，是独立下载、独立执行，不会等待其他脚本
应用场景
defer常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；
async通常用于独立的脚本，对其他脚本，甚至对DOM没有依赖的脚本；
在现代化框架开发过程中，往往不需要我们自己来配置async或者defer：
在使用脚手架或者自己搭建的webapck或者vite项目进行打包时，它会根据需要帮我们加上defer属性；
某些情况下我们想要进行性能优化时，也可以手动的加上async属性（例如一些第三方的分析工具或者广告追踪脚本<执行完全独立，放在DOM最后更好>）
css
css3新特性
其实并不存在真正意义上的CSS3，因为我有阅读W3C的文档。
从CSS3并不是一个单一的规范，而是一系列独立模块的集合，这些模块扩展了CSS的功能。
这种模块化的方法允许不同的特性以不同的速度发展，可以更快的标准化一些特性，而不必等待整个规范的完成。
这里举一些模块的例子（在真实面试类似这种回答出常见和关键的即可）：
选择器（Selectors）：
新的属性选择器，如[attr^=value]（属性值以特定字符串开始）；
结构性伪类，如:nth-child、:nth-last-child、:first-of-type；
背景和边框（Backgrounds and Borders）：
边框图片（border-image），允许使用图片来创建边框。
多重背景，支持在单个元素上使用多个背景图片。
文本效果（Text Effects）：
文本阴影（text-shadow），可以在文字后面添加阴影效果。
文本溢出（text-overflow），控制文本溢出容器时的显示方式。
转换和动画（CSS Transforms Module, CSS Animations）：
2D 和 3D 转换（transform），包括旋转（rotate）、缩放（scale）、倾斜（skew）和平移（translate）。
CSS 动画（animation），允许定义关键帧动画，控制动画序列。
物理像素-逻辑像素-CSS像素-像素密度-DPR-PPI-DPI
物理像素
物理像素（Physical Pixel）也称为设备像素，是显示屏幕的最小物理单位。
每个物理像素可以发光并显示特定的颜色。
物理像素的大小是固定的，由设备的硬件决定。
比如iPhone 15 Pro Max的分辨率 1290 x 2796，指的就是物理像素；
物理像素的密度（每英寸像素数量，即PPI，英语：Pixels Per Inch，缩写：PPI）
PPI越高，屏幕显示的内容就越细腻。
1英寸=2.54厘米，在工业领域被广泛应用；
逻辑像素
逻辑像素（Logical Pixel），有时也被称为设备独立像素（Device Independent Pixel，简称DIP）
是一个抽象的单位，用于在编程中统一不同设备的显示标准。
逻辑像素是用来衡量在不同设备上如何统一显示内容的尺寸单位。
例如，在高分辨率设备上，可能有多个物理像素组成一个逻辑像素。
这样，无论设备的物理像素密度如何，使用逻辑像素单位开发的界面都能保持相对一致的大小和视觉效果。
DPR
DPR：device pixel ratio
2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；
Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；
我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；
CSS像素 – DPI - PPI
CSS像素（CSS Pixel），CSS像素可以被看作是逻辑像素的一种形式，用在Web端的。
它们被设计用来简化Web开发者的工作，使网页在不同显示设备上都能保持设计的一致性。
随着设备屏幕密度的增加，浏览器会自动处理CSS像素与物理像素之间的比例关系，确保网页元素在视觉上的大小保持一致。
PPI（ Pixels Per Inch ）物理像素的密度（每英寸像素数量）
PPI越高，屏幕显示的内容就越细腻。
1英寸=2.54厘米，在工业领域被广泛应用；
DPI（Dots Per Inch）:每英寸的打印点数
DPI主要用于描述打印机输出的精细度。
例如，一个高DPI值的打印机可以打印出更细致、更少见瑕疵的图像。
- PPI和DPI的区别是什么？
- DPI主要用于打印领域，而PPI则主要用于屏幕显示领域。
- DPI衡量的是墨水点的数量，PPI衡量的是像素的数量。
