2018前端面试题（个人遇到）

1. h5怎么调用原生的方法；

答：这篇博客写的详细，应该可以看的懂，直接粘地址： https://www.cnblogs.com/fengmin/p/6558470.html

2. React与Vue区别；

• React是jsx语法（允许在javascript中写html），Vue是采用模板语言
• React数据流单向，Vue数据双向绑定
• React中需要使用setState()方法更新数据状态，Vue state对象不是必须的，数据由data属性在Vue对象中进行管理
• React更适合大型应用和更好的可测试性，Vue只适合小型应用
• 其中两者最大的不同就是模板的编写
  详细请见 ： https://blog.csdn.net/town456/article/details/80795723 ，
  https://blog.csdn.net/u013291076/article/details/53885604

3. form表单的action,怎么阻止表单默认提交；

   
   531671892660889478.png

4. vue父子组件之前的传递，若有多个子组件呢？

答：父组件向子组件传递通过props,子组件通过props接收，子组件通过$emit调用父组件的事件。

5. ios端与android端的兼容问题；

• iphone及ipad下输入框默认内阴影

Element{
  -webkit-appearance:none;
}

• 圆角bug

某些Android手机圆角失效
解决方案：background-clip: padding-box;

• input设置了readonly,ios上点击还会得到焦点，

   $("#select").on("focus",function(){
        $(this).trigger('blur');
    });

• -webkit-tap-highlight-color
  这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
  想要禁用这个高亮，设置颜色的alpha值为0即可。

6. session与cookie的区别；

• cookie数据存放在客户的浏览器上，session数据放在服务器上
• cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
• session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能这一方面，应当使用cookie
• 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie.
• 建议：可将登录等重要信息存放为session,其他信息如果需要保留，可以放在cookie中

7. localStorage,sessionStorage,cookie使用场景和区别

关系：

• cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。
• cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清除，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。
• cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体积。
• sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。

使用场景：

• localStorage可以用来统计页面访问次数。
• sessionStorage可以用来统计当前页面元素的点击次数。
• cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。

常见问题

1. 浏览器兼容问题

• 通配符*来设置各个标签的内外补丁是0；
• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大（ie6 中后面的一块被顶到下一行）

解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性

• 图片默认有间距

解决：1.使用float属性为img布局 2.给img标签添加display：block；

• 透明度的兼容CSS设置

解决： 高级浏览器：opacity, Ie等低级：filter:alpha(opacity=50);

• 当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框

解决： 给img添加border：0；或者是border：none；

• min-height在IE6下不兼容

1）min-height：value；

      _height：value；

2）min-height：value；

     height：auto！important；

     height：value

• 上下margin的重叠问题(给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；)

解决： margin-top和margin-bottom中选择一个，只设置其中一个值

web安全问题

请见：https://blog.csdn.net/a401461843/article/details/77622299