前端技术精选知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/rical730/article/details/72804355

2017.5.29

今日早报

马化腾：工业时代看“用电量”，数字经济更看重“用云量”，工业革命之后，任命通常把用电量作为衡量经济好坏的重要指标，类比可以预见“用云量”的未来发展
百度副总裁“陆复斌”离职，过了端午就是在百度最后一天，他之前貌似在百度受过内部处分，因为”血友病吧“事件
淘宝低调内测旗下自营店铺“淘宝心选”，有人解读为对标“网易严选”的产物，淘宝官方回应没有这回事。

前段常见题目

问题1: 简单说一下浏览器本地存储是怎样的

有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据，比如在线考试考到一半断网了。目前常用的有以下几种方法：

cookie
- cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。
Flash ShareObject
- 能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
Google Gear
- 需要安装Gear组件。
userData
- 仅在IE下有效。容量可达到640K，
sessionStorage
- sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因
- sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
  而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
globalStorage
localStorage
- html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
- 在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
- 所有的浏览器都支持HTML5 LocalStorage，所以，这也让本地存储前途一片光明啊！

本地存储的发展历史
这里写图片描述
不同方式的代码示例：http://blog.youkuaiyun.com/laner0515/article/details/21541211

问题2: 在JavaScript脚本中，isNaN的作用是什么？

isNaN的作用是判断值是否为数字

问题3: 编写JavaScript脚本生成1-6之间的整数？

var NowFrame;
NowFrame=Math.random( )*6+1 //随机生成一个1-6之间的小数
NowFrame=parseInt(NowFrame) //把1-6之间的小数转化为整数

问题4： CSS规范问题

.（句点）后面跟一个名称代表什么含义？
#（井号）后面跟一个名称代表什么含义？
如果要对一个元素设置CSS样式（内嵌样式），应将CSS样式写在它的什么属性内？

1） .（句号）后面跟一个名称表示文档中所有class属性值包含这个名称的应用其样式，
2） #（井号）后面跟个名称表示文档中ID为此名称的元素应用其样式。
3） CSS样式写在style属性内。

前端常见题目个人思考题：

1、请你谈谈Cookie的弊端。

1.增加流量消耗，每次请求都需要带上cookie信息。
2.安全性隐患，cookie使用明文传输。如果cookie被人拦截了，那人就可以取得所有的session信息。
3.Cookie数量和长度的限制。每个domain 最多只能有20条cookie ，每个cookie长度不能超过4KB，否则会被截掉。

2、对BFC规范的理解？

什么是BFC
- BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
什么情况下会创建BFC
- CSS规范说明了在下列这些情况下会创建新的block formatting context：
  - 浮动元素（float: left | right）；
  - 绝对定位元素（position: absolute | fixed）；
  - 行内块元素（display: inline-block）；
  - 表格的单元格（display: table-cells，TD、TH）；
  - 表格的标题（display: table-captions，CAPTION）；
  - ‘overflow’ 特性不为visible 的元素（除非该值已经传播到viewport?）；
  - 表格元素创建的”匿名框”
- 注意，”display:table” 本身并不产生”block formatting contexts”。但是，它可以产生匿名框，其中包含”display:table-cell” 的框会产生块格式化上下文。总之，对于”display:table” 的元素，产生块格式化上下文的是匿名框而不是”display:table” 。
- 注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下。
BFC 布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
BFC主要作用及原理
- 1.自适应两栏式
- 2.清除浮动
- 详见：http://www.cnblogs.com/chencyl/p/3948331.html
总结
- 因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。