CSS in js 的好与坏!前端学者需要理清思绪,才好构思画面
CSS in JS是什么?
CSS-in-JS是一种技术(technique),而不是一个具体的库实现(library)。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面,而不是独立为一些.css,.scss或者less之类的文件,这样你就可以在CSS中使用一些属于JS的诸如模块声明,变量定义,函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是,虽然CSS-in-JS不是一种很新的技术,可是它在国内普及度好像并不是很高,它当初的出现是因为一些component-based的Web框架(例如React,Vue和Angular)的逐渐流行,使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的,这是因为React本身不会管用户怎么去为组件定义样式的问题,而Vue和Angular都有属于框架自己的一套定义样式的方案。
本文将通过分析CSS-in-JS这项技术带来的好处以及它存在的一些问题来帮助大家判断自己是不是要在项目中使用CSS-in-JS。
不同的实现
实现了CSS-in-JS的库有很多,据统计现在已经超过了61种。虽然每个库解决的问题都差不多,可是它们的实现方法和语法却大相径庭。从实现方法上区分大体分为两种:唯一CSS选择器和内联样式(Unique Selector VS Inline Styles)。接下来我们会分别看一下对应于这两种实现方式的两个比较有代表性的实现:styled-components和radium。
Styled-components
Styled-components 应该是CSS-in-JS最热门的一个库了,到目前为止github的star数已经超过了27k。通过styled-components,你可以使用ES6的标签模板字符串语法(Tagged Templates)为需要styled的Component定义一系列CSS属性,当该组件的JS代码被解析执行的时候,styled-components会动态生成一个CSS选择器,并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。
CSS-in-JS Playground是一个可以快速尝试不同CSS-in-JS实现的网站,上面有一个简单的用styled-components实现表单的例子:
从上面的例子可以看出,styled-components不需要你为需要设置样式的DOM节点设置一个样式名,使用完标签模板字符串定义后你会得到一个styled好的Component,直接在JSX中使用这个Component就可以了。接着让我们打开DevTools查看一下生成的CSS:
从上面DevTools可以看出styled的Component样式存在于style标签内,而且选择器名字是一串随机的哈希字符串,这样其实实现了局部CSS作用域的效果(scoping styles),各个组件的样式不会发生冲突。除了styled-components,采用唯一CSS选择器做法的实现还有:jss,emotion,glamorous等。
Radium
Radium是由FormidableLabs创建的在github上有超过7.2k star的CSS-in-JS库。Radium和styled-components的最大区别是它生成的是标签内联样式(inline styles)。由于标签内联样式在处理诸如media query以及:hover,:focus,:active等和浏览器状态相关的样式的时候非常不方便,所以radium为这些样式封装了一些标准的接口以及抽象。
再来看一下radium在CSS-in-JS Playground的例子:
从上面的例子可以看出radium定义样式的语法和styled-components有很大的区别,它要求你使用style属性为DOM添加相应的样式。打开DevTools查看一下radium生成的CSS:
从DevTools上面inspect的结果可以看出,radium会直接在标签内生成内联样式。内联样式相比于CSS选择器的方法有以下的优点:
- 自带局部样式作用域的效果,无需额外的操作
- 内联样式的权重(specificity)是最高的,可以避免权重冲突的烦恼
- 由于样式直接写在HTML中,十分方便开发者调试
其他区别
不同的CSS-in-JS实现除了生成的CSS样式和编写语法有所区别外,它们实现的功能也不尽相同,除了一些最基本的诸如CSS局部作用域的功能,下面这些功能有的实现会包含而有的却不支持:
- 自动生成浏览器引擎前缀 - built-in vendor prefix
- 支持抽取独立的CSS样式表 - extract css file
- 自带支持动画 - built-in support for animations
- 伪类 - pseudo classes
- 媒体查询 - media query
- 其他
想了解更多关于不同CSS-in-JS的对比,可以看一下Michele Bertoli整理的不同实现的对比图。
好处
看完了一些不同的实现,大家应该对CSS-in-JS一些基本的概念和用法有了大概的理解,接着我们可以来聊一下CSS-in-JS都有什么好处和坏处了。
局部样式 - Scoping Styles
CSS有一个被大家诟病的问题就是没有本地作用域,所有声明的样式都是全局的(global styles)。换句话来说页面上任意元素只要匹配上某个选择器的规则,这个规则就会被应用上,而且规则和规则之间可以叠加作用(cascading)。SPA应用流行了之后这个问题变得更加突出了,因为对于SPA应用来说所有页面的样式代码都会加载到同一个环境中,样式冲突的概率会大大加大。由于这个问题的存在,我们在日常开发中会遇到以下这些问题:
- 很难为选择器起名字。为了避免和页面上其他元素的样式发生冲突,我们在起选择器名的时候一定要深思熟虑,起的名字一定不能太普通。举个例子,假如你为页面上某个作为标题的DOM节点定义一个叫做.title的样式名,这个类名很大概率已经或者将会和页面上的其他选择器发生冲突,所以你不得不手动为这个类名添加一些前缀,例如.home-page-title来避免这个问题。
- 团队多人合作困难。当多个人一起开发同一个项目的时候,特别是多个分支同时开发的时候,大家各自取的选择器名字可能有会冲突,可是在本地独立开发的时候这个问题几乎发现不了。当大家的代码合并到同一个分支的时候,一些样式的问题就会随之出现。
CSS-in-JS会提供自动局部CSS作用域的功能,你为组件定义的样式会被限制在这个组件,而不会对其他组件的样式产生影响。不同的CSS-in-JS库实现局部作用域的方法可能有所不一样,一般来说它们会通过为组件的样式生成唯一的选择器来限制CSS样式的作用域。以下是一个简化了的CSS-in-JS库生成唯一选择器的示例代码:
const css = styleBlock => { const className = someHash(styleBlock); const styleEl = document.createElement('style'); styleEl.textContent = ` .${className} { ${styleBlock} } `; document.head.appendChild(styleEl); return className;};const className = css(` color: red; padding: 20px;`); // 'c23j4'前端学习裙:950919261
从上面的代码可以看出,CSS-in-JS的实现会根据定义的样式字符串生成一个唯一的CSS选择器,然后把对应的样式插入到页面头部的style标签中,styled-components使用的就是类似的方法。
避免无用的CSS样式堆积 - Dead Code Elimination
进行过大型Web项目开发的同学应该都有经历过这个情景:在开发新的功能或者进行代码重构的时候,由于HTML代码和CSS样式之间没有显式的一一对应关系,我们很难辨认出项目中哪些CSS样式代码是有用的哪些是无用的,这就导致了我们不敢轻易删除代码中可能是无用的样式。这样随着时间的推移,项目中的CSS样式只会增加而不会减少(append-only stylesheets)。无用的样式代码堆积会导致以下这些问题:
- 项目变得越来越重量级,加载到浏览器的CSS样式会越来越多,会造成一定的性能影响。
- 开发者发现他们很难理解项目中的样式代码,甚至可能被大量的样式代码吓到,这就导致了开发效率的降低以及一些奇奇怪怪的样式问题的出现。
CSS-in-JS的思路就可以很好地解决这个问题。我们先来看一段styled-components的作者Max Stoiber说过的话:
“For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. … I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!” – Max Stoiber
Max Stoiber大体就是说由于CSS-in-JS会把样式和组件绑定在一起,当这个组件要被删除掉的时候,直接把这些代码删除掉就好了,不用担心删掉的样式代码会对项目的其他组件样式产生影响。而且由于CSS是写在JavaScript里面的,我们还可以利用JS显式的变量定义,模块引用等语言特性来追踪样式的使用情况,这大大方便了我们对样式代码的更改或者重构。
Critical CSS
浏览器在将我们的页面呈现给用户之前一定要先完成页面引用到的CSS文件的下载和解析(download and parse),所以link标签链接的CSS资源是渲染阻塞的(render-blocking)。如果CSS文件非常大或者网络的状况很差,渲染阻塞的CSS会严重影响用户体验。针对这个问题,社区有一种优化方案就是将一些重要的CSS代码(Critical CSS)直接放在头部的style标签内,其余的CSS代码再进行异步加载,这样浏览器在解析完HTML后就可以直接渲染页面了。具体做法类似于以下代码:
<html> <head> <style> /* critical CSS */ </style> <script>asyncLoadCSS("non-critical.css")</script> </head> <body> ...body goes here </body></html>
那么如何定义Critical CSS呢?放在head标签内的CSS当然是越少越好,因为太多的内容会加大html的体积,所以我们一般把用户需要在首屏看到的(above the fold)页面要用到的最少CSS提取为Critical CSS。以下是示意图:
上图中above the fold的CSS就是Critical CSS,因为它们需要立即展示在用户面前。由于页面在不同的设备上展示的效果不同,对应着的Critical CSS内容也会有所差别,因此Critical CSS的提取是一个十分复杂的过程,虽然社区有很多对应的工具可是效果都差强人意。CSS-in-JS却可以很好地支持Critical CSS的生成。在CSS-in-JS中,由于CSS是和组件绑定在一起的,只有当组件挂载到页面上的时候,它们的CSS样式才会被插入到页面的style标签内,所以很容易就可以知道哪些CSS样式需要在首屏渲染的时候发送给客户端,再配合打包工具的Code Splitting功能,可以将加载到页面的代码最小化,从而达到Critical CSS的效果。换句话来说,CSS-in-JS通过增加一点加载的JS体积就可以避免另外发一次请求来获取其它的CSS文件。而且一些CSS-in-JS的实现(例如styled-components)对Critical CSS是自动支持的。
基于状态的样式定义 - State-based styling
CSS-in-JS最吸引我的地方就是它可以根据组件的状态动态地生成样式。对于SPA应用来说,特别是一些交互复杂的页面,页面的样式通常要根据组件的状态变化而发生变化。如果不使用CSS-in-JS,处理这些逻辑复杂的情况会比较麻烦。举个例子,假如你现在页面有一个圆点,它根据不同的状态展示不同的颜色,running的时候是绿色,stop的时候是红色,ready的时候是黄色。如果使用的是CSS modules方案你可能会写下面的代码:
style.css文件
index.js文件
import React from 'react'import styles from './style.css'const styleLookup = {5 healthy: styles.healthy,6 stop: styles.stop,7 ready: styles.ready8}910export default ({ status }) => (11 <div12 className={styleLookup[status]}13 />14)
在style.css中我们使用了CSS modules的继承写法来在不同状态的CSS类中共用circle基类的样式,代码看起来十分冗余和繁琐。由于CSS-in-JS会直接将CSS样式写在JS文件里面,所以样式复用以及逻辑判断都十分方便,如果上面的例子用styled-components来写是这样的:
import styled from 'styled-components'const circleColorLookup = { healthy: 'green', stop: 'red', ready: 'yellow'}export default styled.div` ... circle base styles background-color: ${({ status }) => circleColorLookup[status]};`
对比起来,styled-components的逻辑更加清晰和简洁,如果后面需要增加一个状态,只需要为circleColorLookup添加一个键值对就好,而CSS modules的写法需要同时改动style.css和index.js文件,代码不好维护和扩展。
封装得更好的组件库
大家在日常开发的过程中可能会封装一些组件在不同的项目中使用,如果你的组件的样式使用的CSS预处理方案和另外一个项目的预处理方案不一样,例如组件使用的是less,项目使用的是css modules,组件复用会变得很麻烦。可是如果CSS是写在JS里面的,项目想要使用封装的组件库只需要进行简单的npm install就可以了,非常方便。
坏处
任何事物都有好的地方和坏的地方,只有对好处和坏处都了解清楚我们才能更好地做出判断。接着我们就来说一下CSS-in-JS不好的地方吧。
陡峭的学习曲线 - Steep learning curve
这其实可以从两方面来说明。首先CSS-in-JS是针对component-based的框架的,这就意味着要学习CSS-in-JS你必须得学习:component-based框架(例如React),JavaScript和CSS这三样技能。其次,即使你已经会用React,JavaScript和CSS来构建SPA应用,你还要学习某个CSS-in-JS实现(例如styled-components),以及学习一种全新的基于组件定义样式的思考问题方式。我们团队在刚开始使用styled-components的时候,适应了好一段时间才学会如何用好这个库。因为学习成本比较高,在项目中引入CSS-in-JS可能会降低你们的开发效率。
运行时消耗 - Runtime cost
由于大多数的CSS-in-JS的库都是在动态生成CSS的。这会有两方面的影响。首先你发送到客户端的代码会包括使用到的CSS-in-JS运行时(runtime)代码,这些代码一般都不是很小,例如styled-components的runtime大小是12.42kB min + gzip,如果你希望你首屏加载的代码很小,你得考虑这个问题。其次大多数CSS-in-JS实现都是在客户端动态生成CSS的,这就意味着会有一定的性能代价。不同的CSS-in-JS实现由于具体的实现细节不一样,所以它们的性能也会有很大的区别,你可以通过这个工具来查看和衡量各个实现的性能差异。
代码可读性差 - Unreadable class names
大多数CSS-in-JS实现会通过生成唯一的CSS选择器来达到CSS局部作用域的效果。这些自动生成的选择器会大大降低代码的可读性,给开发人员debug造成一定的影响。
没有统一的业界标准 - No interoperability
由于CSS-in-JS只是一种技术思路而没有一个社区统一遵循的标准和规范,所以不同实现的语法和功能可能有很大的差异。这就意味着你不能从一个实现快速地切换到另外一个实现。举个例子,假如你先在项目使用radium,可是随着项目规模的变大,你发现radium可能不适合你现在的业务,更好的解决方案应该是styled-components。可是由于写法差异巨大,这时候你要对代码进行脱胎换骨的改动才能将代码迁移到styled-components。不过令人欣慰的是,现在已经有人在制定相关的标准了,有兴趣的同学可以看一下Interoperable Style Transfer Format。
个人思考与总结
CSS-in-JS有好处也有坏处,我们一定要根据自己的实际情况进行衡量和取舍来确定是不是要在自己的项目中使用它。永远不要为了使用一个技术而用一个技术。例如在下面几种情况下你就不需要它:
- 你是前端开发的初学者: 由于CSS-in-JS的学习坡度很陡,刚开始学习Web开发的同学没必要学习,可能会有挫败感。
- 你只想制作一些功能简单的静态页面:逻辑交互不复杂的网站没有必要使用CSS-in-JS。
- 你很注重样式名的可读性以及调试体验: CSS-in-JS动态生成的选择器很影响代码的可读性,可能会降低你的调试效率。
相反如果你的应用交互逻辑复杂的话,CSS-in-JS可能会给你带来很大的开发便利,没有使用过的人十分值得一试。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Ionic3在ts中获取html中值的方法
我觉得有两种方法,都是Angular中的语法,一种是把值当做参数传递,另一种是使用ngModel实现双向绑定 还有一种很少用到的,Js的原生方法:document.getElementById(chartContainer); 参数传递法 例子:获取input…...
2024/5/8 12:12:37 - HTML中使用a标签实现文本内链接—零基础自学网页制作
文本内链接 最后这些关于html的内容有点查漏补缺的意思了,这一次是关于文本内链接的使用方法,简单来说就是我们的页面中有一个章节名称目录,如何点击目录中的名称,就能正好在页面中显示相应内容。 如图所示: 点击目录…...
2024/5/6 7:16:30 - embed标签在页面加载的时候动态的改变src的值,可播放的
embed的嵌入式对象是比较特殊的,你一旦嵌入到文档中无论怎么改src它都不会重新加载。网上有一些方法是用的页面加一个按钮,通过jQuery或者JavaScript把原来的embed删除,从新拼一个代码串塞到原来的放置embed的标签内。 页面加载的时候自动改…...
2024/5/6 15:35:33 - ionic使用备忘
ionic使用备忘: 1. 常用命令: ionic -v 查看版本 ionic start myionictest blank //创建空白项目 ionic start myionictest tabs //创建带导航栏的项目 ionic start myionictest sidemenu //创建带侧滑菜单的项目 ionic g page YourPageName //创建新页…...
2024/5/7 17:31:46 - angularjs初始化时不显示模板内容, 不显示html, 不显示template
template的内容可能在需要的数据准备好之前就显示出来了, ng-cloak可以解决这个问题 ng-cloak <div id"template1" ng-cloak>{{ hello }}</div> <div id"template2" class"ng-cloak">{{ world }}</div>...
2024/4/20 15:23:54 - AngularJS ngRoute与页面迁移
<!--ngRoute与页面迁移 1.1使用ngRoute 下面例子说明了一个简单的AngularJS应用是如何进行页面迁移的。需要做以下事情: 1.加载完angular.js之后,引入angular-route.js文件,这样能昂ngRoute模块变得可用。 2.在html中通过ng-view指令标明哪…...
2024/4/20 15:23:52 - AngularJS五特性
对于一个没有接触过和AngularJS相似的框架而且还是都在使用像jQuery这样的JavaScript类库的开发者来讲,要从jQuery的思想转变成AngularJS的思想是有点困难的,但我愿意去尝试。 AngularJS是一个 JavaScript框架。它可通过 <sc…...
2024/5/7 11:35:01 - 埋线双眼皮20年
...
2024/4/20 15:23:50 - 埋线双眼皮20还是肿
...
2024/4/20 15:23:49 - 埋线双眼皮1年后的 图
...
2024/4/21 14:28:49 - 埋线双眼皮1厘米怎么办
...
2024/4/21 14:28:47 - 埋线双眼皮1个月还很肿
...
2024/4/27 3:23:07 - 【Spring Boot教程】推荐使用Spring Tool Suite(STS)开发
原文地址:http://dtbuluo.com/103.html由于习惯使用Eclipse开发的原因,可以使用STS来构建 Spring Boot项目,操作也很方便。1、下载 Spring Tool Suite工具 下载地址:http:// spring.io/tools/sts/all选择适合自己的版本进行下载,下载完成之后,解压运行STS.exe就可以了2、…...
2024/5/6 23:27:03 - 埋线双眼皮15天还是肿
...
2024/5/7 0:27:16 - 埋线双眼皮10天图
...
2024/4/21 14:28:44 - web学习笔记08-Ionic的前后端简单交互与打包
前言:这篇文章同样是新手专用,对于一个像我一样的前端渣新来说,看看还可以,大神的话就算啦。里面涉及的点都不算太难,虽然我也有一堆东西没懂,但是跟着先敲起来,慢慢地就会理解了。这个之后还做…...
2024/4/21 14:28:43 - npm install下载失败 No matching version found for XX
1、报错显示 npm install下载依赖的时候报: No matching version found for XXX 只要是显示这个报错的都是目前使用的版本是库里面已经不存在的版本,我的报错是apic-tool版本不对,所以在我这里是找到 apic- tool的正确版本解决问题【这里需要说一…...
2024/5/2 20:05:03 - 谷歌出台安卓系统新规,将强推安卓 8.0 系统;Red Hat 有望成为第一家季度收入突破 10 亿美元的开源企业...
(点击上方蓝字,快速关注我们)参考:开源中国、solidot、cnBeta、腾讯科技等0、Red Hat 有望成为第一家季度收入突破 10 亿美元的开源企业Red Hat 是第一家年收入突破 10 亿美元的开源企业,现在它有望成为第一家季度收入…...
2024/4/21 14:28:41 - 《Angular5闪亮登场》
前言: Angular官方原本发布更新是每六个月不一版,本应该于九月发布的,因处理升级过程中的问题,而推迟在10月23日发布。Angular 5将会推迟发布,因升级过程的问题。 原文解释:http://developer.51cto.com/ar…...
2024/4/21 14:28:39 - Hummingbird 对比 Angular Dart:该选择哪一个?
Hummingbird在12月4日的flutter发布会上宣布。这个项目将允许我们将我们的fulluer应用程序编译成完整的渐进式Web应用程序。那么...... Angular Dart还值得吗? 我将尝试分享到目前为止我收集到的信息,希望我的发现也能帮助其他人。 他们都准备好了吗&…...
2024/5/2 9:48:49
最新文章
- 服务器数据恢复—RAID5磁盘阵列两块盘离线的数据恢复过程
服务器故障: 服务器中有一组由多块硬盘组建的raid5磁盘阵列,服务器阵列中2块硬盘先后掉线导致服务器崩溃。 服务器数据恢复过程: 1、将故障服务器中所有磁盘编号后取出,由硬件工程师对掉线的两块磁盘进行物理故障检测,…...
2024/5/10 4:45:22 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/9 21:23:04 - 五一假期来临,各地景区云旅游、慢直播方案设计与平台搭建
一、行业背景 经文化和旅游部数据中心测算,今年清明节假期3天全国国内旅游出游1.19亿人次,按可比口径较2019年同期增长11.5%;国内游客出游花费539.5亿元,较2019年同期增长12.7%。踏青赏花和户外徒步成为假期的热门出游主题。随着…...
2024/4/30 7:54:16 - c# wpf XmlDataProvider 简单试验
1.概要 2.代码 <Window x:Class"WpfApp2.Window12"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend…...
2024/5/10 0:12:52 - 微信小程序生命周期管理:从数据初始化到事件绑定
作为一个独立的应用开发平台,微信小程序提供了自己的生命周期机制,与我们熟悉的Vue.js框架有一些差异。掌握小程序生命周期的特点和使用技巧,对于开发高质量的小程序应用至关重要。深入理解和掌握小程序生命周期的使用技巧,将有助于我们构建出更加健壮和可维护的小程序应用。 小…...
2024/5/10 0:10:35 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/8 6:01:22 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/9 15:10:32 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/9 4:20:59 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/7 11:36:39 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/8 20:48:49 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/7 9:26:26 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/8 19:33:07 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/8 20:38:49 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/9 7:32:17 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/9 17:11:10 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57