前端技术面——（js基础二）

1、gulp和webpack的区别

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

PS：简单说就一个Task Runner

webpack

webpack是前端资源模块化管理工具和打包工具。可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等需要时再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

PS：webpack is a module bundle

两者区别

gulp是侧重于前端开发的整个过程的控制管理。着重于控制流程。例如自动刷新页面，雪碧图，压缩js,css,编译less,检查语法等。
webpack侧重于模块打包。把开发中所有资源都看做模块。webpack是通过loader(加载器)和plugins（插件）对资源进行处理。是模块化方案。不管是AMD/CMD/ES6风格的模块化，都能编译成浏览器认识的js。

2、XSS和CSRF

XSS：跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
CSRF：跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

XSS：通过客户端脚本语言（最常见如：JavaScript）在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入，如果这个代码内容有请求外部服务器，那么就叫做XSS！
CSRF：又称XSRF，冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。

XSS和CSRF攻击的防御

防御XSS攻击
1，对用户表单输入的数据进行过滤，对javascript代码进行转义，然后再存入数据库；
2，在信息的展示页面，也要进行转义，防止javascript在页面上执行。
防御CSRF
1，所有需要用户登录之后才能执行的操作属于重要操作，这些操作传递参数应该使用post方式，更加安全；
2，为防止跨站请求伪造，我们在某次请求的时候都要带上一个csrf_token参数，用于标识请求来源是否合法，csrf_token参数由系统生成，存储在SESSION中。

4、网站优化之尽量避免重定向(301/302)

就是当用户浏览器或搜索引擎访问某个旧的网址时，服务器告诉浏览器或搜索引擎，「该网页已经搬家了，新家的地址是……，请使用新地址来访问该网页」
HTTP重定向又分为永久重定向(HTTP状态码为301)和临时重定向(HTTP状态码为302)。永久重定向就表示该网址已经搬到到一个永久居住的「新家」，临时重定向就表示该网址搬迁到了一个临时居住的「公寓」
在某些情况下，我们可能需要将站点中的某个文件移动到一个新的位置或更改该文件的名称。此时，用户可能仍然会输入以前收藏的网址来访问该网页文件，因此，我们需要尽量保证以前的网址和新的网址都能够访问到最新的网页内容。

5、高度不固定的行内块级元素垂直居中

  .box1{display: table-cell;vertical-align: middle;text-align: center;        }
复制代码

  .box6 span{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;}
复制代码

vertical-align属性只对行内元素有效，对块内元素无效！

链接

6、如何自定义一个promise

7、怎么选型Angular和Vue

9、ayanc和await

10、模块化和commonJS的区别

11、移动端自适应

12、pwa，小程序

13、谈谈This对象的理解

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

14、“use strict”;是什么意思 ? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：

优点：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。
这时这些本来是严格模式的文件，被merge后，这个就合并到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

15、new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

16、一个页面从输入 URL到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载文档树建立，根据标记请求所需指定MIME类型的文件文件显示

{浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）}

3、angular跨控制器传递参数

1、rootScope
原理：所有的应用都有一个rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用
2、用地址Url传值——用$location获得地址栏里的参数
3、通过事件的方式
首先介绍一下angular中的事件广播：
- $on(name,handler) 注册一个事件处理函数，该函数在特定的事件被当前作用域收到（从父级或者子级作用域）时将被调用。
- $emit(name,args) 向当前父作用域发送一个事件，直至根作用域。
- $broadcast(name,args) 向当前作用域下的子作用域发送一个事件。
4.通过服务
在angular中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。