第 2 卷

加载≤3秒

1. ✅ 移动端适配：采用响应式布局，适配手机/平板/PC，设置正确的 <meta

name="viewport">

1. ✅ 解决JS渲染抓取问题：SPA单页应用需做SSR服务端渲染或预渲染，避免爬虫抓取空页面
2. ✅ 配置 robots.txt 文件：指定爬虫可抓取/禁止抓取的目录（如禁止抓取/admin后台）
3. ✅ 生成 sitemap.xml 站点地图：提交给搜索引擎，帮助爬虫快速遍历所有页面
4. ✅ 避免Flash/纯图片内容：爬虫无法解析，全部替换为HTML+图片+文字
5. ✅ 静态化处理：动态页面生成静态HTML文件，提升抓取效率和加载速度

• 🔹 代码规范层面

1. ✅ 代码精简：删除冗余代码、注释，减少页面体积
2. ✅ 语义化class/id命名：避免无意义的 class="box1/aa"，使用 class="header-

nav/article-list"

1. ✅ 避免行内样式/JS：样式统一放CSS文件，JS放外部文件，提升代码整洁度和抓取效率
2. defer 和 async 属性在script标签中分别有什么作用？

✅ 先明确：默认script标签的缺陷（无defer/async）

当页面解析到 <script src="xxx.js"> 时，会阻塞HTML解析，流程如下：

1. 暂停HTML解析 → 2. 下载JS文件 → 3. 执行JS文件 → 4. 继续解析HTML

• 弊端：JS文件大/网络慢时，页面长时间空白，用户体验极差，这是defer/async的诞生原因。

✅ defer 属性的核心作用（按序加载，DOM解析后执行）

• 核心特性

1. ✅ 不阻塞HTML解析：下载JS文件时，HTML正常解析，并行执行，无卡顿
2. ✅ 执行时机：HTML完全解析完成（DOM构建完毕）后，才执行JS文件
3. ✅ 执行顺序：多个带 defer 的script，严格按引入顺序执行（先引入先执行）
4. ✅ DOM依赖友好：执行时DOM已完全加载，可直接操作DOM元素，无获取不到的问题

• 适用场景

• 依赖DOM元素的JS文件（如操作页面节点、渲染页面内容）

• 需要按顺序执行的JS文件（如jQuery库 → 依赖jQuery的业务JS）

• 普通业务逻辑JS、页面初始化JS

✅ async 属性的核心作用（并行加载，下载完立即执行）

• 核心特性

1. ✅ 不阻塞HTML解析：与defer一致，下载JS时HTML正常解析，并行执行
2. ✅ 执行时机：JS文件下载完成后立即执行，不等待HTML解析完成
3. ✅ 执行顺序：不保证顺序，多个带 async 的script，谁先下载完谁先执行
4. ✅ DOM依赖风险：执行时HTML可能未解析完成，大概率无法获取DOM元素

• 语法示例

Code block

1<script src="a.js" async></script> 2<script src="b.js" async></script> <!-- 谁先下载完谁先执行，顺序不可控 -->

• 适用场景

• 不依赖DOM、不依赖其他JS的独立脚本

• 统计埋点JS、广告脚本、第三方工具库（如百度统计、友盟统计）

• 无需按顺序执行的独立功能JS

✅ defer vs async 核心区别总结（面试必背）

✅ 面试补充考点

• defer / async 仅对**外部脚本（src引入）**生效，内联脚本（ <script>代码

</script>）无效

• 若同时设置 defer 和 async，async优先级更高（浏览器按async规则执行）

1. 你能描述一下CSS3引入的一些主要新特性吗？

CSS3是CSS2.1的重大升级，采用模块化设计，解决了传统CSS布局、样式、动画的痛点，核心新特性覆盖选择器、布局、样式、动画、响应式五大维度，是前端开发的核心基础。

✅ 一、选择器增强（精准选中元素，减少冗余class）

CSS3新增多种便捷选择器，无需额外加class/id，即可精准定位元素，大幅简化样式编写：

• 1. 属性选择器（灵活匹配属性）

• [attr^="val"]：属性值以val开头（如 [class^="btn-"] 匹配btn-primary/btn-

success）

• [attr$="val"]：属性值以val结尾（如 [src$=".png"] 匹配所有png图片）

• [attr*="val"]：属性值包含val（如 [class*="box"] 匹配box1/box-main）

• [attr~="val"]：属性值包含独立的val单词（如 [class~="active"] 匹配class="box

active"）

• 2. 伪类选择器（功能大幅扩展）

• 结构伪类： nth-child(n) / nth-of-type(n)（选中第n个子元素/同类型子元

素）、 :first-child / :last-child、 :only-child

• 否定伪类： :not(selector)（排除指定元素，如 :not(.active) 匹配非active类的元素）

• 状态伪类： :focus（聚焦）、 :checked（复选框选中）、 :disabled（禁

用）、 :hover（悬浮，增强）

• 目标伪类： :target（匹配锚点定位的元素，如点击 #top 选中 <div id="top">）

• 3. 伪元素选择器（新增/优化）

• ::before / ::after：添加装饰性内容，需配合 content 属性，支持所有样式（核心常用）

• ::placeholder：自定义输入框占位符样式