前端面试题（四）

考点1：增强表单

问题：你能说说html5中增强表单的新输出类型属性

答：① placehodler 占位符；例：<input type="text" placehodler="请输入用户名"/>；② autofocus 自动获取焦点；例： <input autofocus />；③ multiple 允许输入框中出现多个值(用逗号分隔)；例:<input type="email" multiple />； ④ required 必填项,内容不能空； ⑤minlength 指定字符串最小长度

考点2：本地存储

问题：你觉得cookie，localstorage，sessionstorage的区别是什么，有什么优缺点

答：三者都是本地存储，区别是：（1）cookie存储在浏览器和服务端之间传递，而localstorage，sessionstorage只存储在本地浏览器（2）cookie存储大小不会超过4k，而localstorage和session-storage的存储可以达到5m或者更大（3）数据有效期也不同，cookie存储时间只会在设置cookie时期之间有效，sessionstorage数据在关闭窗口前有效，localstorage关闭窗口依然有效，可以长时间保存在浏览器中（4）作用域不同，sessionstorage不在不同的浏览器中共享，只能一个页面，loc-calstorage和cookie可以在同源窗口共享

考点3：其他问题

问题：说说前端页面由哪三层构成，分别是什么，作用是什么

答：结构层：整体内容结构，表示层;对内容如何显示做出一定控制，行为层：做到与用户进行交互，对不同事件进行不同处理显示

问题：前端要注意哪些SEO

答:1.合理的 title（标题） 、 description（类型、说明） 、 keywords（关键字）三者合适优化减少不要的搜索负担；2.语义化代码符合W3C的标准，更有利于搜索引擎理解网页；3.重要内容在html结构中放在前面，重要内容不要让js输出；4.少用iframe（内嵌框架），搜索引擎不会抓取iframe中的内容；5.非必要显示图片可以用alt属性进行备注；6.提高网站速度

问题：css的引用方式有哪些，@import和link导入有什么区别

答：@import和link，区别：（1）加载不同，link引用的css会被同时加载，@import引用的css会页面加载完了在加载；（2）link除了引用css外还可以做其他事情，@import只能引用css（3）@import还可以引用其他样式，比如可以创建一个主样式表，在主样式表中再引入其他的样式表；（4）JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的

问题：说说你对浏览器内核的理解

答：浏览器内核有俩部分，渲染引擎和js引擎：渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面；js引擎是解析执行js获取网页的动态效果。

问题：script标签中defer和async的区别

答：1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部,也不会阻塞页面的加载,与页面加载同时进行)
2.两者的区别,脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行,等dom的加载)；所以, js脚本加上 async或 defer,放在头部可以减少网页的下载加载时间,如果不考虑兼容性,可以用于优化页面加载的性能

问题：什么是防抖和节流，有什么区别（重点*一般会在笔试中进行手写代码）

答：通俗的说防抖是多次执行只执行最后一次，每次触发都会抵掉前一次执行，必须王者按技能；节流是每隔一段时间执行一次，比如王者回城，区别是节流可以减少回调执行频率，减少执行资源