前端面试题（实习）（一）

最新推荐文章于 2022-04-23 16:57:10 发布

Adios丶

最新推荐文章于 2022-04-23 16:57:10 发布

阅读量236

点赞数

文章标签：面试 html html5

本文链接：https://blog.youkuaiyun.com/qq_43505828/article/details/120539058

版权

1 前端需要注意哪些SEO

合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title 值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯ description 有所不同； keywords 列举出重要关键词即可

语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚

重要内容 HTML 代码放在Y前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取

重要内容不要⽤ js 输出：爬⾍不会执⾏js获取内容少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容

⾮装饰性图⽚必须加 alt

提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

2 <img> 的 title 和 alt 有什么区别

通常当⿏标滑动到元素上的时候显示

alt 是 <img> 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析

3 从浏览器地址栏输⼊url到显示⻚⾯的步骤

浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；

载⼊解析到的资源⽂件，渲染⻚⾯，完成。

详细简版
1. 从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）
2. 开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识）
3. 从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
4. 后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）
5. 单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catchcontrol 等）
6. 浏览器接收到 HTTP 数据包后的解析流程（解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）
7. CSS 的可视化格式模型（元素的渲染规则，如包含块，控制框， BFC ， IFC 等概念）
8. JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）
9. 其它（可以拓展不同的知识模块，如跨域，web安全， hybrid 模式等等内容）

4 如何进⾏⽹站性能优化

content ⽅⾯
减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image

减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名

减少 DOM 元素数量

Server ⽅⾯
使⽤ CDN

配置 ETag

对组件使⽤ Gzip 压缩

Cookie ⽅⾯
减⼩ cookie ⼤⼩

css ⽅⾯
将样式表放到⻚⾯顶部

不使⽤ CSS 表达式

使⽤ <link> 不使⽤ @import

Javascript ⽅⾯
将脚本放到⻚⾯底部

将 javascript 和 css 从外部引⼊

压缩 javascript 和 css

删除不需要的脚本
减少 DOM 访问

图⽚⽅⾯
优化图⽚：根据实际颜⾊需要选择⾊深、压缩优化 css 精灵不要在 HTML 中拉伸图⽚

5 HTTP状态码及其含义

1XX ：信息状态码 100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX ：成功状态码

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

3XX ：重定向

301 Moved Permanently 请求的⽹⻚已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。

304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。

4XX ：客户端错误

400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁⽌访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error Y常⻅的服务器端错误。

503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

6 语义化的理解

⽤正确的标签做正确的事情！

HTML 语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式 CSS 情况下也以⼀种⽂档格式显示，并且是容易阅读的。

搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。

使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解

7 介绍⼀下你对浏览器内核的理解？

主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎
渲染引擎：负责取得⽹⻚的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算⽹⻚的显示⽅式，然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚的语法解释会有不同，所以渲染的效果也不相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需要编辑、显示⽹络内容的应⽤程序都需要内核
JS 引擎：解析和执⾏ javascript 来实现⽹⻚的动态效果

8 html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加
绘画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section

表单控件， calendar 、 date 、 time 、 email 、 url 、 search

新的技术 webworker 、 websocket 、 Geolocation
移除的元素：
纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u

对可⽤性产⽣负⾯影响的元素： frame 、 frameset 、 noframes
⽀持 HTML5 新标签：
IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签

可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签

浏览器⽀持新标签后，还需要添加标签默认的样式
当然也可以直接使⽤成熟的框架、⽐如 html5shim

9 请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
存储⼤⼩：
cookie 数据⼤⼩不能超过4k

sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭