CSS 变量
八种跨域
跨域是指在同一网站下,由于浏览器的安全机制,不能直接访问其他网站的数据。而前端开发中,由于业务的需要,经常需要和其他网站进行数据交互。因此,解决跨域问题成为了前端开发必备的技能。
本文将详细介绍跨域的八种实现方式,以及它们的使用场景、优缺点。
JSONP
JSONP 是一种利用 <script>
标签进行跨域请求的方式。它的原理是在请求地址中添加一个回调函数名,服务端在返回数据时会将数据作为参数传入该回调函数中,并返回给客户端。客户端则可以通过定义这个回调函数来处理返回的数据。
示例代码:
1 | function jsonp(url, callback) { |
视频截取封面图
1 | function createPoster(val) { |
RenderJs
renderjs 是一个运行在视图层的 js。它比 WXS 更加强大。它只支持 app-vue 和 web。
主要作用
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
uni-app 的 app 端逻辑层和视图层是分离的,这种机制有很多好处,但也有一个副作用是在造成了两层之间通信阻塞。尤其是 App 的 Android 端阻塞问题影响了高性能应用的制作。
renderjs 运行在视图层,可以直接操作视图层的元素,避免通信折损。
在视图层操作 dom,运行 for web 的 js 库
官方不建议在 uni-app 里操作 dom,但如果你不开发小程序,想使用一些操作了 dom、window 的库,其实可以使用 renderjs 来解决。
在 app-vue 环境下,视图层由 webview 渲染,而 renderjs 运行在视图层,自然可以操作 dom 和 window。
注意事项
- 目前仅支持内联使用。
- 不要直接引用大型类库,推荐通过动态创建 script 方式引用。
- 可以使用 vue 组件的生命周期(不支持
beforeDestroy
、destroyed
、beforeUnmount
、unmounted
),不可以使用 App、Page 的生命周期 - 视图层和逻辑层通讯方式与 WXS 一致,另外可以通过
this.$ownerInstance
获取当前组件的ComponentDescriptor
实例,使用callMethod
方法,去抛出方法、传值,类似于 vue 组件间 emit - 注意逻辑层给数据时最好一次性给到渲染层,而不是不停从逻辑层向渲染层发消息,那样还是会产生逻辑层和视图层的多次通信,还是会卡
- 观测更新的数据在视图层可以直接访问到。
- APP 端视图层的页面引用资源的路径相对于根目录计算,例如:./static/test.js。
- APP 端可以使用 dom、bom API,不可直接访问逻辑层数据,不可以使用 uni 相关接口(如:uni.request)
- H5 端逻辑层和视图层实际运行在同一个环境中,相当于使用 mixin 方式,可以直接访问逻辑层数据。
JS代码优化技巧
前端数据结构——队列篇
script 标签中, async 和 defer 两个属性有什么用途和区别?
在 HTML 中会遇到以下三类 script:
1 | <script src="xxx"></script> |
script 标签用于加载脚本与执行脚本,直接使用 script 脚本时,html 会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的 DOM 渲染。
比如现在大家习惯于在页面中引用各种第三方脚本,但如果第三方服务商出现了一些小问题,比如延迟之类的,就会使得页面白屏。
针对上述情况,script 标签提供了两种方式来解决问题,就是加入属性 async 以及 defer,这两个属性使得 script 标签加载都不会阻塞 DOM 的渲染。