阿里前端实习一面面试题

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

• 1. 说一下HTML语义化标签
     HTML语义化标签包括Header、Nav、Article、Section、aside、Footer等
     具有优点：

1. HTML结构清晰
2. 代码可读性好
3. 便于团队维护和开发
4. 无障碍阅读
5. 搜索引擎友好、可以根据标签确定上下文权重
6. 移动设备能够更好的展示网页

• 2. 说一下盒模型

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:返回元素的实际大小

• 3. 实现一个左侧宽度固定，右侧自适应的两栏布局

1. 左侧float，右侧margin-left

.left {
    width: 100px;
    float: left;
}
.right {
    margin-left: 100px;
}

2. 左侧absolute，右侧margin-left

.left {
    width: 100px;
    position: absolute;
}
.right {
    margin-left: 100px;
}

3. flex布局

.container {
    display: flex;
}
.left {
    width: 100px;
}
.right {
    flex: 1 0 auto;
}

4. float+BFC方法

.left {
    width: 100px;
    float: left;
}
.right {
    overflow: hidden;
}

5. 双float方案

.left {
    width: 100px;
    float: left;
}
.right {
    float: right;
    width: calc(100% - 120px);
}

• 5. 说一下原型链

1. 每个对象都有一个proto属性指向它的构造函数的原型对象
2. 如果该对象是一个函数对象，则有一个prototype属性指向其原型对象
3. 构造函数的原型对象有一个constructor属性指向构造函数

• 6. 说一下如何实现原型链继承

1. 使子类的构造函数的原型对象为父类的一个实例。
   缺点：1. 所有子类的实例共享父类的实例属性和方法。
2. 创建子类实例时无法向父类构造函数传参
3. 子类原型属性和方法的声明必须在创建父类实例之后

• 7. 说一下promise和async、await

1. 都是用来实现异步操作的，promise的出现是为了解决回调地狱造成的代码可读性差问题。可以通过promise.then来来进行链式调用。
2. promise仍具有一些缺点，一但执行就无法取消，无法获得执行的进度，如果不设置回调函数内部抛出的错误无法在外部获得。
3. await本质上时promise的语法糖，优点在于结构更清晰，几乎和同步代码一样。可以用try catch进行错误捕获。中间值传参更方便。

• 8. script标签的async和defer属性

1. 两者都会使script标签异步加载，从而不阻塞页面DOM的解析。
2. defer会使script延迟到整个页面都解析完成后再运行
3. async会在script标签加载完成后立即暂停DOM解析并运行。

• 9. 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不能随着跨域请求发送。

• 10. 说一下浏览器缓存

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