前端常见知识总结
1.盒模型
盒模型由margin、border、padding、content组成。盒模型有两种标准，一个是标准模型，一个是IE模型。标准盒模型的宽高只是内容（content）的宽高，而在IE中盒模型的宽高为边框（border）+填充（padding）+内容（content）的总宽高。
2.sessionStorage、localStorage和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也是在所有同源窗口中都是共享的
3.Html标签的语义化
所谓标签语义化，就是指标签的含义。标签语义化的目的就是对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎搜索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。在
4.<b>、<em>和<strong>
<b>标签语义为“加粗”
<em>标签语义为“强调”
<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示，strong 用粗体表示。
当我们知道了这三个标签的语义时，做SEO时就好决定用哪个来强调重要的关键字了，强调用<em>和<strong>，纯粹加粗用<b>。
5.var与let、const的区别
5.1、var声明的变量会挂载在window上，而let和const声明的变量不会：
var a = 1;
console.log(a,window.a); // 1 1
let b = 1;
console.log(b,window.b); // 1 undefined
const c = 1;
console.log(c,window.c); // 1 undefined5.2、var声明变量存在变量提升，let和const不存在变量提升
console.log(a); // undefined
var a = 1;
console.log(b); //报错 b is not defined
let b = 1;
console.log(c); //报错 c is not defined
const c = 1;5.3、let和const声明形成块作用域
if(true){
var a = 100;
let b = 10;
const c = 1;
}
console.log(a);//100
console.log(b);//报错 b is not defined
console.log(c);//报错 c is not defined5.4、同一作用域下let和const不能声明同名变量，而var可以
var a = 100;
console.log(a); // 100
var a = 10;
console.log(a); // 10
let b = 100;
let b = 10;
//报错：Identifier 'b' has already been declared
const c = 1;
const c = 10;
//报错：Identifier 'c' has already been declared5.5、暂存死区
var a = 100;
if(1){
a = 10;
//在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
// 而这时，还未到声明时候，所以控制台Error:a is not defined
let a = 1;
}5.6、const
/*
* 1、一旦声明必须赋值,不能使用null占位。
* 2、声明后不能再修改
* 3、如果声明的是复合类型数据，可以修改其属性
*
*/
const a = 100;
const list = [];
list[0] = 10;
console.log(list); // [10]
const obj = {a:100};
obj.name = 'apple';
obj.a = 10000;
console.log(obj); // {a:10000,name:'apple'}6.flex弹性布局
参考http://www.runoob.com/w3cnote/flex-grammar.html
7.css选择器有哪些？
ID选择器(#id{})、类选择器（.class{}）、元素选择器（div、p、h1）、后代选择器（h1 span{}）、相邻选择器（h1+p{}）、子元素选择器（td > p{}）
8.跨域解决方案
参考https://segmentfault.com/a/1190000011145364
8.1、 通过jsonp跨域
8.2、 document.domain + iframe跨域
8.3、 location.hash + iframe
8.4、 window.name + iframe跨域
8.5、 postMessage跨域
8.6、 跨域资源共享（CORS）
8.7、 nginx代理跨域
8.8、 nodejs中间件代理跨域
8.9、 WebSocket协议跨域
9.获取两个数之间的随机数，取整
function getRandomNumberByRange(start, end) {
return Math.floor(Math.random() * (end - start) + start);//取整
}
getRandomNumberByRange(0,100);10.position定位都有哪些属性？
默认（static，此时top、right、bottom、left不起作用）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、inherit（ 继承父元素）
11.前端页面优化
11.1、减少http请求，合理设置 HTTP缓存
11.2、使用浏览器缓存
11.3、压缩文件（css、js）
11.4、CSS放在页面最上部，javascript放在页面最下面（浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面）
11.5、减少操作dom次数
11.6、CSS选择符优化，避免写很长的子选择器（#id .class p a { color: #444; }）
11.7、雪碧图（合并所用到的一些固定小图标）
11.8、减少Cookie传输
12.前端SEO优化
12.1、优化html标签，合理使用div、p、table、a，避免全部使用div
12.2、定义关键词、网站描述
< meta name="keywords" content="关键词1，关键词2" />
< meta name="description" content="描述1，描述2" />
12.3、图片<img />添加alt属性， <img src="" alt="图片描述" />
（1）当图片未成功显示时候，仍可以显示文本，用户也可以大致了解图片主题
（2）当图片成功显示的时候，鼠标以上图片，可显示图片描述
（3）可解决网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况
12.4、图片<img /> 要定义大小、不然会造成页面重新渲染，影响加载速度， <img src="" width=" " height="" />
12.5、链接采用绝对路径，减少服务器的响应时间，<a href="www.taobao.com">首页</a>
12.6、导航栏的层级数不宜太深
12.7、页面跳转尽量使用<a href="#"></a>，不要使用<div onclick=" "></div>
13.Math.round(),Math.ceil(),Math.floor()的区别
//ceil()：向上取整
Math.ceil(10.3)//返回11
Math.ceil(10.6)//返回11
Math.ceil(10.0)// 返回10
//floor()：向下取整
Math.floor(10.3)// 返回10
Math.floor(10.6)//返回10
Math.floor(10.0)//返回10
//round()：四舍五入取整
Math.round(10.3)// 返回10
Math.round(10.6)//返回11
Math.round(10.0)//返回10