经典前端面试题(三)

本文涵盖前端面试中常见的技术问题,包括FOUC现象及其解决方案、null与undefined的区别、JSON的理解等,旨在帮助开发者准备面试,提升技能。

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

31、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。
32、null和undefined的区别?
null是一个表示"无"的对象,转为数值时为0
undefined是一个表示"无"的原始值,转为数值时为NaN

当声明的变量还未被初始化时,变量的默认值为undefined
null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:
1. 变量被声明了,但没有赋值时,就等于 undefined
2. 调用函数时,应该提供的参数没有提供,该参数等于 undefined
3. 对象没有赋值的属性,该属性的值为 undefined
4. 函数没有返回值时,默认返回 undefined

null表示“没有对象”,即该处不应该有值。典型用法是:
1. 作为函数的参数,表示该函数的参数不是对象
2. 作为对象原型链的终点
33、new操作符具体干了什么呢?
1. 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
2. 属性和方法被加入到 this 引用的对象中
3. 新创建的对象由 this 所引用,并且最后隐式的返回 this

1
2
3
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj); 
34、对JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
1
{"age":"12""name":"back"}

35、js延迟加载的方式有哪些?
1. defer和async
2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
3. 按需异步载入js
36、如何解决跨域问题?
1. jsonp(jsonp 的原理是动态插入 script 标签)
2. document.domain + iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面
37、documen.write和 innerHTML 的区别
document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分
38、call() 和 .apply() 的作用?
动态改变某个类的某个方法的运行环境
39、哪些操作会造成内存泄漏?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
40、如何判断当前脚本运行在浏览器还是node环境中?
通过判断 Global 对象是否为window,如果不为window,当前脚本没有运行在浏览器中
41、什么叫优雅降级和渐进增强?
1. 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

2. 渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
42、对Node的优点和缺点提出了自己的看法?
优点:
1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

缺点:
1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
2. 缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。
43、对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
1. 实现界面交互
2. 提升用户体验
3. 有了Node.js,前端可以实现服务端的一些事情

前景:
1. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好
2. 参与项目,快速高质量完成实现效果图,精确到1px;
3. 与团队成员,UI设计,产品经理的沟通;
4. 做好的页面结构,页面重构和用户体验;
5. 处理hack,兼容、写出优美的代码格式;
6. 针对服务器的优化、拥抱最新前端技术。
44、你有哪些性能优化的方法?
1. 减少http请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器
2. 前端模板 JS + 数据,减少由于HTML标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数
3. 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能
4. 当需要设置的样式很多时设置 className 而不是直接操作 style
5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作
6. 避免使用 CSS Expression(css表达式)又称 Dynamic properties(动态属性)
7. 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳
45、http状态码有那些?分别代表是什么意思?
1. 100-199 用于指定客户端应相应的某些动作
2. 200-299 用于表示请求成功
3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
4. 400-499 用于指出客户端的错误
    400:语义有误,当前请求无法被服务器理解
    401:当前请求需要用户验证
    403:服务器已经理解请求,但是拒绝执行它
5. 500-599 用于支持服务器错误
    503:服务不可用


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值