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

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

1.SSR服务端渲染

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

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

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

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

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

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

8.SEO专员

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

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

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脚本是独立的不会等待其他的脚本执行