http请求
在HTTP1.1规定里8种请求方法,都必须大写的形式存在:
- GET:获取资源,可以理解为读取或者下载数据;
- HEAD:获取资源的元信息;
- POST:向资源提交数据,相当于写入或上传数据;
- PUT:类似POST;
- DELETE:删除资源;
- CONNECT:建立特殊的连接隧道;
- OPTIONS:列出课对资源实行的方法;
- OPTIONS请求 存在的情况:
- 跨域请求,非跨域请求不会出现options请求
- 自定义请求头
- 请求头中的Content-Type是application/x-www-form-urlencoded,multipart/form-data,text/plain之外的格式
- OPTIONS请求 存在的情况:
- TRACE:追踪请求-响应的传输路径。
移动端白屏解决方案
- 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面,并将其输出到对应的索引目录。
- css文件加载需要时间,可以将css代码前置和使用内联
- 首屏无实际的数据内容,等待异步加载数据,在渲染页面,会导致白屏,可以首屏直接同步渲染html,后续滚屏等操作在用异步请求数据和渲染html
- 首屏内联js的执行,会阻塞页面渲染,尽量不在首屏的html中放置内联脚本
- 在服务端使用模板引擎渲染所有的页面
- 减少文件体积,压缩html,js
- 使用本地存储处理静态文件
移动端和pc端开发都有哪些不同
- PC需要考虑浏览器的兼容性,而移动端考虑的是手机兼容性,及手机分辨率和不同操作系统的差异化
- 部分事件处理,移动端多出来触屏事件,缺少hover事件,以及移动端弹出手机键盘的处理
- 移动端一般用rem布局
- 动画处理上,pc要考虑ie兼容性,所以动画一般用js做,但是在手机端一般用css做动画
- 移动端需要注意首屏打开速度,动画帧率等
- 移动端有300ms延迟的问题
物理像素0.5像素怎么处理
- 设定目标元素的参考位置
- 给目标元素添加一个伪元素,并设置绝对定位
- 给伪元素添加1px边框
- 宽和高都设置为200%
- 整个盒模型缩小为0.5
- 调整盒模型位置,以左上角为基准,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);
}
移动端白屏问题,主要因为网络和静态资源
- 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面,并将其输出到对应的索引目录。
- css文件加载需要时间,可以将css代码前置和使用内联
- 首屏无实际的数据内容,等待异步加载数据,在渲染页面,会导致白屏,可以首屏直接同步渲染html,后续滚屏等操作在用异步请求数据和渲染html
- 首屏内联js的执行,会阻塞页面渲染,尽量不在首屏的html中放置内联脚本
- 在服务端使用模板引擎渲染所有的页面
- 减少文件体积,压缩html,js
- 使用本地存储处理静态文件
点击事件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适配方案
- 物理像素:设备像素,是显示设备中一个最微小的物理部件
- 设备独立像素:也称为密度无关像素,css像素
- 设备像素比:dpr,定义了物理像素和设备独立像素的对应关系,dpr=物理像素/设备独立像素
- flexible.js
- 获取设备的dpr
- 调整body标签的fontsize,fontsize=(12*dpr)+'px'
- 设置默认字体大小,继承自body
- 设置root元素的fontsize=clientWidth/10+'px'
- 页面尺寸发生变化时,要重新设置rem大小
混合式开发
- jsBridge:前端注入到 webview 的一个全局变量
- schema 协议:url 拦截,前端页面与 App 的通信协议,app 内部页面跳转协议
https 与http
- http 和 https 的区别
- https 更加安全,对搜索引擎更友好,利于 seo,谷歌百度优先索引 https 网页
- https 需要用到 ssl 证书,http 不用
- https 端口 443,http 端口 80
- https 基于传输层,http 基于应用层
- https 在浏览器显示绿色安全锁,http 没有显示
- https 是在 http 上建立 ssl 加密层,并对传输数据进行加密,是 http 协议的安全版
- 作用
- 对数据进行加密,并建立一个信息安全通道,来保证传输过程中的数据安全
- 对网站服务器进行真实身份认证
- http 缺点
- 通信使用明文,内容可能被窃听
- 无法证明报文的完整性,所以可能遭篡改(没有办法确认发出的请求/响应和接收到的请求/响应是前后相同的)
- 不验证通信方的身份,因此有可能遭遇伪装(http 协议中的请求和响应不会对通信方进行确认)
- Https 如何解决了上述缺点
- http 直接和 tcp 通信,当使用 ssl 是则变成先和 ssl 通信,再由 ssl 和 tcp 通信,所谓 https 就是身披 ssl 协议的 http
- tls/ssl 主要依赖于三类基本算法:散列函数,对称加密和非对称加密
- 非对称加密实现身份认证和密钥协商
- 对称加密采用协商的秘钥对数据加密
- 基于散列函数验证信息的完成性
- 解决内容可能被窃听的问题
- 对称加密
- 加密和解密同用一个密钥,加密和解密都会用到密钥,没有密钥就无法解密,任何人只要持有密钥就能解密
- 非对称加密
- 私有密钥不能被其他任何人知道,二公开密钥可以随意发布
- 发送密文的以防使用对方的公开密钥进行加密处理,对方收到被加密的信息后,再使用自己的私有密钥进行解密
- 信息传输一对多,服务器只需要维持一个私钥就能够和多个客户端进行加密通信
- 缺点
- 公钥是公开的,针对私钥加密的信息,黑客可以使用公钥进行解密
- 公钥不包含服务器信息,使用非对称加密算法无法确保服务器身份的合法性,服务器发送给客户端的公钥可能在传送过程中被中间人截获并篡改
- 在数据加密解密过程需要消耗一定时间,降低了数据传输效率
- 对称加密+非对称加密
- 在交换密钥环节使用非对称加密,之后建立通信交换报文阶段使用对称加密
- 具体做法:发送密文的一方使用对方的公钥进行加密处理“对称的密钥”,然后对方用自己的私钥解密拿来’对称的密钥’,这样可以确保交换的密钥是安全的全体下,使用对称加密方式进行通信
- 对称加密
- 解决报文可能遭篡改问题-数字签名
- 功效
- 能去人多消息确实是有发送方签名并发出来的,因为别人假冒不了发送方的签名
- 数字签名能确定消息的完整性,证明数据是否未被篡改过
- 生成方式:讲一段文本先用 hash 函数生成消息摘要,然后用发送者的私钥加密生成数字签名,与原文一起传送给接受者
- 功效
- 解决通信方身份可能被篡改的问题-数字证书
https 工作流程
- client 发起一个 https 请求
- server 把事先配置好的公钥证书返回给客户端
- client 验证公钥证书
- client 使用伪随机数生成器生成加密所使用的对称密钥
- server 使用自己的私钥解密这个消息,得到对称密钥,此时 client 和 server 双方否持有相同的对称密钥
- server 使用对称密钥加密“a”发送给 client
- client 使用对称密钥解密相应的密文,得到’a”
- client 再次发起 https 的请求,使用对称你要加密请求的’b’,然后 server 使用对称密钥解密密文,得到’b'
HTTP1.0和HTTP1.1的一些区别
- 缓存处理,HTTP1.0中主要使用 Last-Modified,Expires 来做为缓存判断的标准,HTTP1.1则引入了更多的缓存控制策略:ETag,Cache-Control…
- 带宽优化及网络连接的使用,HTTP1.1支持断点续传,即返回码是206(Partial Content)
- 错误通知的管理,在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除…
- Host头处理,在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 Bad Request)
- 长连接,HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点
HTTP2.0和HTTP1.X相比的新特性
- 新的二进制格式(Binary Format),HTTP1.x的解析是基于文本,基于文本协议的格式解析存在天然缺陷,文本的表现形式有多样性,要做到健壮性考虑的场景必然很多,二进制则不同,只认0和1的组合,基于这种考虑HTTP2.0的协议解析决定采用二进制格式,实现方便且健壮
- header压缩,HTTP1.x的header带有大量信息,而且每次都要重复发送,HTTP2.0使用encoder来减少需要传输的header大小,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小
- 服务端推送(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
- 多路复用(MultiPlexing)
- HTTP/1.0 每次请求响应,建立一个TCP连接,用完关闭
- HTTP/1.1 「长连接」 若干个请求排队串行化单线程处理,后面的请求等待前面请求的返回才能获得执行机会,一旦有某请求超时等,后续请求只能被阻塞,毫无办法,也就是人们常说的线头阻塞;
- HTTP/2.0 「多路复用」多个请求可同时在一个连接上并行执行,某个请求任务耗时严重,不会影响到其它连接的正常执行;
一个 url 从输入到展现
url 解析
- 地址解析
- 协议:客户端和服务器之间的数据通信,传输协议就是负责运送这些信息的 http/https/ftp
- http:超文本传输协议
- https:安全,ssl 加密(产品涉及支付)
- ftp:文件上传下载(本地代码上传到服务器)
- 域名:服务器地址
- 顶级域名 qq.com
- 一级域名 www.qq.com
- 二级域名 sports.qq.com
- 三级域名 kbs.sports.qq.com
- 端口号:用来区分服务器上的不同服务 0-64435 之间
- 请求资源的文件路径
- 查询字符串:问号参数
- 片段标识符:HASH 值
- 协议:客户端和服务器之间的数据通信,传输协议就是负责运送这些信息的 http/https/ftp
- 编码
- encodeURI /decodeURI:编码整个 url(处理 url 中的中文)
- encodeURIComponent/decodeURIComponent:编码 url 中问号传递的信息
缓存检查
- 缓存位置:内存缓存(memory cache)/硬盘缓存(disk cache)
- 打开网页:查找硬盘缓存(disk cache)中是否有匹配,如果有则使用,没有则发送网络请求
- 普通刷新 F5:因 tab 没有关闭,内存缓存是可用的,会被优先使用,其次才是硬盘缓存
- 强制刷新:浏览器不使用缓存,发送的请求头部均带有 cache-control:no-cache,服务器直接返回 200 和最新内容
- 资源文件缓存方式:强缓存/协商缓存(服务端做时间标识的存储,客户端不需要做处理)
- 强缓存:服务器直接设置 Expires 和 Cache-Control
- Expires:缓存过期时间,用来指定资源到期时间(http1.0)是具体时间
- Cache-Control:max-age=2592000 秒,第一次拿到资源后的 30 天内,再次发送请求,读取缓存中的信息(http1.1)
- 两者同时存在的话,Cache-Control 优先级高于 Expires
- 过程
- 检测缓存信息和缓存标识 Expires 和 Cache-Contro
- 有且未过期,客户端直接读取渲染缓存信息
- 没有或者已过期,客户端重新向服务器发送新的 http 请求
- 返回该请求结果和缓存标识 Expires 和 Cache-Contro
- 把请求结果和缓存标识存储到浏览器中
- html 页面一般不设置强缓存(放置服务器更新文件后,客户端获取的还是本地缓存中的页面,这样页面不能及时更新)
- css/js/图片设置强缓存
- 如果服务器有更新,页面会更新,只要每次有更新 css、js 等,我们在请求的 css、js 后面设置一个时间戳
- 基于 webpack,只要资源文件有更新,生成不同文件名字的资源:hash 值
- 协商缓存:Last-Modified(1.0)/ETag(1.1),强缓存失效或者没有时,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,html做协商缓存
- 第一次请求的时候不传递
- 服务器端返回资源,同时在请求头里返回 last-modified(服务器端当前资源文件最后一次的修改时间)/ETag(根据当前资源的修改时间生成一个标识)
- 第二次发送请求 if-modified-since(上一次服务器返回的时间)/if-none-match(上一次返回的标识)
- 服务区端把获取的标识/时间与最新资源的标识/时间作对比,
- 如果一样,返回 304,通知客户端读取缓存信息
- 不一样,直接缓存最新的资源和标识
- 区别
- 强缓存:本地没有缓存,从服务器拿,本地有缓存,和服务器没有关系
- 协商缓存:不管有没有缓存,都先像服务器发请求,校验服务器上的资源是否更新,如果没有更新则返回 304,从缓存中获取信息,如果有更新,返回 200,并且把最近的结果和标识缓存到本地
- 应用:html不做强缓存缓存,其他的文件类型都是强缓存和协商缓存都做
- 强缓存:服务器直接设置 Expires 和 Cache-Control
- 发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。
- 发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->过期-->返回200状态码-->客户端如第一次接收该资源一样,记下它的cache-control中的max-age、etag、last-modified等。
- 请求资源时,把用户本地该资源的 etag 同时带到服务端,服务端和最新资源做对比。如果资源没更改,返回304,浏览器读取本地缓存, 如果资源有更改,返回200,返回最新的资源。
- 数据缓存(需要客户端手动处理)
- 基于ajax从服务器获取最新的数据信息,并将数据存到本地(localstorage/vuex/redux)
- 检测本地缓存的数据信息
- 如果有,对比当前时间和过期时间,如果在未过期则直接从缓存中拿,
- 如果过期了或者没有缓存信息,则重新发起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
存储大小
- cookie:一般不超过4K(因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识)
- sessionStorage:5M或者更大
- localStorage:5M或者更大
数据有效期
- cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,若设置了时间,cookie就会存放在硬盘里,过期才失效
- sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除
- localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久清除,因此用作持久数据
作用域
- cookie:在所有同源窗口中都是共享的
- sessionStorage:在同一个浏览器窗口是共享的(不同浏览器、同一个页面也是不共享的)
- localStorage:在所有同源窗口中都是共享的
通信
- cookie:始终携带在同源的http请求中,即使不需要,故cookie在浏览器和服务器之间来回传递;如果使用cookie保存过多数据会造成性能问题
- sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存
- localStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存
易用性
- cookie:需要自己进行封装,原生的cookie接口不够友好
- sessionStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持
- localStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持
应用场景
- cookie:判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息等
- sessionStorage:敏感账号一次性登录;单页面用的较多(sessionStorage 可以保证打开页面时 sessionStorage 的数据为空)
- localStorage:常用于长期登录(判断用户是否已登录),适合长期保存在本地的数据
ssr
- 也就是从服务端渲染,将 vue 在客户端把标签渲染成 html 的工作由服务端来完成,然后再把 html 直接返回给客户端
- ssr 有这更好的 seo,并且首屏加载速度更快,但是开发条件会受到限制,服务端渲染只支持 beforeCreate 和 created 两个钩子
Babel 运行原理
- 解析:接受代码并输出 AST(抽象语法树)
- 词法解析
- 把字符串形式的代码转换为令牌流(扁平的语法片段数组)
- 语法解析
- 把令牌流转换成 AST 形式,这个阶段会使用令牌中的信息把他们转换成一个 AST 的表述结构
- code(字符串形式代码) -> tokens(令牌流) -> AST(抽象语法树)
- 词法解析
- 转换
- 接收 AST 并对其进行遍历,在此过程中对节点进行添加,更新,移除等操作
- babel 提供了 traverse 方法维护 AST 树的整体状态,参数是原始 AST 和定义的转换规则,返回结果是转换后的 AST
- 生成
- 把最终的 AST 转换成字符串形式 的代码,同时会创建源码映射
- 深度优先遍历整个 AST,然后构建可以表示转换后代码的字符串
- 使用 generator 将修改后的 AST 转换成代码
一个域名能同时发起几个请求?为什么
http 网络层前端性能优化
利用缓存
- 对于静态资源文件实现强缓存和协商缓存
- 文件有更新,如何保证及时刷新?
- 文件后添加时间戳
- 文件有更新,如何保证及时刷新?
- 对于不经常更新的接口数据采用本地存储做数据缓存
- cookie / localStorage / vuex|redux 区别?
- cookie文件小,需要服务端参与
- localStorage永久保存
- vuex|redux页面关闭缓存消失
- cookie / localStorage / vuex|redux 区别?
DNS优化
- 分服务器部署,增加HTTP并发性
- DNS Prefetch
TCP的三次握手和四次挥手
- Connection:keep-alive
数据传输
- 减少数据传输的大小
- 内容或者数据压缩(webpack等)
- 服务器端一定要开启GZIP压缩(一般能压缩60%左右)
- 大批量数据分批次请求(例如:下拉刷新或者分页,保证首次加载请求数据少)
- 减少HTTP请求的次数
- 资源文件合并处理
- 字体图标
- 雪碧图 CSS-Sprit
- 图片的BASE64 ?会遇到什么问题?
CDN服务器“地域分布式”
采用HTTP2.0
网络安全相关XSS和SCRF
XSS
- 如何产生:黑客在用户浏览器中插入一点恶意js脚本,窃取隐私信息,冒充用户身份进行操作
- 类型
- 反射型xss(非持久型)
- 恶意js脚本将代码发送给服务器,服务器再将这部分返回给用户,随后脚本执行,一般发生在前后端不分离的项目中
- 局域DOM的xss
- 不需要经过服务器,恶意js去改变html的
- 存储型xss(持久型)
- 黑客娘恶意js代码长期保存在服务端数据库中,用户一旦访问相关页面,脚本会被执行,常见于搜索,微博等
- 反射型xss(非持久型)
- 区别
- 反射型的恶意j脚本存在url里,存储型存在数据库里
- DOM型有浏览器完成,属于前端js自身的漏洞,其他两种属于服务器安全漏洞
- 可以做什么
- 盗取用户cookie
- 未授权操作
- 修改DOM
- 浮窗广告
- ...
- 如何防护
- 获取用户输入值的时候进行验证
- 将html元素内容,属性,url参数等进行编码
- 定义域名白名单
- 设置cookie的httponly属性
CSRF
- 定义:跨站请求伪造,黑客引诱用户打开黑客网站,利用用户的登陆状态发起跨域请求
- 如何实现:利用服务器漏洞和用户的登陆状态来实施攻击,无法彻底防止
- 如何防范
- 设置cookie的sameSite属性为strict
- 服务器验证请求来源站点
- 使用csrf token,服务端随机生死返回给浏览器的token
- 加入二次验证
flutter和reactNative区别
怎么在一个域名下把很多跨平台项目整合起来
webpack 新版本
loader和plugin的区别
loader
- 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译,压缩等,最终一起打包到指定的文件中
- 处理一个文件可以使用多个loader,loa的人的执行顺序和配置中的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行
- 第一个执行的loader接收源文件内容作为参数,其他loader接收前一个执行的loader的返回值作为参数,最后执行的loader会返回此模板的js源码
plugin
- 在webpack运行的生命周期中会广播出许多时间,plugin可以监听这些事件,在合适的时机通过webpack提供的api改变输出结果
loader和plugin区别
- loader是一个转换器,将a文件编译成b文件,这里操作的是文件,是单纯的文件转换过程
- plugin是一个扩展器,它丰富了webpack本身,针对的是loader结束后,webpack打包的整个过程,并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务
如何优化webpack的构建速度
- 使用高版本的webpack和node
- 多进程、多实例构建
- 压缩代码
- 图片压缩
- 缩小打包作用域
- 提取页面公共资源
- 使用DLLplugin进行分包
- 利用缓存提升二次构件速度
- babel-loader
- cache-loader
- tree shaking
跨域(非同源策略请求)
- 同源策略限制以下几种行为
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
- 解决方法
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe跨域
- postMessage跨域
- 跨域资源共享(CORS)
- nginx代理跨域
- nodejs中间件代理跨域
- WebSocket协议跨域
跨域传输
多语言是怎么做的
vue-i18n、react-i18n
遇到的问题
- 之前做混合 app。在子页 input focus 在输入东西 直接点的前端写的左侧返回按钮 安卓机的键盘手不起来 我们是让安卓写了一个方法 我们子页面销毁的时候 调取一下 就把键盘收起来了
- 裁剪图片 blob 上传问题,裁剪完成按要求尺寸生成的土片转为 bolb 对象上传 服务端查询不到 filename,查原因 blob 不能指定 filename 所以转给 File 对象即可设置 filename
- mouesedown mouseup 比 click 先执行
- 点击穿透问题,添加mate标签,禁用缩放,用fastclick解决