‘壹’ 如何处理前端js跨域问题
前端跨域的解决方法非常的多，简单的给你介绍一下吧。
iframe解决跨域，这种方法也比较常见
JSONP解决跨域，简单，易上手
postMessage解决跨域，使用了比较新H5 API，所以存在一定的兼容问题；
服务器代由访问，方法对前端影响不大，但是后台相对会麻烦很多。
希望对您有帮助吧~~
‘贰’ 语音识别的前端处理
前端处理是指在特征提取之前，先对原始语音进行处理，部分消除噪声和不同说话人带来的影响，使处理后的信号更能反映语音的本质特征。最常用的前端处理有端点检测和语音增强。端点检测是指在语音信号中将语音和非语音信号时段区分开来，准确地确定出语音信号的起始点。经过端点检测后，后续处理就可以只对语音信号进行，这对提高模型的精确度和识别正确率有重要作用。语音增强的主要任务就是消除环境噪声对语音的影响。目前通用的方法是采用维纳滤波，该方法在噪声较大的情况下效果好于其它滤波器。
‘叁’ 什么是前端处理机
前端处理机：前端处理机一般是小型或微型机，专门为大型主干计算机处理数据通信控制功能。前端处理机能够控制对网络的存取并允许注册过的用户才能使用系统；对信息指定优先权；登记所有的数据通信活动；统记全部网络活动；在网络链路间路由信息，大大释放了大型主干计算机的数据通信控制功能，使主机能从事其它信息处理任务。
lynn发表于2005-6-8 11:47:00
‘肆’ 几个有效的前端数据处理的方法
一、JSON对象过滤数据（处理复杂数据时可以直接在内部过滤掉）
封装方法：
function getTargetObject(targetObject, propsArray){if(typeof(targetObject) !=="object"|| !Array.isArray(propsArray)) {thrownewError("参数格式不正确"); }constresult = {};Object.keys(targetObject).filter(key=>propsArray.includes(key)).forEach(key=>{ result[key] = targetObject[key]; })returnresult;}
使用方法：
let arr = {a: '1', b:'2', c: '3'}
getTargetObject(arr, ['a', 'b'])
引用网站： https://segmentfault.com/q/1010000016133960/a-1020000016134570
二、数组切割（当后端传来数据过多的时候，将数据切成几个等分，用户下拉的时候再展示）
* 将一个数组分成几个同等长度的数组 * array[分割的原数组] * size[每个子数组的长度]
*/functionsliceArray(array, size) {
varresult = [];
for(varx = 0; x < Math.ceil(array.length / size); x++) {
varstart = x * size;
varend = start + size;
result.push(array.slice(start, end));
} returnresult }
引用网站： https://..com/question/941679549069381612.html?fr=iks&word=js%CA%FD%D7%E9%C7%D0%B7%D6&ie=gbk
三、数据过滤（使用JSON.stringify方法）
数据： persons: [
{apple: '苹果'},
{watermelon: '西瓜'},
{lemon: '柠檬'},
{Blueberry: '蓝莓'},
{orange: '橙子'}],
方法： handChange() {
let oneFruits = JSON.stringify(this.persons, function (inx, ite) {
if (inx === 'watermelon' || inx === 'orange') {
return undefined
} else {
return ite } })
this.persons = JSON.parse(oneFruits) }
结果：
四、通过$set给数据注入值并更新视图（解决在vue中新增数据不更新视图的问题）
数据： persons: [
{id: '1',name: '苹果'},
{id: '2',name: '西瓜'},
{id: '3',name: '柠檬'},
{id: '4',name: '蓝莓'} ]
方法： handChange() {
let oneFruits = JSON.parse(JSON.stringify(this.persons[0]))
let twoFruits = JSON.parse(JSON.stringify(this.persons[1]))
let newFruits = {id: '5', name: '葡萄'}
console.log(twoFruits)
this.$set(this.persons, 1, oneFruits) // 将西瓜的位置放上苹果
this.$set(this.persons, 0, twoFruits) // 将苹果的位置方式西瓜
this.$set(this.persons, 4, newFruits) // 添加葡萄并更新视图
console.log(this.persons) }
结果：
‘伍’ 前端如果有成千上万的页面该如何处理
一、图片处理
1. 图片：大小的控制与使用
以淘宝为例，你搜索的所有产品的列表页面，每个产品都有一个概略图（小图），
点开一个产品的页面可以看到产品展示图（中图），点击图片后可以看到原始图（大图），如果上面提到的三个页面都用用户上传的原始图，仅用控制显示大小，页面性能如何，可想而知，用PC机还好，如果用户用移动设备加3G网络访问，5分钟也打不页面，就是打开了，流量也用完了。
所以我们说为你的网站针对不同的情况不同的页面，采用不同的图像文件，当然屏幕分辨率也要考虑进去，如果有人用iphone打开和ipad打开，就不需要显示像PC机上那么大的图片了，只要适应设备就可以了，那你可能要问怎么做。
通过CSS Media Querises,可以轻松做到，你可以访问http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 压缩
传送图像的时候单单控制适当的尺寸往往是不够的。不少文件格式在不失真的前提下可以被压缩很多。有一类应用程序可以达到这个效果。比如Photoshop有个很好的功能叫做Save for Web and Devices，还有我个人觉得多用PNG是个可以考虑的方案
3. Sprite
增加应用程序性能的方法之一，是减少到服务器的请求数。每一个新图像代表一个请求数。有一个办法是将几个图片合并成一个，合并之后的图像叫做一个sprite，这个功能在淘宝你也会发现，在CSS中改变背景层的位置，就能准确的把特定部分的图像显示出来。比如Twitter Bootstrap利用sprites来制作内部图标，访问http://getbootstrap.com/2.3.2/ 你会了解更多
在CSS中，你可以参照以下方式，显示你喜欢的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速缓存
浏览器超高速缓存十分好用。尽管有时在开发过程中会导致一些非常有趣的情况，但它确实有助于提高你的网站的性能。所有浏览器的超高速缓存下来的内容包括图片、JavaScript或者CSS。有几种方法可以控制缓存，建议你阅读相关文章。
5. 预读取
HTML 5有一个很好的功能叫做预读取，它让浏览器提前下载你马上需要用到的资源：
<link rel="prefetch" href="/images/background.jpg">
6. 数据URI方案/内联图像
几年前我曾开发了一个简单的网页，只包含一个HTML文件夹，但当然里面应该还包括一些我需要的图像。数据URI方案帮助我解决了问题。我们的想法是将图像转换成一个base64编码的字符串，并将其放置在src属性中的img标签里，例如：
Html代码
<img src="data:image/png;base64,//8/==" alt="Red dot">
通过这种方法，你的图像实际上在HTML中并保存了一个HTTP请求。你的图像越大的话，字符串就越长。
‘陆’ 前端如何尽量正确地处理ajax的异常
如今前端领域是MVVM框架的天下，组件库也层出不穷，但是，并没有一个知名的组件库提供ajax异常的成熟解决方案，所以今天我们就来研讨一下，如何尽量正确地处理异常。
从业务上简单说，凡是code不是200的，都是异常。这里code可以是HTTP状态码，也可以是响应体的code，就不细究了，反正本质没差别。然后，根据code的不同，又可以细分成401 403 404 500等等。
如果你的后端伙伴以HTTP状态码表示404，以响应体code表示其他错误，而且你又无法劝说他们，那么你应在axios的拦截器里把各种情况全考虑进去，比如：
超时很简单，axios也支持，设定超时阈值即可。超时跟无响应的区别是，超时意味着HTTP三次握手成功，但是得不到响应体，浏览器知道接口是存在的，但是响应体又在规定时间内没有拿到。无响应是根本无法HTTP握手，也就无法获知接口存在。
处理超时，通常做法是在拦截器里重新请求一遍，还是超时的话就视为服务器错误。
得不到响应又分成2种，可能是网断了，也可能是服务器停机了。
苛刻地说，你应分辨这2种情况，并给出不同的提示，毕竟网断了，用户可以寻找别的联网方式，而服务器停机了就给个重连按钮，让用户有事没事的尝试重连一下。
关于解决方案，首先说，XHR对象无法区分到底断网还是服务器停机，axios对于2种情况都返回'Network Error'。在得到这个反馈之后，你接下来可以有这2种解决办法：
你可以将 https://api.map..com/images/blank.gif 改成其他服务器稳定且字节小的图片。或许你可以做一张几字节的图片，传到一个非常牛逼的CDN上。
MDN手册： https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/connection
它不支持IE，就算你不在乎这一点，那么它是不是一定准呢？对于需要登录的VPN网络，它是否准呢？我也不知道，总体说，它真的不是最佳的方案。我推荐用方案1。
很简单，分为3种：
通常，一个接口，只需要按照其中一种去处理即可，优先级就是上面书写顺序。
容器内错误提示肯定是内容区的接口出错才会出现。
处理方式：
局部报错比较容易理解，比如一个List的接口出错，那么，上策是应当给这个容器尽量撑高到有内容时的高度，然后居中给一个错误图标和错误描述。中策是不考虑有内容时候的高度，只让错误提示和错误描述撑起一定高度即可。都不算错。如果容器很小，比如就是一个3位数值，那么用一个 - 表示错误也可以。
页面整体报错稍微复杂，比如一个左右结构的内容管理系统，前置接口有userInfo接口、全局字典接口、全局路由接口等，这些接口与众不同的地方在于它们是基础接口，它们出错的话，网站干脆就不能用，页面骨架也是错乱的，这种情况下可以有2种解决办法：一是跳转到专门的5xx报错页面，页面中央有错误图标、错误提示，以及“返回上一页”的按钮；二是用白板遮罩覆盖浏览器视口，居中放一个错误图标和错误文字以及“刷新页面”的按钮，本质是用一个fixed的遮罩压住浏览器全部面积。用哪种方案都可。所以你要做的是决定哪些接口属于全局报错，哪些接口属于局部报错，并做不同的处理。
报错内容：
根据ajax异常的分类，可能至少能分出3种：网络错误、服务器宕机、服务器错误。具体用什么图标和文字我就不多说了。
组件化：
容器内报错应尽量组件化。该放返回上一页或刷新按钮的，一定要放按钮。
排他性：
只要做了容器内报错，就不要做另外报错了。这也说明了一点，就是在axios拦截器里弹toast或者modal是愚蠢的方案，我在别的文章也提到过这种观点。不做容器内报错的情况，才应该考虑其他3种情况。
什么样的场景下使用容器隐藏？
比如页面有一个角落显示你的粉丝数、关注数、评论量……。如果有获取到数据，则让这个容器出现，没有的话，则容器就保持隐藏。这一类场景往往应用于非主要内容，比如侧边栏的小内容块。
由于这只适用于非主要内容，那么主要内容也会有它自己的报错，所以，你不必担心用户看不到“网络出错”这类错误提示。
先简单对比一下toast和modal。
很简单，toast就是轻提示，不需要手动关闭，modal就是重提示，需要手动关闭。采用哪个，只要站在用户角度思考问题就好了。比如有人说，异常应当用重提示。可以这么绝对化么？不可以。比如你在某个页面点赞，提示你 “您已经点过赞了” ，这用重提示吗？肯定toast就够了。同样的，成功提示一定用轻提示吗？比如提示 “感谢参与，工作人员将在3~5个工作日内联系你” ，这么长，能toast？能一闪而过？
什么接口适用弹出提示？简单说，只要跟UI显示不相干的，都最好是使用弹出提示。比如这几种场景：
先说上传数据断网之类的错误，通常用modal，因为modal能够拦截用户动作，避免重复上传，而且，还能给用户足够的时间让用户看清楚出错原因，避免无谓的重试。
然后说数据内容错误，无论是表单提交，还是点个赞，错误提示一般用toast，毕竟用户可能只是不小心填错的，看一眼然后赶紧改正就好了。
最后说401错误，有2种做法，一是用modal，因为一般要强制用户转到登录页，但是转之前也得让用户看明白为什么要转，所以可以先modal提示，点击确定就跳转到登录页；二是用toast，但是需要先跳转，然后在登录页上提示toast“请先登录”。
警告条
警告条是可关闭的、永久生命的、又不妨碍用户继续操作的弹出组件，一般在页面顶部，或者在用户操作区域的附近。什么场景用警告条？
比如的MD编辑器，你只要输入，就会自动给服务器发送数据，频率很快，有时候因为网络或者服务器的问题，会出现保存失败的可能性，这时候就会在页面顶部出现一个比较长时间的警告条，告诉你保存失败，但你依然可以继续写，什么时候网络正常了，什么时候toast才会自动消失，当然你也可以手动关闭它。
总之，toast、modal、警告条究竟什么场合使用，要根据产品、业务具体而定，要注意优先使用容器内报错和容器隐藏。
‘柒’ 记一下前端处理多异步方法的思路
有的时候会有一个操作，一部分需要一个异步请求的回调，另一部分需要另一个一部请求的回调，只有两个都执行完了才算完整。
用Generator 函数是个不错的思路。（ 详细用法链接 ）
我的理解就是他是一种分段执行的函数。
定义方法是function和函数名之间有个星号。yield变量是分段的路标。
然后在两个异步方法的回调里都调Generator 函数的next方法。它就会先执行一段，再执行一段。
仅仅是个思路。后续有机会试一下行不行。
‘捌’ 网页前端 数据处理
如果仅仅是前端项目，可以用localStorage把数据存储在本地。
因为只是前端项目，没法写文件，只能用html5新增的loacalStorage本地存储保存数据，只需调用几个简单的接口就可以完成数据存储。
另外可以用cookie,sessionStorage，但是这些是有时限的，所以一般推荐用localStorage。