前端面试基础合集——JQ

1.html5新特性和css3的新特性有哪些？

html5新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持 localStorage&sessionStorage
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

css3的新特性：

阴影 文本阴影text-shadow 盒子阴影 box-shadow
边框圆角 border-radius
边框图片boeder-image
过渡trasition
animation动画
2D 3D动画
伪类选择器 first-child last-child nth-child(n)
背景： 背景大小 background-size 背景原点background-origin 多背景background: url() ,url(),url()
渐变 ： 线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）) 径向渐变background-image:radial-gradient(圆点，开始、结束)

2.本地存储指的是什么? localStorage&sessionStorage 的区别?什么是离线存储

本地存储指的是储存在用户本地终端上的数据
sessionStorage，只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放
localStorage，只要没有手动清除，就会一直保留，永久存储，以文件形式存储
HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用App。

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

3.前端性能优化的方法有哪些?

1.优化图片资源的格式和大小
2.开启网络压缩
3.使用浏览器缓存
4.减少重定向请求
5.使用CDN存储静态资源
6.减少DNS查询次数
7.压缩css和js内容

4.你知道浏览器兼容的bug有哪些，说出对应兼容bug的解决方式

一、不同浏览器的标签默认的外边界和内填充不同
解决方案：css里 *{margin:0; padding:0;}
　二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
三、设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
四，标签最低高度设置min-height不兼容
　　解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}

5. 如何判断你当初浏览器的类型和提供商? DOM和BOM的区别

(1)通过navigator.userAgent获取浏览器的userAgent字符串
(2)然后indexOf去查找各个浏览器名称/浏览器内核的名称，如果返回值不为-1，则该浏览器名称/内核即为你当前手机的手机浏览器/浏览器内核的类型
以pc端为例：

 var userAgent = navigator.userAgent
    if (userAgent.indexOf("Opera")> -1) {
   
        return "Opera"
    };
    //判断是否Firefox浏览器
    if (userAgent.indexOf("Firefox") > -1) {
   
        return "FF";
    }
    //判断是否chorme浏览器
    if (userAgent.indexOf("Chrome") > -1){
   
return "Chrome";
    }
    //判断是否Safari浏览器
    if (userAgent.indexOf("Safari") > -1) {
   
        return "Safari";
    }
 
var browser = {
   
  versions: function() {
   
    var u = navigator.userAgent;
    return {
   
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android: u.indexOf('Android') > -1 || u.indexOf('Linux')