室友同为前端开发,最近在他找工作的时候,讨论到了常见的前端笔试题和面试题,今天就来总结一下之前校招和社招时频繁遇到的面试题。
iframe 有哪些缺点?
- 页面看起来较杂乱,不易管理,布局不佳,易分散用户注意力
- 不利于搜索引擎的优化
- 移动设备兼容性差
- 会增加 http 请求,对服务器造成负担
cookie 和 localStorage、seesionStorage 的区别是什么?
共同点是都保存在浏览器端,区别如下:
- cookies 是为了标识用户身份而存储在本地的数据,会随 http 请求一同发送到服务器,而 localStorage 和 sessionStorage 仅在本地保存,不会自动把数据发给服务器
- cookie 保存的数据不超过 4k,而 localStorage 和 sessionStorage 保存的数据可达到 5M
- cookie 在过期之前一直有效,即使窗口或者浏览器关闭。localStorage 始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存,sessionStorage 仅在浏览器窗口关闭之前有效。
- cookie 数据在所有同源窗口都共享。localStorage 也是在所有同源窗口都共享,而 sessionStorage 不在不同的浏览器共享,即使同一页面
多个标签页如何实现通信?
- localStorage:在 window 全局对象上添加监听事件 window.onstorage = (e) => {console.log(e); }
- webSocket 协议
- SharedWorker:webWorker 只针对当前页面,而 SharedWorker 则是多个标签共享的 worker
HTML5 如何实现文件离线储存?
在 head 中加入 manifest 属性,它会请求 manifest 文件,第一次访问时,浏览器会根据 manifest 文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。
实现不使用 border 画出 1px 高的线
为了在不同浏览器的标准模式与怪异模式下都能保持一致,可用以下方法:
1、使用 div
<div style="width: 100%; height: 1px; background-color: black" />
2、使用 hr,不建议直接使用 size 属性,因为新的标准里已经废弃直接使用标准的方式
<hr style="height: 1px" />
如何实现垂直居中?
-
绝对定位:
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- flexbox 布局:display: flex, justify-content: center, align-items:center
- box 布局,box-align:center; box-pack:center
什么是标准模式和怪异模式?如何应对?
标准模式又称严格模式,浏览器使用 W3C 的标准解析渲染页面
怪异模式又称混杂模式,浏览器都按照自己的方式解析渲染页面,在不同的浏览器网页会显示不同的样式
最好的方法就是添加了文档类型声明,比如 <!DOCTYPE html>,浏览器会用 W3C 的标准来渲染网页
如何解决两个元素的重叠问题(外边距合并)?
外边距合并 (叠加):当两个垂直(不包含水平) 外边距相遇时,它们将形成一个外边距。合并后的外边距的高度取外边距高度中的较大者。
- 一上一下会合并;
- 一内一外也会合并;
- 自身 (没有边框或填充时) 的 margin-top 和 margin-bottom 也会合并
方法:可以用 BFC 的方式解决
在页面上实现一个圆形的可点击区域
- SVG 方式:同理类似的用 <area> 的方式也可以
- CSS 方式:border-radius: 50%
- JS 方式:先绘制一个正方形,js 检测鼠标位置是否在圆上