移动端和PC端有什么区别

PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性、

CSS3的动画在移动端用的还是比较多的，但同时也要注意性能。

在布局上，移动端开发一般是要做到布局自适应的，需要熟练使用rem布局

一般PC端用jquery，移动端用zepto，

冒泡排序

      1、比较相邻的元素。如果第一个比第二个大（小），就交换他们两个。

2、对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大（小）的数。

3、针对所有的元素重复以上的步骤，除了最后已经选出的元素（有序）。

4、持续每次对越来越少的元素（无序元素）重复上面的步骤，直到没有任何一对数字需要比较，则序列最终有序。

vue-router原理

1.Hash: 通过改变hash值

2.History: 利用history对象新特性

移动端常见的一些兼容性问题

  1、安卓浏览器看背景图片，有些设备会模糊。

因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

2、ES6 import 引用问题

我们可以使用 JSON.parse(JSON.stringify(str)) 简单粗暴地来生成一个全新的深度拷贝的 数据对象。不过当组件较多、数据对象复用程度较高时，很明显会产生性能问题，这时我们可以考虑使用 Immutable.js。

懒加载

    懒加载主要用于图片过多的场景，主要是为了能够提高页面加载的速度，

    增强用户的体验,他是在需要显示图片的时候，才下载图片，要用于懒加载来延迟内存的缓存。 要做到图片缓存,

    我们先将img标签中的src链接设置为一样的图片（空白图片），将真正的图片链

    接放在自定义属性中，如（data-src），当js监听到图片元素进入到可视窗口的时候，将自

    定义属性中的地址存储到src中，就达到了懒加载的效果。

    这样在用户浏览页面的时候自动获取更多的数据，

    而新得到的数据不会影响原有数据的显示，

    同时最大程度上减少服务器端的资源耗用。也加快了页面的呈现速度。

<!--

思路：首先在当前可视化的区域加载图片,首先需要获取浏览器的高度，然后查询每个元素相对浏览器顶部距离，

然后加载满足：相对浏览器顶部的距离小于浏览器高度的图片，实现对可视化区域的初始化填充。

真正实现懒加载的原理是：获取当前元素距离浏览器顶部的高度，与浏览器+scroll卷到上面的高度相比较，

如果前者小于后者就代表轮到这张图片显示了！就把它加载出来。 -->

2.es6新特性

箭头函数 

    就好比我们写一个倒计时 之后显示一个文本效果。在setInterval里面。如果我们直接绡this的话。这个

    this是指向window的，因此我们需要需要setInterval函数之前保存 _this = this.

    使用箭头函数的时候，就可以直接调用this

    箭头函数：就是函数内部的this 在指向始终是指定义他所在在对象

    而不会指向调用他的对象。

filter：过滤掉不符合条件的数组元素，返回所有符合条件的数组元素组成的新的数组。

    var arr = [1, 2, 4, 5, 6, 9, 10, 15];

    var r = arr.filter(function (x) {

        return x % 2 !== 0;

    });

    r; // [1, 5, 9, 15]

set  数组去重

Promise是一种异步编程的解决方案 

        他是在有很多回掉函数比较多的情况下会用到,因为回掉多的话，会造成层层嵌套，

        很容易进入回掉地狱，而promise就可以解决这个问题。

三种状态:

pending：进行中

fulfilled :已经成功

rejected 已经失败

当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，

就无法再次改变状态，这也是它名字promise-承诺的由来

还有一个.then()方法使Promise原型链上的方法，它包含两个参数方法，分别是已成功resolved的回调和已失败rejected的回调

模板字符串字：   

    传统做法需要使用大量的“”（双引号）和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

    符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含

    由美元符号加花括号包裹的变量${vraible}。模版字符串可以引入变量，也可以不使用变量。

    for in 循环是将变量的初始值 变量的变化 变量的取值范围都写在循环条件中，它是用来循环带有字符串key的对象的方法

    for each则是对数组 集合的操作 遍历数组中的元素 

    for of 值遍历  我们都知道for in 循环用于遍历数组，类数组或对象，和for of循环功能相似，

                不同的是每次循环它提供的不是序号而是值。

3、跨域的原理和解决  存储

跨域  说道跨越就要想到 同源策略这个词  也就是域名,端口,协议有一个不同的都是跨域.         

ajax请求不同的域    受到限制

1.跨域资源共享

    普通跨域请求：只在服务端设置Access-Control-Allow-Origin即可

二、使用JSONP跨域

    因为通过script标签引入的js是不受同源策略的限制的       

    JSONP包含两部分：回调函数和数据。

    回调函数是当响应到来时要放在当前页面被调用的函数。

    数据就是传入回调函数中的json数据，也就是回调函数的参数了。

4、sessionStorage localStorage cookie的区别

localStorage和sessionStorage是html5才应用的新特性，

共同点：都是保存在浏览器端，且同源的。

localStorage    保存数据通过 localStorage.setItem来保存  数据保存在磁盘中不会过期，除非自己删掉，否则会一直都在。生命周期长

sessionStorage  读取数据通过sessionStorage.getItem来读取 当页面关闭的时候数据也会随之消失，生命周期短。

cookies是服务器和客户端都可以访问。它存在有效期，过了有效期就会自动删除。

cookies  cookie在浏览器和服务器间来回传递，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据

        ,用来识别用户登录来说

安全问题:如果cookies被拦截那么对方就会获取到所有信 息，那么会造成很大在影响

5、性能优化

    1．减少 HTTP 资源请求次数 , 如果加载次数较多会形成加载缓慢，不利于用户体验

    2．减小 HTTP 请求大小,

    3. 将 CSS放在 head中

    4. 减少不必要的 HTTP跳转

    5.异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

    6.避免重复的资源请求

        这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求

    7.将css放在页面最上面，将js放在页面最下面

    8.压缩js和css

        减少文件体积，去除不必要的空白符、格式符、注释（即对代码进行格式化）

6、js继承

  概念：  子函数继承父函数的属性和方法

    1  父构造函数属性 通过借用父构造函数，使用call 来改变this指向

        把父构造函数的原型上的方法 放到自己的构造函数原型上   

7.原型，原型链

    原型 prototye 把构造函数的方法放在原型上，之后通过这个构造函数创建的对象实力，共享这这个方法

    原型链 假如有ABC三个构造函数， A的prototype里面的值 等余 B 的prototype的值 B的prototype的值等于 C的prototype的值

8  闭包

      列如：可以写一个函数:在函数a里另写入一个函数B，在函数a里面起一个变量名为m闭包。 在全局中执行函数b中可以引用a中的变量m。

      特性： 函数套函数

            函数内部可引用函数外部参数和变量

            函数变量和参数不会被垃圾回收机制

      优点：长期保存在内存中，避免全局变量污染

9、h5和css3的新特性

css3的新特性 

    选择器  盒模型    背景和边框  css3渐变效果    文字特效  2D/3D转换效果  动画  多列布局用户界面

h5的新特性：

    视频音频audio video   

    画布canvas  本地离线存储 

    拖拽释放   

    表单控件 date time url search

    用于绘画 canvas 元素。

    3.  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

      sessionStorage 的数据在浏览器关闭后自动删除。 

    4.  语意化更好的内容元素，比如 article、footer、header、nav、section 

    5.  表单控件，calendar、date、time、email、url、search。

    语义化标签header footer  nav aside article  section   

    语义化：

        好处：页面结构清晰    支持更多设备    有利于seo搜索引擎    便于团队开发和维护

10、输入一个网址按下回车，看到这个网页这个过程发生了什么

    用户输入url地址，浏览器根据域名寻找IP地址

    浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求

    服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的

    浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

    解析渲染该过程主要分为以下步骤：

    解析HTML

    构建DOM树

    DOM树与CSS样式进行附着构造树呈现

    布局

    绘制

11、什么是优雅降级和渐进增强

    优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 

    渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，

    然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    区别：

    优雅降级是从复杂的现状开始，并试图减少用户体验的供给，

    而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

    优雅降级意味着往回看；

    而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

12、做好seo需要考虑什么

        关键词分析定位

        网站架构分析

        网站目录和页面优化

        网站流量分析

        内容发布和链接的布置

        做SEO必须要有耐心。  要有足够的时间和耐心慢慢经营

        meta标签  他是网站优化的重要因素之一，想要做好网站，就要写好title,keywords.

13、说说你对标签语意化的理解

    Html语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

    便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和及其很好的解析。

    好处：页面结构清晰    支持更多设备    有利于seo搜索引擎    便于团队开发和维护

    -header

        header标签定义section或document的页眉。

    -nav

        nav标签定义导航链接的部分。规范上说nav只能用在页面主要导航部分上。

    -footer

    footer标签定义文档或节的页脚。

    footer元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

    -aside

    nav标签定义article以外的内容。aside的内容应该与article的内容相关。aside的内容用作文章的侧边栏。

14、简述src和href的区别 

    src用于替换元素，指向外部资源的位置

    href用于在当前文档和引用资源之间建立联系

    href 表示超文本引用，在 link和a 等元素上使用。

    src 表示来源地址，在 img、script、iframe 等元素上。

    src 的内容，是页面必不可少的一部分，是引入。

    href 的内容，是与该页面有关联，是引用。

    区别就是，引入和引用。