HTML必会
一、SEO优化（简称搜索引擎优化）⭐
1.从SEO技术角度
A.网站架构优化
- 扁平化目录设计：确保重要页面层级不超过3级（如“首页->产品中心->产品详情”),便于搜索引擎爬虫快速抓取内容
- URL结构：用简洁、包含关键词的URL。
- XML站点地图：帮助搜索引擎爬虫更高效抓取网站内容，了解网站结构的工具 （扩展哈）
B.页面性能优化
- 移动端优先适配：采用响应式设计，压缩移动端首屏资源至少小于1.5MB，实现3秒内完成渲染
- HTTPS安全协议：部署SSL证书
- 核心Web指标优化（了解）
- LCP(最大内容绘制时间）：控制在2.5s之内
- FID（首次输入延迟）：小于100毫秒
- CLS（累积布局偏移）：小于0.121
2.从SEO内容角度
- 合理的title、description、keywords:title注意强调重点，description注意高度概括页面内容，keywords列举出重要的关键词。
- 语义化HTML标签，让搜索引擎爬虫更加容易理解网页。
- 重要的HTML代码放在前面，因为搜索引擎爬虫是从上往下抓取HTML的。
- 重要内容不要放在iframe：搜索引擎爬虫不会不会抓取iframe里面的内容。
- 重要内容太不要用js输出：搜索引擎爬虫不会执行js获取内容。
二、H5新增api⭐⭐
- 音视频：audio、video
- 语义化标签：article、footer、header、nav、section等
- H5储存：localStorage、sessionStorage
- 新增的技术：websocket
- 新增图形绘制：canvas标
- 等等（问的少，了解会用一些就好）
三、iframe标签⭐⭐
iframe就是HTML中，用于网页嵌套的网页的。就是一个网页嵌套到另外一个网页中，可以嵌套很多层。
- 注意：iframe会阻塞主页面的Onload事件，搜索引擎无法解读iframe里面的内容，不利于SEO
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.4399.com" frameborder="0"></iframe>
</body>
<style>
iframe{
position: fixed;
background: white;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 50%;
height: 50%;
}
</style>
</html>
四、Preload和Prefetch的区别⭐⭐
- preload：
- 立即加载资源，不会阻塞onload事件
- 通常用来加载页面需要的关键资源，确保资源尽快加载，提高页面的首屏渲染速度
- 优先级高
- prefetch
- 当浏览器空闲的时候加载资源。
- 一般用来提前加载未来可能会遇到的资源， 减少用户跳转页面的等待时间
- 优先级低
- 扩展：dns-prefetch：浏览器空闲的时候提前解析dns
<link rel="preload" href="mian.js" as = "script">
<link rel="preload" href="style.less" as = "style">
<link rel="prefetch" href="next_page.js" as="script">
<link rel="dns-prefetch" href="//baidu.com">
五、浏览器渲染机制⭐⭐⭐⭐⭐
- 解析与构建DOM/CSSOM树（渐进式构建、阻塞行为）
- 构建渲染树（合并DOM树和CSSOM树）
- 重排（根据布局的变化）
- 重绘（样式的改变）
- 显示
六、从输入网址到页面显示的完整流程概述⭐⭐⭐⭐⭐
- URL解析（协议；域名；端口；路径）
- DNS解析（域名->IP地址）
- 浏览器查看缓存（强缓存和协商缓存）
- 建立TCP连接（三次握手）
- HTTP请求（GET）
- 服务器响应（200）
- 请求其他资源（获取CSS/JS/图片）
- 渲染页面（DOM || CSSOM->合并为渲染树 ->回流 -> 重绘）
- 关闭连接
七、暂时遇到这么多，欢迎各位有遇到其他面经踢我哈
前端面试笔记 文章被收录于专栏
双非本前端求职笔记，八股文项
