阿里前端实习一面面试题

2 篇文章 0 订阅
1 篇文章 0 订阅

记录和分享我遇到的一些面试题,持续更新

    1. 说一下HTML语义化标签
      HTML语义化标签包括Header、Nav、Article、Section、aside、Footer等
      具有优点:
  1. HTML结构清晰
  2. 代码可读性好
  3. 便于团队维护和开发
  4. 无障碍阅读
  5. 搜索引擎友好、可以根据标签确定上下文权重
  6. 移动设备能够更好的展示网页
    1. 说一下盒模型
  1. 盒模型包括内容区域、内边距、边框、外边距
  2. 有两种盒模型一种是标准盒模型,width和height仅指内容区域的高度;还有一种IE盒模型,width和height指content+padding+border的宽度
  3. 可以通过box-sizing:content-box和box-sizing:border-box设置这两种盒模型
  4. JS获得盒模型的宽高
    window.getComputedStyle(dom).width:获取即使计算的样式
    dom.offsetWidth/dom.offsetHeight:返回元素的实际大小
    1. 实现一个左侧宽度固定,右侧自适应的两栏布局
  1. 左侧float,右侧margin-left
.left {
    width: 100px;
    float: left;
}
.right {
    margin-left: 100px;
}
  1. 左侧absolute,右侧margin-left
.left {
    width: 100px;
    position: absolute;
}
.right {
    margin-left: 100px;
}
  1. flex布局
.container {
    display: flex;
}
.left {
    width: 100px;
}
.right {
    flex: 1 0 auto;
}
  1. float+BFC方法
.left {
    width: 100px;
    float: left;
}
.right {
    overflow: hidden;
}
  1. 双float方案
.left {
    width: 100px;
    float: left;
}
.right {
    float: right;
    width: calc(100% - 120px);
}
    1. 说一下原型链
  1. 每个对象都有一个proto属性指向它的构造函数的原型对象
  2. 如果该对象是一个函数对象,则有一个prototype属性指向其原型对象
  3. 构造函数的原型对象有一个constructor属性指向构造函数
    1. 说一下如何实现原型链继承
  1. 使子类的构造函数的原型对象为父类的一个实例。
    缺点:1. 所有子类的实例共享父类的实例属性和方法。
  2. 创建子类实例时无法向父类构造函数传参
  3. 子类原型属性和方法的声明必须在创建父类实例之后
    1. 说一下promise和async、await
  1. 都是用来实现异步操作的,promise的出现是为了解决回调地狱造成的代码可读性差问题。可以通过promise.then来来进行链式调用。
  2. promise仍具有一些缺点,一但执行就无法取消,无法获得执行的进度,如果不设置回调函数内部抛出的错误无法在外部获得。
  3. await本质上时promise的语法糖,优点在于结构更清晰,几乎和同步代码一样。可以用try catch进行错误捕获。中间值传参更方便。
    1. script标签的async和defer属性
  1. 两者都会使script标签异步加载,从而不阻塞页面DOM的解析。
  2. defer会使script延迟到整个页面都解析完成后再运行
  3. async会在script标签加载完成后立即暂停DOM解析并运行。
    1. XSS、CSRF
  1. XSS:跨站脚本攻击,在存在安全漏洞的网站内注入并运行非法的HTML标签或者JavaScript代码,从而窃取用户信息,盗取用户Cookie发送恶意请求的一种攻击方式

防御手段:
1. 开启CSP(内容安全策略),本质上建立白名单,告诉浏览器哪些外部资源可以加载和执行。
2. 转义字符,转义输入和输出的内容。
3. HttpOnly Cookie,防止XSS攻击窃取用户的Cookie
2. CSRF:跨站请求伪造,利用用户已经登录的身份,在用户不知情的情况下,以用户的名义完成非法操作。

防御手段:1. Token。2. 验证码。3. 检查Referer。4. 对cookie设置SameSite属性,表示cookie不能随着跨域请求发送。

    1. 说一下浏览器缓存
  1. 浏览器缓存的位置包括service worker、memory cache、disk cache、push cache
  2. 浏览器缓存过程分为强缓存和协商缓存,强缓存不向浏览器发送请求直接使用缓存中的内容,判断是否使用强缓存的依据是是否超过某个时间点。当强缓存失效的时候则采用协商缓存,客户端向服务器端发送携带缓存标识的请求。由服务器根据缓存标识决定是否使用缓存,若协商缓存生效则返回304,否则返回200和请求内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值