前端知识顺理

1.事件冒泡是怎么样的？
事件冒泡就是，事件会从目前元素往根元素（从里到外）进行传递
2.跨域的方式？
由于浏览器同源策略，所以就有了跨域的问题，浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。

针对接口的请求的跨域方式
  • jsonp,利用script标签的src可跨域的特性（但只限制get方式）
  • 空iframe + from（支持post方式）
  • CORS （跨域资源共享）
    浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

  • 1.只要同时满足以下两大条件，就属于简单请求。
    （1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    （2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 2.非简单请求
    非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。这里通过前端发请求的时候增加一个额外的headers来触发非简单请求。

  • 代理（nginx配置）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    server{
        # 监听9099端口
        listen 9099;
        # 域名是localhost
        server_name localhost;
        #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
        location ^~ /api {
            proxy_pass http://localhost:9871;
        }    
    }
针对dom查询的跨域方式
  • postMessage： window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <template>
      <div>
        <button @click="postMessage">给http://crossDomain.com:9099发消息</button>
        <iframe name="crossDomainIframe" src="http://crossdomain.com:9099"></iframe>
      </div>
    </template>

    <script>
    export default {
      mounted () {
        window.addEventListener('message', (e) => {
          // 这里一定要对来源做校验
          if (e.origin === 'http://crossdomain.com:9099') {
            // 来自http://crossdomain.com:9099的结果回复
            console.log(e.data)
          }
        })
      },
      methods: {
        // 向http://crossdomain.com:9099发消息
        postMessage () {
          const iframe = window.frames['crossDomainIframe']
          iframe.postMessage('我是[http://localhost:9099], 麻烦你查一下你那边有没有id为app的Dom', 'http://crossdomain.com:9099')
        }
      }
    }
    </script>
  • document.domain:
    这种方式只适合主域名相同，但子域名不同的iframe跨域。比如主域名是http://crossdomain.com:9099，子域名是http://child.crossdomain.com:9099，这种情况下给两个页面指定一下document.domain即document.domain = crossdomain.com就可以访问各自的window对象了。

  • canvas操作图片的跨域问题
    1.图片服务器需要配置Access-Control-Allow-Origin
    2.HTML crossOrigin属性解决资源跨域问题:在HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域资源共享）的属性，这些元素包括img，video，script等，而提供的属性名就是crossOrigin属性。

  • websocket通讯解决跨域问题
    3.jsonp的原理？
    4.双飞翼布局实现方式？
    5.如何实现一个slider？

    6.vue1.0和vue2.0的区别？(参考：https://www.jianshu.com/p/5db73e1c0e34)

    1、组件模板写法:vue2.0不在支持片段代码,需要有一个元素（如div）包裹
    2、组件定义
    3、生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    vue1.0生命周期:
            init    
            created
            beforeCompile
            compiled
            ready       √   ->     mounted
            beforeDestroy   
            destroyed
    vue2.0生命周期:
            beforeCreate    组件实例刚刚被创建,属性都没有
            created 实例已经创建完成，属性已经绑定
            beforeMount 模板编译之前
            mounted 模板编译之后，代替之前ready  *
            beforeUpdate    组件更新之前
            updated 组件更新完毕  *
            beforeDestroy   组件销毁前
            destroyed   组件销毁后

4、重复数据循环

1
2
3
4
5
6
<li v-for="(index,val) in list">  //vue1.0循环写法v-for="(index,val) in array"
    {{val}} {{index}}
</li>
<li v-for="(val,index) in list">  //vue2.0循环写法 v-for="(index,val) in array"
    {{val}} {{index}}                 // 倾向于js原生forEach，先写val再写index
</li>

5、自定义键盘指令
6、filter过滤器:vue1.0系统就自带很多过滤，例如currency/json等等。到了vue2.0，作者删除全部内置过滤器，保留了自定义过滤器，但自定义过滤器传参格式有点区别。
7、组件通信
8、动画
9、vue-router
vdom 虚拟dom的引入

7.vue双向绑定原理，如数组是如何修改绑定的？
8.虚拟dom是什么？为什么效率高？

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

虚拟DOM的存在的意义？vdom 的真正意义是为了实现跨平台，服务端渲染，以及提供一个性能还算不错 Dom 更新策略。vdom 让整个 mvvm 框架灵活了起来，Diff算法只是为了虚拟DOM比较替换效率更高，通过Diff算法得到diff算法结果数据表(需要进行哪些操作记录表)。原本要操作的DOM在vue这边还是要操作的，只不过用到了js的DOM fragment来操作dom（统一计算出所有变化后统一更新一次DOM）进行浏览器DOM一次性更新。其实DOM fragment我们平时开发也能用，但是这样程序员写业务代码就用把DOM操作放到fragment里。

因为引入了通过diff算法，通过Diff算法得到diff算法结果数据表(需要进行哪些操作记录表)，并且统一计算出所有变化后统一更新一次DOM，减少了不必要的dom操作（dom很慢，但是js很快）

9.继承的方式和原理？
https://www.cnblogs.com/humin/p/4556820.html
10.有什么方法可以修改this指向？

  • 1.可以使用局部变量来代替this指针
  • 2.使用call 或 apply 方法
  • 3.new关键字改变this指向
  • 4.通过对象的方法来定义一个函数（谁绑定了我，我就指向谁）
    11.谈谈对h5技术的了解？

    Html5虽然是指HtmL语言的最新版本，但是从广义上人们已经将Html5看成是Html+css+JavaScript的组合模式。因为> 一个Html5网页的组成离不开这三样东西，Html控制着一个网页的框架结构,css控制着网页的样式，JavaScript控制> 着网页的交互逻辑

  • Html5新增的几个主要的标签、地理定位，Web客户端数据存储，应用缓存等新特性
  • css布局，选择器，css3新特性等
  • js包括dom对象，canvas，ajax等

12.get和post的区别？
GET请求在URL中传送的参数是有长度限制的，而POST没有。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET在浏览器回退时是无害的，而POST会再次提交请求。

get和post其实是HTTP协议中的两种发送请求的方法，而HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
13.http1和http2的区别？
参考地址：https://www.cnblogs.com/zhangyfr/p/8662673.html

14.https的了解？
HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。

15.性能优化的措施？
16.混合app的原理？
17.对nginx的了解？
18.对缓存的了解？强缓存和协议缓存？
19.自己的优势？
20.自己的缺点？

1.行内元素和块状元素的区别？
2.position有哪些值，分别由什么用和区别？
3.行内元素，块元素的标签有哪些？
4.对css比较熟悉还是js？
5.双飞翼布局方案？
6.flex布局想优先加载主体块（html结构主体块提前），css样式要怎么处理？（利用flex的order属性）
7.跨域的方式？
8.对小程序的了解？
9.vue的生命周期钩子函数有哪些和分别做了什么？
10.项目中遇到了哪些难题，是怎么解决的？
11.自适应方案的原理？
12.混合app， webapp跟原生app是怎么通讯的？
13.vue组件间怎么通讯？
14.vuex的action可以是同步的也可以是异步的，muations只能是同步的，为什么？

1.html5和css3的新特性？
2.css盒模型是什么，margin和padding的区别？
3.举例浏览器兼容性问题及解决方案，css hack方案？
4.cookie，localstorage，session的区别？
5.原生js实现trim函数？
6.垂直居中布局？
7.原生js实现节点的增，删，移动？
8.查找字符串出现次数最多的字符，并统计次数，js实现？
9.typeof 返回的数据类型？
10.怎么知道请求是否成功？
11.对vue的看法，为什么使用vue？
12.虚拟dom的优势？
13.对会话的理解？
14.cokkie的了解？
15.多个请求是怎么处理的？
16.http状态码？
17.webpack的作用？

1.对前端的理解？
2.对nodejs的理解？
3.标准和模型？box-sizing：border-box的作用？
4.css布局和web语义化？
5.js的数据类型？
6.type (()=>()=>1)() 返回的值？
7.5升水壶和6升水壶怎么取到3升水？
8.js原生实现将

输出到文档中？

  1. css预处理器和后处理器？
    10.性能优化？
    11.webpack方面的应用有哪些？
    12.vue有无深入了解？
    13.对jquery的了解？
    14.css动画？
    15.项目的工作流程？
    16.会linux吗？
    17.项目中有无遇到什么兼容性问题，怎么解决的？
    18.自己的优势？
    19.对自己前端的目标？
    20.有无了解过其他相关的竞品？

1.点击网页元素，alert对应的元素标签的名字（考虑兼容性）？
2.写一个正则函数判断是否是email邮箱？
3.用es5实现函数Object.create()方法？
4.跨域的方式有哪些？原理？
5.描述一个url输入到网页加载完毕的过程？
6.对前端的编程习惯？对组件，设计模式等处罚说明？
7.用代码实现多行文本垂直居中？
8.对前端的错误异常时怎么进行数据信息上报的？
9.项目介绍？
10.es6的高级语法？
11.promise和async/await的区别，async/await的原理，generator原理？
12.promise和回调函数的区别？
13.谈谈git的work-flow的方式是如何的？
14.前公司的项目开发流程？
15.项目进程管理跟进工具使用过那些？
16.遇到过哪些比较深刻的坑？
17.怎么进行测试？
18.http请求方式？缓存协议有哪些？
19.之前的面试offer情况？为何拒绝？

1.BFC结构？
2.前端安全？
3.闭包的优缺点？
4.webpack的属性？
5.浮动布局？
6.内存泄漏的排查定位和解决？
7.垃圾回收机制？
8.websocket的实现原理？
9.http状态码301，302的区别，304是什么缓存机制？
10.协商缓存？
11.定时器，setTiemout运行机制？
12.事件循环机制，eventloop的原理？
13.异步：es5，es6，es7分别怎么解决的？
14.js的继承方式有哪些？
15.常用的布局方法？
16.对目前前端生态的看法？
17.事件模型有哪些？dom0和dom2？

1.tcp属于osi的哪一层？
2.对vue的了解？
3.虚拟dom的具体实现？diff算法是怎么样（深度优先，广度优先）？
4.浏览器的内核？
5.get和post的区别？
6.get和post在tcp/udp底层实现方式是否一样？
7.get请求可把请求参数放在request body吗？后台是否可以获取？
8.ios怎么调试？
9.css动画？
10.前端安全的看法？
11.对nodejs的看法，用来解决什么场景下的问题？

1.css选择器优先级，从高到低排序？
2.尽可能实现多行文本垂直居中？
3.用正则实现‘get-element-by-id’的驼峰型写法？
4.如何组织js代码（从组件化，模块化，设计模式，规范等方面阐述）？
5.跨域的方式以及原理。
6.seTimeout，promise， async/await宏任务事件和微任务事件执行顺序？（js的执行机制event loop）？
7.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
oldList = [ 
    {
        id:1, list: [1,2]
    },
    {
        id:2, list: [4,5]
    },
    {
        id: 1, list: [4,5]
    }
], 将id相同的进行合并，得到
newList = [
    {
        id:1, list: [1,2,4,5]
    },
    {
        id:2, list: [4,5]
    }
],尝试使用reduce，get，has，set，map来实现？

前端面试题：https://www.cnblogs.com/sun927/p/5663820.html

1.常用的linux命令和作用？
1).cd:用于切换当前目录，它的参数是要切换到的目录的路径，可以是绝对路径，也可以是相对路径.
2).ls:查看文件与目录的命令
-l ：列出长数据串，包含文件的属性与权限数据等
-a ：列出全部的文件，连同隐藏文件（开头为.的文件）一起列出来（常用）
-d ：仅列出目录本身，而不是列出目录的文件数据
-h ：将文件容量以较易读的方式（GB，kB等）列出来
-R ：连同子目录的内容一起列出（递归列出），等于该目录下的所有文件都会显示出来
3).grep:常用于分析一行的信息，若当中有我们所需要的信息，就将该行显示出来，该命令通常与管道命令一起使用，用于对一些命令的输出进行筛选加工等
4).find：基于查找的功能非常强大的命令
5).cp：用于复制文件，可以把多个文件一次性地复制到一个目录下
6).mv:用于移动文件、目录或更名
7).rm:删除文件或目录
8).ps:用于将某个时间点的进程运行情况选取下来并输出，process之意
9).kill:用于向某个工作（%jobnumber）或者是某个PID（数字）传送一个信号
10).file:用于判断接在file命令后的文件的基本数据
11).tar: 用于对文件进行打包
12).cat: 用于查看文本文件的内容，后接要查看的文件名
13).chmod: 用于改变文件的权限
14).chgrp: 用于改变文件所属用户组
15).chown: 用于改变文件的所有者，与chgrp命令的使用方法相同
16).vim: 用于文本编辑，它接一个或多个文件名作为参数，如果文件存在就打开，如果文件不存在就以该文件名创建一个文件.
17).time: 用于测算一个命令（即程序）的执行时间.
18).mkdir: 用于创建目录。
2.git命令和作用？

3.图片懒加载？
原理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div class="container">
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img1.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img2.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img3.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img4.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img5.png">
  </div>
</div>

//调用
window.onload=checkImgs;
window.onscroll = throttle(checkImgs);

function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考虑向下滚动加载
  //const clientWidth=window.innerWeight;
  return bound.top <= clientHeight + 100;
}

let index = 0;
function checkImgs() {
  const imgs = document.querySelectorAll('.my-photo');
  for (let i = index; i < imgs.length; i++) {
    if (isInSight(imgs[i])) {
      loadImg(imgs[i]);
      index = i;
    }
  }
}

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src;
    el.src = source;
  }
}

function throttle(fn, mustRun = 500) {
  const timer = null;
  let previous = null;
  return function() {
    const now = new Date();
    const context = this;
    const args = arguments;
    if (!previous) {
      previous = now;
    }
    const remaining = now - previous;
    if (mustRun && remaining >= mustRun) {
      fn.apply(context, args);
      previous = now;
    }
  }
}

3.谈谈webpack？
1、打包，把多个文件打包成少数几个
2、转换，把.less .vue等浏览器不能渲染的文件打包成浏览器可以解析的.html,.css,.js 等，把模块转换成静态文件。
3、提升性能，前端功能模块越来越多，webpack可提升性能

  1. 。。。。

4.loader 和 puugin的区别：
主要区别
loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。

plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

5.h5 plus技术和mui技术相关？

mui框架如何实现页面间传值：
通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
通过mui.init()方法创建子页面；
通过mui.init()方法预加载页面；
通过mui.preload()方法预加载页面

6.artTemplate的使用？
编写模板
使用一个type=”text/html”的script标签存放模板：

1
2
3
4
5
6
7
8
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
</ul>
</script>

渲染模板

1
2
3
4
5
6
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

简洁语法
推荐使用，语法简单实用，利于读写。

1
2
3
4
5
6
7
{{if admin}}
        {{include 'admin_content'}}

        {{each list}}
            <div>{{$index}}. {{$value.user}}</div>
        {{/each}}
{{/if}}

查看语法与演示

原生语法

1
2
3
4
5
6
7
<%if (admin){%>
    <%include('admin_content')%>

    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

方法

1
template.helper(name, callback)

添加辅助方法。

7.AMD、CMD、CommonJS的区别？
CommonJS, AMD, CMD都是JS模块化的规范。

CommonJS是服务器端js模块化的规范，NodeJS是这种规范的实现。

AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD，SeaJS 遵循的是 CMD。

参考：https://www.cnblogs.com/lishuxue/p/6000205.html

1.Xhtml和html的区别？
2.doctype的作用？标准模式和兼容模式的区别？
3.js实现对一个数组乱序处理？
4.统计一个字符串每个字符出现的次数，统计最多的是哪个字符？
5.ajax请求中get和post的区别？
6.ajax请求的json数据怎么解析？
7.for , for in , for of的区别？(参考：https://blog.csdn.net/qq_36470686/article/details/82936378)
for表达式一般如下：

1
2
3
for(表达式1;表达式2;表达式3){
    表达式4;
}

执行的顺序为：
1）第一次循环，即初始化循环。
首先执行表达式1（一般为初始化语句），再执行表达式2（一般为条件判断语句）。如果符合，则执行表达式4，最后执行表达式3。否则，停止执行。

2）下次的循环：
首先执行表达式2，判断是否符合表达式2的条件；如果符合，继续执行表达式4，最后执行表达式3。否则停止执行。

for in
表达式一般如下：

1
2
3
for(a in 对象){
   表达式1；
}

此处的a是对象中的key(键名)。

一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行(因为是key，所以直接得到的是属性名)
当使用for in遍历数组时，和遍历对象的行为一样，会遍历数组所有可枚举的属性，所以原型对象上的方法和属性也会被遍历（数组遍历直接得到的是索引，属性直接遍历得到的是属性名）
遍历的顺序可能不是按照实际数组的内部顺序
如果迭代的对象的变量值是null或者undefined, for in不执行循环体，建议在使用for in循环之前，先检查该对象的值是不是null或者undefined
注意：遍历得到的Key都是String类型，不可直接用于数值计算

综上所述：不建议使用for…in遍历数组！

for of
表达式一般如下：

1
2
3
for(a of 对象){
   表达式1；
}

看着和for…in很像，但是此处的a是对象中的value(值)。

for…of 专注于遍历的 value 值的同时，不会发生原型对象，和对象本身的属性被遍历出来的问题。同样是for…in的例子，它不会遍历出meMethod的值。

for…of相比于for…in更适合遍历数组