2025前端面试-性能优化（HTML与CSS）---003

1.什么是SEO

• 定义 ：Serach Engine Optimization
• 涉及到的使用： 门户网站或者功能网站（搜索引擎展示的先后顺序，推广 如搜索pdf转化器搜索之后，同质化显示出来的内容先后会决定网站的点击量）

2. SEO有哪些关键点

(从重要到次要依次回答)

1.SSR服务端渲染

2.TDK描述 （title description keywords 标题，描述，关键词）

3.语义化的HTML元素(Header,Nav,Aside,Ariticle,Footer)，图片alt,h1,h2的合理使用，

4.编写合理的robots.txt文件

• 是一个存放在网页根目录中的文本文件（告诉搜索引擎爬虫哪些部分的网页可以被抓取以及哪些不可以

• 通过指示搜索引擎忽略掉不重要的文件或目录，可以让搜索引擎专注于重要内容的抓取和索引

• 可以避免一些敏感私有信息不会被无意中索引

• 如果没有这个文件，可能会降低网站的SEO效率，会让搜索引擎花费更多时间在不重要页面上

5.HTTPS （Google自2014年以来已将HTTPS作为其搜索排名的信号之一，另一个方面更安全

6.内部链接（同一个网站下不同页面）和外部链接（不同网站）

7.sitmap文件，网站导航，响应式处理，都在某种程度上提高网站的权限

8.SEO专员

3. defer和async属性在script标签中分别有什么作用

这两个属性都是用来控制外部脚本文件加载和执行方式的 可以帮助改善页面加载速度

两者之间机制不同，并且应用场景页不同

async通常用于独立的脚本，对于其他脚本甚至DOM没有依赖的脚本（因为这个async属性控制的脚本执行会涉及到影响DOM树的构建）

defert通常用于需要在文档解析之后操作DOM的JS代码，并且会对多个sript文件有顺序要求

现代框架中webpac或者vite会帮助配置 不需要手动配置

• 浏览器 解析页面时，遇到script元素 会 停止DOM树的构建，首先把js代码下载并执行，这个过程中会阻塞DOM树的渲染

• 只有等到JS脚本执 行结束之后才会继续解析执行HTML构建DOM树

  • 为什么？
    1. JS本身可以操作DOM树 ，如果是等到DOM树构建完成并且渲染完成之后操作DOM会出现重绘回流，对于性能消耗会很大
  • 问题：
    1. 现代框架开发中 生成的脚本文件会很大

• defer 属性告诉浏览器先继续解析HTML，构建DOM Tree 不要等待脚本下载

  • 脚本会由浏览器来进行下载，不会阻塞DOM Tree的构建过程
  • 当脚本提前下载好之后，会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码
  • （并且多个defer可以保证先后顺序 ，推荐放到head中去

• Async 属性

  • 下载完成之后就马上执行脚本，不会等待是否已经构建好DOMTree (执行时会阻塞DOM Tree的构建)
  • 并且async脚本是独立的 不会等待其他的脚本执行

4.CSS3 引入的一些主要新特性

5.为什么在移动端使用@2x,@3x的图片（移动端适配

1. 在移动端设备中，有非常多高分辨率的设备，为了适应不同的像素密度，UI通常会给开发者提供多个版本的图像资源
   1. @1@2 @3 (低中高分辨率)

原文地址：https://blog.csdn.net/qq_60618042/article/details/143442928

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！