室友也是一名前端开发者。最近在找工作的时候，讨论了常见的前端笔试题和面试题。今天总结一下以往校招社招时经常遇到的面试题。iframe有什么缺点？页面看起来杂乱无章，难以管理，布局不佳，很容易分散用户的注意力。搜索引擎的检索程序无法解读这类页面，不利于SEO。移动设备兼容性差会增加http请求，造成服务器负担会阻塞主页面的Onload事件，与主页面共享连接池，浏览器对同域连接有限制，所以它会影响页面的并行加载。cookies和localStorage、seesionStorage有什么区别？共同点是都存储在浏览器端。区别如下：cookies是存储在本地的数据，用于识别用户身份，会随着http请求发送给服务器，而localStorage和sessionStorage只是存储在本地，不会自动发送给服务器保存的数据cookie不超过4k，而localStorage和sessionStorage保存的数据可以达到5Mcookie在过期前一直有效，即使窗口或浏览器关闭。localStorage始终有效，窗口和浏览器始终关闭，用于长期数据存储。SessionStorage仅在浏览器窗口关闭之前有效。Cookie数据在同一来源的所有窗口之间共享。LocalStorage在所有同源窗口中也是共享的，但是sessionStorage在不同浏览器中是不共享的，即使同一个页面有多个tab，如何实现通信呢？localStorage：给window全局对象添加监听事件window.onstorage=(e)=>{console.log(e);}webSocket协议SharedWorker：webWorker只针对当前页面，SharedWorker是多个标签共享的worker如何实现HTML5文件离线存储？在head中添加manifest属性，它会请求manifest文件，第一次访问时浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果已经被访问过并且资源已经离线存储，浏览器将使用离线资源加载页面。不使用border画一条1px高的线为了在不同浏览器的标准模式和怪异模式下保持一致，可以使用以下方法：1.使用div2。使用hr，不建议直接使用size属性，因为新标准放弃了直接使用标准的方式如何实现垂直居中？绝对定位：main{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；}flexboxlayout:display:flex,justify-content:center,align-items:centerbox布局：box-align:center;box-pack:center什么是标准模式和怪癖模式？如何回应？标准模式，也称为严格模式，浏览器使用W3C标准来解析和渲染页面Weird模式，也称为混合模式，浏览器以自己的方式解析和渲染页面，不同的浏览器网页会显示不同的风格最好的方式是添加文档类型声明，例如，浏览器将使用W3C标准来呈现网页。如何解决两个元素重叠的问题（marginmerging）？边距合并（堆叠）：当两个垂直（不包括水平）边距相遇时，它们形成一个边距。组合边距的高度是边距高度中较大的一个。一上一下会合并；一里一外合并；本身的margin-top和margin-bottom（没有border和padding的时候）也会合并方法：可以用BFC来解决，所谓BFC就是一个css布局一个概念就是一个区域，一个环境。边距穿透：可以将父元素设置为独立的BFC，子元素的边距值不会溢出父元素。这里我们对父元素应用了样式overflow:hiddenmarginoverlap：即同级的两个元素在重叠的情况下，我们可以给两个div套上一个BFC外壳，这样两个BFC内部的元素就会互不影响。页面上实现一个圆形的可点击区域SVG方法：同理，用法类似的方法也可以是CSS方法：border-radius:50%JS方法：先画一个正方形，js检测鼠标是否位置在圆上。常见的SEO方法有哪些？页面布局，重要的事情要提前。文章关键词的分布（在面包屑和侧边栏适当调用文章标题，增加关键词密度）文章内容可以写在侧边栏前面的源码中，然后使用float:right为图片向右浮动处理（图片被压缩，用div+css调用图片，同时添加alt属性）图片添加alt属性，（搜索引擎蜘蛛无法抓取图片内容）的大小控制该页面将脚本放在底部
