2018最新前端面试题十
【相关推荐：前端面试题（2020）】
一、请描述 cookies、sessionStorage 和 localStorage 的区别。
软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程，一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现，web开发又有了两种选择：Web Storage和Web SQL Database.
WebStorage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。
1:cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2:存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3:数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4:作用域不同，sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5:Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6:Web Storage 的 api 接口使用更方便。
二、请解释 <script>、<script async> 和 <script defer> 的区别。
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.<script src="example.js"></script>
没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；
2.<script async src="example.js"></script>
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
3.<script defer src="example.js"></script>
有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
三、为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定义（undefined）。
而为什么我们经常看到有很多的人把js脚本放到head里面都不担心出问题？因为通常把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码
四、html 渐进式渲染
你需要尽早将 HTML 字节给到浏览器。
比如：一个请求进来了，（理想状态下）你的数据被缓存起来，因此服务器能够快速获取。然后，浏览器开始解析数据，并在屏幕上呈现出来。
对于此次 WebPageTest，在 1.5 秒就得到了第一屏，但是你能看到，它没有包含所有内容。它包含的内容足以让你开始浏览页面、或查看假日交易。
然后，到 3.5 秒，另一部分载入了更多交易。到 6.5 秒，一些东西仍然在载入！事实上，整个页面载入的完成一直持续到 18 秒。你能等那么长时间吗？我表示怀疑！
如果 Amazon 专注于最慢的页面载入，那么一定有人被激怒。他们却专注于在最早的 packet 里发送最重要的字节。再进一步，他们可能在第一个 packet 里塞满最重要的字节。我敢打赌，他们还专注于尽快地为你发送那些字节。
五、CSS 中类 (classes) 和 ID 的区别。
在样式表定义一个样式的时候，可以定义id也可以定义class。
在CSS文件里书写时，ID加前缀“#”；CLASS用“.”
id一个页面只可以使用一次；class可以多次引用。
ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
六、请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。 比如说，我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
后面设置的属性将会覆盖前面重复设置的属性。期待能够指出它的负面影响，或者提到它的一个更好的替换者“normalize”
normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
七、请解释浮动 (Floats) 及其工作原理。
float属性定义了元素是否浮动及在哪个方向浮动，在CSS中任何元素都可以浮动，且浮动元素会生成一个块级框，而不论它本身是何种元素。并且盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。浮动属性会使得浮动的元素脱离文档流，所以文档的普通流中的块框会表现的像浮动框不存在一样。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
以上就是2018最新前端面试题十的详细内容，更多请关注其它相关文章！
上一篇： 2018最新前端面试题九