前端常见面试题2019（一）

1. 解释html语义化？

答：用正确的标签做正确的事情。html语义化让页面的内容结构化、结构更清晰、便于对浏览器、搜索引擎

解析：

• 即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；
• 搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO;
• 使阅读代码的人对网站更容易对网站分块，便于阅读维护理解。

2. link和@import的区别？

答：

1. link属于xhtml标签，除了加载css之外，还能用于定义rss,定义rel连接 属性等作用；而@import是css提供的，只能用于加载css;
2. 页面被加载时，link会同时被加载；而@import引用的css会等到页面被加载完后再加载。
3. @import是css2.1提出的，只有在IE5以上才能被识别，而link是xhtml标签，无兼容问题。

3. 描述cookies,sessionStorage,localStorage的区别？

答：

1. cookie是网站用于标识用户的身份而储存在用户本地终端（client side）上的数据（通常经过加密）；cookie数据始终在同源的http中携带（即使不需要），即会在浏览器和服务器间来回传递；
2. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
3. 存储大小：cookie数据大小不能超过4k;sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
4. 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
   sessionStorage数据在当前浏览器关闭后删除；
   cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。

4. javascript中call()和apply()方法的区别？

答：ECMAScript规范给所有函数都定义了这两个方法call()和apply()。

1. call()方法定义：调用一个对象的一个方法，以另一个对象替换当前对象
2. apply()方法定义：应用某一对象的一个方法，用另一个对象替换当前对象。
   
   

两者的区别在与参数：call()和apply()的第一个参数都是要调用的函数的对象，call()的剩余参数是传递给要调用的函数的值，而apply()只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。

5. javascript原型？原型链？以及如何实现继承？

答：每个对象都会在内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，就是原型链的概念。

1》构造继承：比如：现在有一个”动物“对象的构造函数

function Animal(){
　　　this.species = "动物";
　　}

还有一个”猫“对象的构造函数

function Cat(name,color){
　　　this.name = name;
　　　this.color = color;
}

”猫“继承”动物“

构造函数绑定：使用call()或者apply()方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

　function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

2》原型继承：如果”猫“的prototype对象，指向一个animal的实例，那么所有猫的实例就可以继承animal了。

　Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

3》实例继承：

4》拷贝继承：

原型prototype机制或apply和call方法去实现比较简单，建议使用构造方式和原型混合方式。

 function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//继承了Parent，通过原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//得到被继承的属性

6.前端性能优化的方法？

答：

1. 当需要设置的样式很多时设置className而不是直接操作style。
2. 避免在页面的主题布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4. 减少http请求次数：CSS Sprites，JS、CSS源码压缩，图片大小控制合适；网页GZIP压缩，CDN托管，data缓存，图片服务器。
5. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6. 前端模板 JS+数据，减少由于html标签导致的贷款浪费，前端用变量保存AJAX请求结果，每次操作本地数据，减少请求次数。
7. 少用全局变量，缓存DOM节点查找的结果。减少IO（输入/输出）读取操作。
8. 避免使用CSS Expression(css 表达式)又称动态属性（Dynamic properties）。
9. 减少DOM操作；部署前，图片压缩、代码压缩；优化js代码结构，减少冗余代码；减少http请求，合理设置http缓存；使用内容分发cdn加速；静态资源缓存；图片延迟加载；

7. 如何居中div?

答：（1）、水平居中：给DIV设置一个宽度，然后添加margin:0 auto属性。

 div{
     width:200px;
     margin:0 auto;
  }

（2）、让绝对定位的div居中：

div {
     position: absolute;
     width: 300px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: pink;    /* 方便看效果 */
 }

（3）、水平垂直居中一：

 确定容器的宽高 宽500 高 300 的层
 设置层的外边距

 div {
     position: relative;        /* 相对定位或绝对定位均可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */
     background-color: pink;         /* 方便看效果 */

  }

（4）、水平垂直居中二：

 未知容器的宽高，利用 `transform` 属性

 div {
     position: absolute;        /* 相对定位或绝对定位均可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: pink;         /* 方便看效果 */

 }

（5）、水平垂直居中三：

 利用 flex 布局
 实际使用时应考虑兼容性

 .container {
     display: flex;
     align-items: center;         /* 垂直居中 */
     justify-content: center;    /* 水平居中 */

 }
 .container div {
     width: 100px;
     height: 100px;
     background-color: pink;        /* 方便看效果 */
 } 

8. position的值定位原点是？

答：

1. absolute：生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
2. relative：生成相对定位的元素，相对于元素正常位置进行定位。
3. fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
4. static：默认值，没有定位，元素出现在正常的流中。
5. inherit:规定从父元素继承position的值。