其他

231 阅读25分钟

http请求

在HTTP1.1规定里8种请求方法,都必须大写的形式存在:

  1. GET:获取资源,可以理解为读取或者下载数据;
  2. HEAD:获取资源的元信息;
  3. POST:向资源提交数据,相当于写入或上传数据;
  4. PUT:类似POST;
  5. DELETE:删除资源;
  6. CONNECT:建立特殊的连接隧道;
  7. OPTIONS:列出课对资源实行的方法;
    • OPTIONS请求 存在的情况:
      1. 跨域请求,非跨域请求不会出现options请求
      2. 自定义请求头
      3. 请求头中的Content-Type是application/x-www-form-urlencoded,multipart/form-data,text/plain之外的格式
  8. TRACE:追踪请求-响应的传输路径。

移动端白屏解决方案

  1. 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面,并将其输出到对应的索引目录。
  2. css文件加载需要时间,可以将css代码前置和使用内联
  3. 首屏无实际的数据内容,等待异步加载数据,在渲染页面,会导致白屏,可以首屏直接同步渲染html,后续滚屏等操作在用异步请求数据和渲染html
  4. 首屏内联js的执行,会阻塞页面渲染,尽量不在首屏的html中放置内联脚本
  5. 在服务端使用模板引擎渲染所有的页面
  6. 减少文件体积,压缩html,js
  7. 使用本地存储处理静态文件

移动端和pc端开发都有哪些不同

  1. PC需要考虑浏览器的兼容性,而移动端考虑的是手机兼容性,及手机分辨率和不同操作系统的差异化
  2. 部分事件处理,移动端多出来触屏事件,缺少hover事件,以及移动端弹出手机键盘的处理
  3. 移动端一般用rem布局
  4. 动画处理上,pc要考虑ie兼容性,所以动画一般用js做,但是在手机端一般用css做动画
  5. 移动端需要注意首屏打开速度,动画帧率等
  6. 移动端有300ms延迟的问题

物理像素0.5像素怎么处理

  1. 设定目标元素的参考位置
  2. 给目标元素添加一个伪元素,并设置绝对定位
  3. 给伪元素添加1px边框
  4. 宽和高都设置为200%
  5. 整个盒模型缩小为0.5
  6. 调整盒模型位置,以左上角为基准,transform-origin:0 0;
<div class="border3">
    <div class="content">伪类设置的边框</div> 
</div>  
.border3{
     position: relative;          
 }
 .border3:before{ 
       content: ''; 
       position: absolute; 
       width: 200%;
       height: 200%;
       border: 1px solid red;
       transform-origin: 0 0;
       transform: scale(0.5, 0.5);
 }

移动端白屏问题,主要因为网络和静态资源

  1. 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面,并将其输出到对应的索引目录。
  2. css文件加载需要时间,可以将css代码前置和使用内联
  3. 首屏无实际的数据内容,等待异步加载数据,在渲染页面,会导致白屏,可以首屏直接同步渲染html,后续滚屏等操作在用异步请求数据和渲染html
  4. 首屏内联js的执行,会阻塞页面渲染,尽量不在首屏的html中放置内联脚本
  5. 在服务端使用模板引擎渲染所有的页面
  6. 减少文件体积,压缩html,js
  7. 使用本地存储处理静态文件

点击事件300ms延迟和点击穿透问题

  • 300ms延迟原因
    • 300ms点击延迟由于移动端会有双击缩放的操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击
  • 解决方案
    • 禁用缩放-mata标签

      <meta name="viewport" content="user-scalable=no">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1">
      
    • 改变默认的视口宽度

      • 移动端浏览器的默认视口宽度不等于谁被浏览器的视窗宽度,而是要比设备的浏览器视窗宽度达,一般为980px
      • 没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。
      <meta name="viewport" content="width=device-width">
      
    • CSS touch-action

      • 这个属性指定了相应元素上能够触发的用户代理(也就是浏览器)的默认行为。如果将该属性值设置为touch-action: none,那么表示在该元素上的操作不会触发用户代理的任何默认行为,就无需进行300ms的延迟判断。
    • 指针事件的polyfill

      • Google 的 Polymer
      • 微软的 HandJS
      • @Rich-Harris 的 Points
    • FastClick

      • 检测到touchend事件的时候,通过dom自定义事件立即触发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉
  • 点击穿透
    • 原因:移动端中,事件执行的顺序是touchstart>touchend>click,但是click会有300ms延迟
    • 解决方案
      • 只用touch,不使用click
      • 设置蒙层消失延迟
      • CSS--pointer-events,让被覆盖的元素短时间内无法触发click
      • 使用fastclick

移动端rem适配方案

  1. 物理像素:设备像素,是显示设备中一个最微小的物理部件
  2. 设备独立像素:也称为密度无关像素,css像素
  3. 设备像素比:dpr,定义了物理像素和设备独立像素的对应关系,dpr=物理像素/设备独立像素
  4. flexible.js
    1. 获取设备的dpr
    2. 调整body标签的fontsize,fontsize=(12*dpr)+'px'
    3. 设置默认字体大小,继承自body
    4. 设置root元素的fontsize=clientWidth/10+'px'
    5. 页面尺寸发生变化时,要重新设置rem大小

混合式开发

  1. jsBridge:前端注入到 webview 的一个全局变量
  2. schema 协议:url 拦截,前端页面与 App 的通信协议,app 内部页面跳转协议

https 与http

  1. http 和 https 的区别
    1. https 更加安全,对搜索引擎更友好,利于 seo,谷歌百度优先索引 https 网页
    2. https 需要用到 ssl 证书,http 不用
    3. https 端口 443,http 端口 80
    4. https 基于传输层,http 基于应用层
    5. https 在浏览器显示绿色安全锁,http 没有显示
    6. https 是在 http 上建立 ssl 加密层,并对传输数据进行加密,是 http 协议的安全版
  2. 作用
    1. 对数据进行加密,并建立一个信息安全通道,来保证传输过程中的数据安全
    2. 对网站服务器进行真实身份认证
  3. http 缺点
    1. 通信使用明文,内容可能被窃听
    2. 无法证明报文的完整性,所以可能遭篡改(没有办法确认发出的请求/响应和接收到的请求/响应是前后相同的)
    3. 不验证通信方的身份,因此有可能遭遇伪装(http 协议中的请求和响应不会对通信方进行确认)
  4. Https 如何解决了上述缺点
    1. http 直接和 tcp 通信,当使用 ssl 是则变成先和 ssl 通信,再由 ssl 和 tcp 通信,所谓 https 就是身披 ssl 协议的 http
    2. tls/ssl 主要依赖于三类基本算法:散列函数,对称加密和非对称加密
      1. 非对称加密实现身份认证和密钥协商
      2. 对称加密采用协商的秘钥对数据加密
      3. 基于散列函数验证信息的完成性
    3. 解决内容可能被窃听的问题
      1. 对称加密
        1. 加密和解密同用一个密钥,加密和解密都会用到密钥,没有密钥就无法解密,任何人只要持有密钥就能解密
      2. 非对称加密
        1. 私有密钥不能被其他任何人知道,二公开密钥可以随意发布
        2. 发送密文的以防使用对方的公开密钥进行加密处理,对方收到被加密的信息后,再使用自己的私有密钥进行解密
          1. 信息传输一对多,服务器只需要维持一个私钥就能够和多个客户端进行加密通信
          2. 缺点
            1. 公钥是公开的,针对私钥加密的信息,黑客可以使用公钥进行解密
            2. 公钥不包含服务器信息,使用非对称加密算法无法确保服务器身份的合法性,服务器发送给客户端的公钥可能在传送过程中被中间人截获并篡改
            3. 在数据加密解密过程需要消耗一定时间,降低了数据传输效率
      3. 对称加密+非对称加密
        1. 在交换密钥环节使用非对称加密,之后建立通信交换报文阶段使用对称加密
        2. 具体做法:发送密文的一方使用对方的公钥进行加密处理“对称的密钥”,然后对方用自己的私钥解密拿来’对称的密钥’,这样可以确保交换的密钥是安全的全体下,使用对称加密方式进行通信
  5. 解决报文可能遭篡改问题-数字签名
    1. 功效
      1. 能去人多消息确实是有发送方签名并发出来的,因为别人假冒不了发送方的签名
      2. 数字签名能确定消息的完整性,证明数据是否未被篡改过
    2. 生成方式:讲一段文本先用 hash 函数生成消息摘要,然后用发送者的私钥加密生成数字签名,与原文一起传送给接受者
  6. 解决通信方身份可能被篡改的问题-数字证书

https 工作流程

  1. client 发起一个 https 请求
  2. server 把事先配置好的公钥证书返回给客户端
  3. client 验证公钥证书
  4. client 使用伪随机数生成器生成加密所使用的对称密钥
  5. server 使用自己的私钥解密这个消息,得到对称密钥,此时 client 和 server 双方否持有相同的对称密钥
  6. server 使用对称密钥加密“a”发送给 client
  7. client 使用对称密钥解密相应的密文,得到’a”
  8. client 再次发起 https 的请求,使用对称你要加密请求的’b’,然后 server 使用对称密钥解密密文,得到’b'

HTTP1.0和HTTP1.1的一些区别

  1. 缓存处理,HTTP1.0中主要使用 Last-Modified,Expires 来做为缓存判断的标准,HTTP1.1则引入了更多的缓存控制策略:ETag,Cache-Control…
  2. 带宽优化及网络连接的使用,HTTP1.1支持断点续传,即返回码是206(Partial Content)
  3. 错误通知的管理,在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除…
  4. Host头处理,在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 Bad Request)
  5. 长连接,HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点

HTTP2.0和HTTP1.X相比的新特性

  1. 新的二进制格式(Binary Format),HTTP1.x的解析是基于文本,基于文本协议的格式解析存在天然缺陷,文本的表现形式有多样性,要做到健壮性考虑的场景必然很多,二进制则不同,只认0和1的组合,基于这种考虑HTTP2.0的协议解析决定采用二进制格式,实现方便且健壮
  2. header压缩,HTTP1.x的header带有大量信息,而且每次都要重复发送,HTTP2.0使用encoder来减少需要传输的header大小,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小
  3. 服务端推送(server push),例如我的网页有一个sytle.css的请求,在客户端收到sytle.css数据的同时,服务端会将sytle.js的文件推送给客户端,当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到,不用再发请求了
// 通过在应用生成HTTP响应头信息中设置Link命令
Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image
  1. 多路复用(MultiPlexing)
- HTTP/1.0  每次请求响应,建立一个TCP连接,用完关闭
- HTTP/1.1 「长连接」 若干个请求排队串行化单线程处理,后面的请求等待前面请求的返回才能获得执行机会,一旦有某请求超时等,后续请求只能被阻塞,毫无办法,也就是人们常说的线头阻塞;
- HTTP/2.0 「多路复用」多个请求可同时在一个连接上并行执行,某个请求任务耗时严重,不会影响到其它连接的正常执行;

一个 url 从输入到展现

url 解析

  1. 地址解析
    • 协议:客户端和服务器之间的数据通信,传输协议就是负责运送这些信息的 http/https/ftp
      • http:超文本传输协议
      • https:安全,ssl 加密(产品涉及支付)
      • ftp:文件上传下载(本地代码上传到服务器)
    • 域名:服务器地址
      • 顶级域名 qq.com
      • 一级域名 www.qq.com
      • 二级域名 sports.qq.com
      • 三级域名 kbs.sports.qq.com
    • 端口号:用来区分服务器上的不同服务 0-64435 之间
    • 请求资源的文件路径
    • 查询字符串:问号参数
    • 片段标识符:HASH 值
  2. 编码
    1. encodeURI /decodeURI:编码整个 url(处理 url 中的中文)
    2. encodeURIComponent/decodeURIComponent:编码 url 中问号传递的信息

缓存检查

  • 缓存位置:内存缓存(memory cache)/硬盘缓存(disk cache)
    1. 打开网页:查找硬盘缓存(disk cache)中是否有匹配,如果有则使用,没有则发送网络请求
    2. 普通刷新 F5:因 tab 没有关闭,内存缓存是可用的,会被优先使用,其次才是硬盘缓存
    3. 强制刷新:浏览器不使用缓存,发送的请求头部均带有 cache-control:no-cache,服务器直接返回 200 和最新内容
    • 资源文件缓存方式:强缓存/协商缓存(服务端做时间标识的存储,客户端不需要做处理)
      1. 强缓存:服务器直接设置 Expires 和 Cache-Control
        • Expires:缓存过期时间,用来指定资源到期时间(http1.0)是具体时间
        • Cache-Control:max-age=2592000 秒,第一次拿到资源后的 30 天内,再次发送请求,读取缓存中的信息(http1.1)
        • 两者同时存在的话,Cache-Control 优先级高于 Expires
        • 过程
          1. 检测缓存信息和缓存标识 Expires 和 Cache-Contro
          2. 有且未过期,客户端直接读取渲染缓存信息
          3. 没有或者已过期,客户端重新向服务器发送新的 http 请求
          4. 返回该请求结果和缓存标识 Expires 和 Cache-Contro
          5. 把请求结果和缓存标识存储到浏览器中
        • html 页面一般不设置强缓存(放置服务器更新文件后,客户端获取的还是本地缓存中的页面,这样页面不能及时更新)
        • css/js/图片设置强缓存
          1. 如果服务器有更新,页面会更新,只要每次有更新 css、js 等,我们在请求的 css、js 后面设置一个时间戳
          2. 基于 webpack,只要资源文件有更新,生成不同文件名字的资源:hash 值
      2. 协商缓存:Last-Modified(1.0)/ETag(1.1),强缓存失效或者没有时,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,html做协商缓存
        • 第一次请求的时候不传递
        • 服务器端返回资源,同时在请求头里返回 last-modified(服务器端当前资源文件最后一次的修改时间)/ETag(根据当前资源的修改时间生成一个标识)
        • 第二次发送请求 if-modified-since(上一次服务器返回的时间)/if-none-match(上一次返回的标识)
        • 服务区端把获取的标识/时间与最新资源的标识/时间作对比,
          1. 如果一样,返回 304,通知客户端读取缓存信息
          2. 不一样,直接缓存最新的资源和标识
      3. 区别
        • 强缓存:本地没有缓存,从服务器拿,本地有缓存,和服务器没有关系
        • 协商缓存:不管有没有缓存,都先像服务器发请求,校验服务器上的资源是否更新,如果没有更新则返回 304,从缓存中获取信息,如果有更新,返回 200,并且把最近的结果和标识缓存到本地
      4. 应用:html不做强缓存缓存,其他的文件类型都是强缓存和协商缓存都做
    • 发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。
    • 发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->过期-->返回200状态码-->客户端如第一次接收该资源一样,记下它的cache-control中的max-age、etag、last-modified等。
    • 请求资源时,把用户本地该资源的 etag 同时带到服务端,服务端和最新资源做对比。如果资源没更改,返回304,浏览器读取本地缓存, 如果资源有更改,返回200,返回最新的资源。
    • 数据缓存(需要客户端手动处理)
      1. 基于ajax从服务器获取最新的数据信息,并将数据存到本地(localstorage/vuex/redux)
      2. 检测本地缓存的数据信息
        • 如果有,对比当前时间和过期时间,如果在未过期则直接从缓存中拿,
        • 如果过期了或者没有缓存信息,则重新发起ajax请求

DNS解析

  • 第一次请求,本地没有DNS缓存,需要一个完整的DNS解析20-120ms
    • 迭代查询
      • 客户端-本地DNS服务器-根域名服务器-本地DNS服务器-顶级域名服务器-本地DNS服务器-全为域名服务器-本地DNS服务器-客户端
  • 第二次请求,基本是直接用上一次DNS解析缓存记录即可
    • 递归查询
      • 客户端-浏览器缓存-本地hosts文件-本地DNS解析器缓存-本地DNS服务器
  • 减少DNS请求次数
    • 一个项目中,尽可能只访问相同的服务器,不要访问过多的服务器和域名,但不现实
      • 服务器拆分优势
        • 资源的合理利用
        • 抗压能力加强
        • 提高Http并发
    • DNS预获取(DNS Prefetch)预获取时可以同时做页面渲染等,以节省时间

TCP三次握手

  • 既要保证数据可靠传输,又要提高传输效率
  • UDP比较快,但是不做校验,不可靠(消息,视频流会用)

数据传输

TCP四次挥手

  • 为什么连接的时候是三次握手,关闭的时候却是四次握手? 服务器端收到客户端的SYN连接请求报文后,可以直接发送SYN+ACK报文
  • 但关闭连接时,当服务器端收到FIN报文时,很可能并不会立即关闭链接,所以只能先回复一个ACK报文,告诉客户端:”你发的FIN报文我收到了”,只有等到服务器端所有的报文都发送完了,我才能发送FIN报文,因此不能一起发送,故需要四步握手。

页面渲染

LocalStorage/sessionStorage/cookie

存储大小

  1. cookie:一般不超过4K(因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识)
  2. sessionStorage:5M或者更大
  3. localStorage:5M或者更大

数据有效期

  1. cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,若设置了时间,cookie就会存放在硬盘里,过期才失效
  2. sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除
  3. localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久清除,因此用作持久数据

作用域

  1. cookie:在所有同源窗口中都是共享的
  2. sessionStorage:在同一个浏览器窗口是共享的(不同浏览器、同一个页面也是不共享的)
  3. localStorage:在所有同源窗口中都是共享的

通信

  1. cookie:始终携带在同源的http请求中,即使不需要,故cookie在浏览器和服务器之间来回传递;如果使用cookie保存过多数据会造成性能问题
  2. sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存
  3. localStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存

易用性

  1. cookie:需要自己进行封装,原生的cookie接口不够友好
  2. sessionStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持
  3. localStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持

应用场景

  1. cookie:判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息等
  2. sessionStorage:敏感账号一次性登录;单页面用的较多(sessionStorage 可以保证打开页面时 sessionStorage 的数据为空)
  3. localStorage:常用于长期登录(判断用户是否已登录),适合长期保存在本地的数据

ssr

  1. 也就是从服务端渲染,将 vue 在客户端把标签渲染成 html 的工作由服务端来完成,然后再把 html 直接返回给客户端
  2. ssr 有这更好的 seo,并且首屏加载速度更快,但是开发条件会受到限制,服务端渲染只支持 beforeCreate 和 created 两个钩子

Babel 运行原理

  1. 解析:接受代码并输出 AST(抽象语法树)
    1. 词法解析
      1. 把字符串形式的代码转换为令牌流(扁平的语法片段数组)
    2. 语法解析
      1. 把令牌流转换成 AST 形式,这个阶段会使用令牌中的信息把他们转换成一个 AST 的表述结构
    3. code(字符串形式代码) -> tokens(令牌流) -> AST(抽象语法树)
  2. 转换
    1. 接收 AST 并对其进行遍历,在此过程中对节点进行添加,更新,移除等操作
    2. babel 提供了 traverse 方法维护 AST 树的整体状态,参数是原始 AST 和定义的转换规则,返回结果是转换后的 AST
  3. 生成
    1. 把最终的 AST 转换成字符串形式 的代码,同时会创建源码映射
    2. 深度优先遍历整个 AST,然后构建可以表示转换后代码的字符串
    3. 使用 generator 将修改后的 AST 转换成代码

一个域名能同时发起几个请求?为什么

http 网络层前端性能优化

利用缓存

  1. 对于静态资源文件实现强缓存和协商缓存
    1. 文件有更新,如何保证及时刷新?
      • 文件后添加时间戳
  2. 对于不经常更新的接口数据采用本地存储做数据缓存
    1. cookie / localStorage / vuex|redux 区别?
      1. cookie文件小,需要服务端参与
      2. localStorage永久保存
      3. vuex|redux页面关闭缓存消失

DNS优化

  1. 分服务器部署,增加HTTP并发性
  2. DNS Prefetch

TCP的三次握手和四次挥手

  1. Connection:keep-alive

数据传输

  1. 减少数据传输的大小
    1. 内容或者数据压缩(webpack等)
    2. 服务器端一定要开启GZIP压缩(一般能压缩60%左右)
    3. 大批量数据分批次请求(例如:下拉刷新或者分页,保证首次加载请求数据少)
  2. 减少HTTP请求的次数
    1. 资源文件合并处理
    2. 字体图标
    3. 雪碧图 CSS-Sprit
    4. 图片的BASE64 ?会遇到什么问题?

CDN服务器“地域分布式”

采用HTTP2.0

网络安全相关XSS和SCRF

XSS

  1. 如何产生:黑客在用户浏览器中插入一点恶意js脚本,窃取隐私信息,冒充用户身份进行操作
  2. 类型
    1. 反射型xss(非持久型)
      1. 恶意js脚本将代码发送给服务器,服务器再将这部分返回给用户,随后脚本执行,一般发生在前后端不分离的项目中
    2. 局域DOM的xss
      1. 不需要经过服务器,恶意js去改变html的
    3. 存储型xss(持久型)
      1. 黑客娘恶意js代码长期保存在服务端数据库中,用户一旦访问相关页面,脚本会被执行,常见于搜索,微博等
  3. 区别
    1. 反射型的恶意j脚本存在url里,存储型存在数据库里
    2. DOM型有浏览器完成,属于前端js自身的漏洞,其他两种属于服务器安全漏洞
  4. 可以做什么
    1. 盗取用户cookie
    2. 未授权操作
    3. 修改DOM
    4. 浮窗广告
    5. ...
  5. 如何防护
    1. 获取用户输入值的时候进行验证
    2. 将html元素内容,属性,url参数等进行编码
    3. 定义域名白名单
    4. 设置cookie的httponly属性

CSRF

  1. 定义:跨站请求伪造,黑客引诱用户打开黑客网站,利用用户的登陆状态发起跨域请求
  2. 如何实现:利用服务器漏洞和用户的登陆状态来实施攻击,无法彻底防止
  3. 如何防范
    1. 设置cookie的sameSite属性为strict
    2. 服务器验证请求来源站点
    3. 使用csrf token,服务端随机生死返回给浏览器的token
    4. 加入二次验证

flutter和reactNative区别

怎么在一个域名下把很多跨平台项目整合起来

webpack 新版本

loader和plugin的区别

loader

  1. 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译,压缩等,最终一起打包到指定的文件中
    1. 处理一个文件可以使用多个loader,loa的人的执行顺序和配置中的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行
    2. 第一个执行的loader接收源文件内容作为参数,其他loader接收前一个执行的loader的返回值作为参数,最后执行的loader会返回此模板的js源码

plugin

  1. 在webpack运行的生命周期中会广播出许多时间,plugin可以监听这些事件,在合适的时机通过webpack提供的api改变输出结果

loader和plugin区别

  1. loader是一个转换器,将a文件编译成b文件,这里操作的是文件,是单纯的文件转换过程
  2. plugin是一个扩展器,它丰富了webpack本身,针对的是loader结束后,webpack打包的整个过程,并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务

如何优化webpack的构建速度

  1. 使用高版本的webpack和node
  2. 多进程、多实例构建
  3. 压缩代码
  4. 图片压缩
  5. 缩小打包作用域
  6. 提取页面公共资源
  7. 使用DLLplugin进行分包
  8. 利用缓存提升二次构件速度
    1. babel-loader
    2. cache-loader
  9. tree shaking

跨域(非同源策略请求)

  1. 同源策略限制以下几种行为
    1. Cookie、LocalStorage 和 IndexDB 无法读取
    2. DOM 和 Js对象无法获得
    3. AJAX 请求不能发送
  2. 解决方法
    1. 通过jsonp跨域
    2. document.domain + iframe跨域
    3. location.hash + iframe
    4. window.name + iframe跨域
    5. postMessage跨域
    6. 跨域资源共享(CORS)
    7. nginx代理跨域
    8. nodejs中间件代理跨域
    9. WebSocket协议跨域

跨域传输

多语言是怎么做的

vue-i18n、react-i18n

遇到的问题

  1. 之前做混合 app。在子页 input focus 在输入东西 直接点的前端写的左侧返回按钮 安卓机的键盘手不起来 我们是让安卓写了一个方法 我们子页面销毁的时候 调取一下 就把键盘收起来了
  2. 裁剪图片 blob 上传问题,裁剪完成按要求尺寸生成的土片转为 bolb 对象上传 服务端查询不到 filename,查原因 blob 不能指定 filename 所以转给 File 对象即可设置 filename
  3. mouesedown mouseup 比 click 先执行
  4. 点击穿透问题,添加mate标签,禁用缩放,用fastclick解决