(二)前端开发面试会问到的问题有哪些?

本文总结了前端面试中常见的问题,包括存储方式如cookie、localStorage的区别,HTML5和CSS3的新特性及其应用,HTTP请求方法GET和POST的差异,HTTP状态码如301、302、304的含义,以及Web性能优化和浏览器缓存机制。适合前端开发者复习面试知识点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

⭐️ 作者:船长在船上
🚩主页:来访地址船长在船上的博客
🔨 简介:高级前端开发工程师,专注前端开发,欢迎咨询交流,共同学习!

👉👉👉 欢迎来访船长在船上的博客,如有疑问可以留言、评论,看到后会及时回复。 

 

 (一)前端开发面试会问到的问题有哪些?_船长在船上的博客-优快云博客

 

目录

13.除了 cookie,还有什么存储方式。说说 cookie 和 localStorage 的区别

14.HTML5 和 CSS3 用的多吗?你了解它们的新属性吗?有在项目中用过吗?

15.http 常见的请求方法

16.get 和 post 的区别

17.说说 302,301,304 的状态码

18.web 性能优化

19.浏览器缓存机制


 

 

 

4f8a15d86631f06513fddc99a773e259.png

 

13.除了 cookie,还有什么存储方式。说说 cookie 和 localStorage 的区别

还有 localStorage,sessionStorage,indexdDB 等
cookie 和 localStorage 的区别:
cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间
来回传递
cookie 数据还有路径(path)的概念,可以限制。cookie 只属于某个路径下
存储大小限制也不同,
cookie 数据不能超过 4K,同时因为每次 http 请求都会携带 cookie,
所以 cookie 只适合保存很小的数据,如回话标识。
localStorage 虽然也有存储大小的限制,但是比 cookie 大得多,可以达到 5M 或更大
localStorage 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie 只在
设置的 cookie 过期时间之前一直有效,即使窗口和浏览器关闭。
 

14.HTML5 和 CSS3 用的多吗?你了解它们的新属性吗?有在项目中用过吗?

html5:
1)标签增删
8 个语义元素 header section footer aside nav main article figure
内容元素 mark 高亮 progress 进度
新的表单控件 calander date time email url search
新的 input 类型 color date datetime datetime-local email
移除过时标签 big font frame frameset
2)canvas 绘图,支持内联 SVG。支持 MathML
3)多媒体 audio video source embed track
4)本地离线存储,把需要离线存储在本地的文件列在一个 manifest 配置文件
5)web 存储。localStorage、SessionStorage
css3:
CSS3边框如border-radius,
box-shadow等;CSS3背景如background-size,
background-origin 等;CSS3 2D,3D 转换如 transform 等;CSS3 动画如 animation 等。 
 

15.http 常见的请求方法

get、post,这两个用的是最多的,还有很多比如 patch、delete、put、options 等等
 

16.get 和 post 的区别

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。
GET:不同的浏览器和服务器不同,一般限制在 2~8K 之间,更加常见的是 1k 以内。
GET 和 POST 的底层也是 TCP/IP,GET/POST 都是 TCP 链接。
GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。
对于 GET 方式的请求,浏览器会把 http header 和 data 一并发送出去,服务器响应 200
(返回数据);
而对于 POST,浏览器先发送 header,服务器响应 100 continue,浏览器再发送 data,服
务器响应 200 ok(返回数据)。
 

17.说说 302,301,304 的状态码

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI,返回信息会
包括新的 URI,浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替
302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有
URI
304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回
任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返
回在指定日期之后修改的资源
 

18.web 性能优化

降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。
加快请求速度:预解析 DNS,减少域名数,并行加载,CDN 分发。
缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。
渲染:JS/CSS 优化,加载顺序,服务端渲染,pipeline。
 
 

19.浏览器缓存机制

缓存分为两种:强缓存和协商缓存,根据响应的 header 内容来决定。
强缓存相关字段有 expires,cache-control。如果 cache-control 与 expires 同时存在的话,
cache-control 的优先级高于 expires。
协商缓存相关字段有 Last-Modified/If-Modified-Since,Etag/If-None-Match

 

 

上一篇文章:

(一)前端开发面试会问到的问题有哪些?_船长在船上的博客-优快云博客

 

🔔  感谢:如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题,可以关注、支持一下博主,如果三连收藏支持就会更好,在这里博主不胜感激!!!如有疑问可以留言、评论,看到后会及时回复。  

后续会继续更新面试题,关注收藏一下随时查看。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值