2018-11-29 | UNLOCK

前端知识(JS篇)

异步操作有哪些

promise、generator、async/await

懒加载和预加载

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

了解一下js节流和防抖

eval是做什么的

它的功能是将对应的字符串解析成js并执行,应该避免使用js,因为非常消耗性能(2次,一次解析成js,一次执行)

如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块,比如js文件等等,分成独立的模块有利于重用(复用性)和维护(版本迭代),这样会引来模块之间相互依赖的问题,所以有了commonJS规范,AMD,CMD规范等等,以及用于js打包(编译等处理)的工具webpack

==和===、以及Object.is的区别

(1) ==
主要存在:强制转换成number,null==undefined

“ “==0 //true

“0”==0 //true

“ “ !=”0” //true

123==”123” //true

null==undefined //true

(2)Object.js

主要的区别就是+0!=-0 而NaN==NaN
(相对比===和==的改进)

js逐帧动画定时器间隔设置多少好

这里有一篇文章讲的是requestAnimationFrame:http://www.cnblogs.com/xiaohuochai/p/5777186.html
与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔,
大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms。

js判断类型

判断方法:typeof(),instanceof,Object.prototype.toString.call()等

数组常用方法

push(),pop(),shift(),unshift(),splice(),sort(),reverse(),map()等
参考 https://blog.csdn.net/weixin_43187545/article/details/88832709

数组去重

法一:indexOf循环去重
法二:ES6 Set去重;Array.from(new Set(array))
法三:Object 键值对去重;把数组的值存成 Object 的 key 值,比如 Object[value1] = true,在判断另一个值的时候,如果 Object[value2]存在的话,就说明该值是重复的。

性能优化

减少HTTP请求
使用内容发布网络(CDN)
添加本地缓存
压缩资源文件
将CSS样式表放在顶部,把javascript放在底部(浏览器的运行机制决定)
避免使用CSS表达式
减少DNS查询
使用外部javascript和CSS
避免重定向
图片lazyLoad

什么是跨域

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制,那么只要协议、域名、端口有任何一个不同,都被当作是不同的域。跨域原理,即是通过各种方式,避开浏览器的安全限制。

js字符串转数字的方法

通过函数parseInt(),可解析一个字符串,并返回一个整数,语法为parseInt(string ,radix)
string:被解析的字符串
radix:表示要解析的数字的基数,默认是十进制,如果radix<2或>36,则返回NaN

es6常用

promise,await/async,let、const、块级作用域、箭头函数

箭头函数和function有什么区别

箭头函数根本就没有绑定自己的this,在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用

JSONP的缺点

JSON只支持get,因为script标签只能使用get请求;
JSONP需要后端配合返回指定格式的数据。

如何实现跨域

  1. JSONP
  2. proxy代理跨域:起一个代理服务器,实现数据的转发
  3. 服务端CORS,设置Access-Control-Allow-Origin