提升图片和用户体验的现代优化策略指南
之前,整个《现代图片性能优化及体验优化指南》分了 5 篇来发,本文是系列合集,方便大家收藏及连贯阅读。
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。
对图片的性能优化及体验优化在今天就显得尤为重要。本文,就将从各个方面阐述,在各种新特性满头飞的今天,我们可以如何尽可能的对我们的图片资源,进行性能优化及体验优化。
图片类型的选取及 Picture 标签的使用
首先,从图片的类型上而言,除了常见的 PNG-8/PNG-24,JPEG,GIF 之外,我们更多的关注另外几个较新的图片格式:
- WebP
- JPEG XL
- AVIF
首先,通过一张表格,快速过一下这几个图片,我们将从图片类型、透明通道、动画、编解码性能、压缩算法、颜色支持、内存占用、兼容性方面,对比它们:
图片类型 | Alpha 通道 | 动画 | 编解码性能 | 压缩算法 | 颜色支持 | 内存占用 | 兼容性 |
---|---|---|---|---|---|---|---|
GIF | 支持 | 支持 | 较高 | 无损压缩 | 索引色(256) | 基本一致 | ALL |
PNG-8/PNG-24 | 支持 | 不支持 | 较高 | 无损压缩 | 索引色(256)\直接色 | 基本一致 | ALL |
JPEG | 不支持 | 不支持 | 较高 | 有损压缩 | 直接色 | 基本一致 | ALL |
WebP | 支持 | 支持 | 编解码性能差(低配设备更为显著) | 有损压缩\无损压缩 | 直接色 | 基本一致 | 高版本 Chrome\Opera\Android |
JPEG XL | 支持 | 支持 | 渐进式解码 | 有损压缩\无损压缩 | 直接色 | 基本一致 | 部分高版本 Chrome\Opera\Firefox\Edge |
AVIF | 支持 | 支持 | 编解码性能一般 | 有损压缩\无损压缩 | 直接色 | 基本一致 | 高版本 Chrome\Opera\Android\Edge |
首先,了解了解上述的一些参数含义:
- Alpha 通道:图片是否支持透明的特性
当然,需要指出的是,Alpha 没有透明度的意思,不代表透明度。opacity 和 transparency 才和透明度有关,前者是不透明度,后者是透明度。比如 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。后来 Alvy Ray Smith 提出每个像素再增加一个 Alpha 通道,取值为0到1,用来储存这个像素是否对图片有「贡献」,0代表透明、1代表不透明。也就是说,「Alpha 通道」储存一个值,其外在表现是「透明度」,Alpha 和透明度没啥关系
- 动画:很好理解,图片是否支持多帧率动态图片,类似于 GIF
- 编解码性能:图像的解码与编码。这个很关键,很多人对待图片容易忽视图片的编解码性能,解码图像主要从图像文件中读出图像数据,而编码则是将图像数据写入图像文件。解码与编码的过程正好相反。而这两者的性能耗时会影响我们页面的的展示性能。
- 压缩算法:该图片格式是否支持压缩,支持的话,图片的压缩又会分为无损压缩与有损压缩
有损压缩算法是一种数据压缩方法,经过此方法压缩、解压的数据会与原始数据不同但是非常接近。原理是借由将次要的信息数据舍弃,牺牲一些质量来减少数据量、提高压缩比
无损压缩指数据经过压缩后,信息不受损失,还能完全恢复到压缩前的原样。无损压缩通常用于严格要求“经过压缩、解压缩的数据必须与原始数据一致”的场合。
- 颜色支持:会分为索引色与直接色,在过去,为了节省存储空间,并非所有图片都能支持所有颜色值,因此存在索引色这种优化方式。
索引颜色是一种以有限的方式管理数字图像颜色的技术,以节省计算机内存和文件存储,同时加速显示刷新和文件传输。即用一个数字来代表(索引)一种颜色,在存储图片的时候,存储一个数字的组合,同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色。索引色常见有1位(即黑白),8位(即灰阶/256色),16位(即高彩),24位(即真彩),30/36/48位(即全彩)。
直接色使用四个数字来代表一种颜色,这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度(即 RGBA)。现在流行的显示设备可以在这四个维度分别支持256种变化,所以直接色可以表示2的32次方种颜色。
- 内存占用:图片对内存资源的占用
- 兼容性:影响图片格式能否大规模推广的核心要素之一
WebP vs JPEG XL vs AVIF: JPEG 替代之战
因为传统的 PNG-8/PNG-24,JPEG,GIF 各自或多或少都存在一些问题,近些年来它们的替代方案之争也愈演愈烈,核心领跑者可能是 WebP、JPEG XL、AVIF。
再简单了解了解它们:
WebP
WebP 最初由 Google 在 2010 年 9 月发布,其特性总结如下:
- 可以同时提供无损/有损压缩(像 JPEG 一样)和支持透明度(像 PNG 一样)的图片文件格式
- 支持动画效果(像 GIF 一样)
- WebP 主要优势在于有损编码,其无损编码的性能和压缩比表现一般
- WebP 的缺点在于其编解码性能不是特别理想
- 在兼容性方面,除了 IE,基本已经得到了全系列浏览器支持
对于复杂的图像(比如照片)来说,WebP 无损编码表现并不好,但有损编码表现却非常棒。相近质量的图片解码速度 WebP 相距 JPEG 也已经相差不大了,而文件压缩比却能提升不少。
下图是我之前还在 TX 的时候做的一个测试对比:
加载同样张数的 JPEG 与 WebP 的耗时对比:
对于 WebP 图片格式,简单做个总结:
- 目前 WebP 与 JPEG 相比较,据资料考证,编码速度慢 10 倍,解码速度慢 1.5 倍
- WebP 虽然会增加额外的解码时间,但由于大幅减少了文件体积,缩短了加载的时间,大页面图片量较多的场景下,页面的渲染速度是有较大加快的
- 目前而言,是 WebP、JPEG XL、AVIF 三者中兼容性最好的
截止至(2023-02-05)的兼容性图:
JPEG XL
JPEG XL 由联合图像专家组(开发原始 JPEG 标准的同一组织)于 2021 年发布,旨在成为传统 JPEG 的长期替代品。作为一种免版税的开源标准,JPEG XL 的创建者希望其格式的开放性能够吸引网络开发人员采用该标准,该格式的扩展名为 .jxl
,JXL 核心比特流于 2021 年 1 月冻结,文件格式于 2021 年 4 月定稿。:
JPEG XL 中的 X 指 2000 年以来的多个 JPEG 标准的名称:JPEG XT、JPEG XR、JPEG XS,而 L 表示 'long-term',表示“长期”。创建这种格式是为替换旧的JPEG文件格式,并使用足够长的时间。
其主要特点有:
- 与传统图像格式(例如JPEG、GIF和PNG)相比,有着更佳的效率与更丰富的功能
- 全面支持广色域和 HDR,支持 Alpha 通道,支持多帧(也就是动画支持)
- 有损压缩时:相同的视觉质量,比 JPEG 小约 60%。
- 无损压缩时:比 PNG 减小约 35%(对于 HDR,减小 50%)。
- 支持无损 JPEG 转码,减小约 20% 文件大小。
- 渐进式解码,专为支持不同显示分辨率的响应式加载
- 开源免费:具有使用三条款版BSD许可证的开源参考实现的免版税格式
看看同一张图片,相同质量下的大小表现:
数据来源:技术周刊 2021-04-15:2021最值得期待的新技术 JPEG XL
JPEG XL 是目前而言,最有可能全面替代传统图片格式(Gif、PNG、JPEG)的下一代标准,当然,在今天,需要看看其兼容性:
好吧,目前的兼容有点离谱。Chrome 从 91 版本开始已经实验室性质支持了 .jxl
格式的图片,需要通过 --enable-features=JXL
配置开启,遗憾的是,从 Chrome 110 开始,Chrome 又不再支持 JPEG XL 。
有趣的是,Chrome 从 110 版本开始中弃用了对 JPEG-XL 的支持,谷歌的回答是,人们对 JPEG-XL 没有足够的兴趣,并且与现有格式相比也没有足够的优势。谷歌之前一直对 JPEG 的支持都是实验性的性质的,他们认为 JPEG XL 缺乏生态系统支持,并且该格式没有足够多的好处(相对 WebP 和 AVIF)。也就是说,目前而言,Chrome 对 WebP 和 AVIF 等替代格式更感兴趣。
AVIF
最后,我们再来看看 AVIF 格式图片。
AVIF 是由开放媒体联盟 (AOM) 开发并于 2019 年发布的另一种最新图像格式。该格式基于 AV1 视频编解码器,源自视频帧。其特点如下:
- 同样的,与传统图像格式(例如JPEG、GIF和PNG)相比,有着更佳的效率与更丰富的功能
- 支持 Alpha 通道,支持动态图像和动画
- 支持有损、无损压缩。AVIF 文件在低保真有损图像压缩方面表现出色(比 JPEG XL 更优)。压缩的 AVIF 图像保留了很高的图片质量,避免了恼人的压缩伪影等问题
- 相对而言,AVIF 的解码和编码速度不如 JPEG XL,它不支持渐进式渲染
- 最后,再看看兼容性,目前(2023-02-05)它的兼容性介于 WebP 与 JPEG XL 之间
看看 CaniUse 的数据:
下图是 WebP vs JPEG XL vs AVIF 三者在图片解码上的性能表现:
图片来源于:Encode.su -- JPEG XL vs. AVIF
从图中可以看到,对于解码性能的对比,结果居然是 WebP > AVIF > JPEG XL 。JPEG XL 的编解码性能并没有其描述的那么强大。
图片格式总结
总结一下,WebP、AVIF 和 JPEG XL 都是浏览器不广泛支持的新型图像格式。虽然 WebP、AVIF 已经存在很长时间,但到今天,影响它们大规模使用的依旧是兼容问题。它们各自有各自的特点与优势,谁能胜出仍未知晓。
虽然 AVIF、JPEG XL 等新型图片格式未得到任何浏览器的完全支持,但是在新版本的 Chrome、Firefox 和 Edge Chromium,可以使用配置标志启用对应图像格式,配合 HTML 的 Picture
标签,我们还是可以一定程度上对我们的图片进行格式选择上的优化的。
这,就可以引出我们要说的第二部分 -- HTML Picture 标签的使用。
Picture 元素的使用
HTML5 规范新增了 Picture Element。那么 <picture>
元素的作用是什么呢?
<picture>
元素通过包含零或多个 <source>
元素和一个 <img>
元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source>
元素,如果没有匹配的,就选择 <img>
元素的 src 属性中的 URL。然后,所选图像呈现在 <img>
元素占据的空间中。
什么意思呢?怎么使用 <picture>
元素呢?
假设,没有 <picture>
,只有 <img>
元素,我们想尽可能在支持一些现代图片格式的浏览器上使用类似于上述我们提到的 WebP、AVIF 和 JPEG XL 等图片格式,而不支持的浏览器回退使用常规的 JPEG、PNG 等。没错,就是一种渐进增强的思想,该怎么办呢?
只能是 JavaScript 去写对应的逻辑,通过 JS 脚本进行特性查询,动态赋值给 <img>
的 src。
而有了 <picture>
后,浏览器将原生支持上述的一些列操作,我们来看看对应的语法:
<picture>
<!-- 可能是一些对兼容性有要求的,但是性能表现更好的现代图片格式-->
<source src="image.avif" type="image/avif">
<source src="image.jxl" type="image/jxl">
<source src="image.webp" type="image/webp">
<!-- 最终的兜底方案-->
<img src="image.jpg" type="image/jpeg">
</picture>
上述代码的含义是:
- 第 1 个
source
元素指向新 AVIF 格式的图像。如果浏览器支持 AVIF 图像,那么它会选择该图像文件。否则,它将移动到下一个source
元素。 - 第 2个
source
元素指向新 JPEG XL 格式的图像。如果浏览器支持 JPEG XL 图像,那么它会选择该图像文件。否则,它将移动到下一个source
元素。 - 第 3 个
source
元素指向一张WebP 格式的图像。如果浏览器能够渲染 WebP 图像,它将使用该图像文件。 - 否则浏览器将回退到使用
img
元素 src 属性中的图像文件。img 元素指向的是 JPEG 格式的图片,它是最终的兜底方案。
这意味着现在我们可以在不牺牲向后兼容性的情况下开始使用新的图像格式。
简而言之,<picture>
元素的作用:
- 通过
<source>
给出一系列对兼容性有所要求的现代图片格式选项 - 通过
<img>
给出兜底的高兼容性图片格式选项 - 浏览器通过对给出的图片格式做特性检测,要决定加载哪个 URL,user agent 检查每个
<source>
的 srcset、media 和 type 属性,来选择最匹配页面当前布局、显示设备特征等的兼容图像。 - 最终,所选图像呈现在
<img>
元素占据的空间中
模块总结
总结一下,本文对常见的图片格式以及最新的几种未被大规模兼容的图片格式进行的对比,它们分别是:
- PNG-8/PNG-24
- JPEG
- GIF
- WebP
- JPEG XL
- AVIF
其后,着重介绍了 3 种现代图片格式:WebP、JPEG XL、AVIF。相对于 JPEG 等传统格式,它们在色彩表现、动画支持、是否支持无损有损压缩、压损比率、编解码性能上有着更进一步的提升,正在成为下一阶段 Web 图像的标准。
最后,介绍了 <picture>
元素,借助它,我们能更好的实现图片的渐进增强。
适配不同的屏幕尺寸及 DPR
下一个模块,我们来看看图片资源如何更好的适配不同的屏幕尺寸。
这里首先会涉及一个预备知识,屏幕的 DPR 值,那么,什么是 DPR 呢?要了解 DPR,又需要知道什么是设备独立像素 以及 物理像素。
设备独立像素
以 iPhone6/7/8为例,这里我们打开 Chrome 开发者工具:
这里的 375 * 667
表示的是什么呢,表示的是设备独立像素(DIP),也可以理解为 CSS 像素,也称为逻辑像素:
设备独立像素 = CSS 像素 = 逻辑像素
如何记忆呢?这里使用 CSS 像素来记忆,也就是说。我们设定一个宽度为 375px 的 div,刚好可以充满这个设备的一行,配合高度 667px ,则 div 的大小刚好可以充满整个屏幕。
物理像素
OK,那么,什么又是物理像素呢。我们到电商网站购买手机,都会看一看手机的参数,以 JD 上的 iPhone7 为例:
可以看到,iPhone7 的分辨率是 1334 x 750
,这里描述的就是屏幕实际的物理像素。
物理像素,又称为设备像素。显示屏是由一个个物理像素点组成的,1334 x 750
表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色,就可以使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位为pt。
设备像素 = 物理像素
DPR(Device Pixel Ratio) 设备像素比
OK,有了上面两个概念,就可以顺理成章引出下一个概念。DPR(Device Pixel Ratio) 设备像素比,这个与我们通常说的视网膜屏(多倍屏,Retina屏)有关。
设备像素比描述的是未缩放状态下,物理像素和设备独立像素的初始比例关系。
简单的计算公式:
DPR = 物理像素 / 设备独立像素
我们套用一下上面 iPhone7 的数据(取设备的物理像素宽度与设备独立像素宽度进行计算):
iPhone7’s DPR = iPhone7’s 物理像素宽度 / iPhone7's 设备独立像素宽度 = 2
750 / 375 = 2 或者是 1334 / 667 = 2
可以得到 iPhone7 的 dpr 为 2。也就是我们常说的视网膜屏幕。
视网膜(Retina)屏幕是苹果公司"发明"的一个营销术语。 苹果公司将 dpr > 1
的屏幕称为视网膜屏幕。
在视网膜屏幕中,以 dpr = 2 为例,把 4(2x2) 个像素当 1 个像素使用,这样让屏幕看起来更精致,但是元素的大小本身却不会改变:
OK,我们再来看看 iPhone XS Max:
它的物理像素如上图是 2688 x 1242
,
它的 CSS 像素是 896 x 414
,很容易得出 iPhone XS Max 的 dpr 为 3。
为不同 DPR 屏幕,提供恰当的图片
那么,DPR 和图片适配有什么关系呢?
举个例子,同样的 CSS 像素大小下,屏幕如果有不同 DPR,同样大小的图片渲染出来的效果不尽相同。
我们以 dpr = 3
的手机为例子,在 300 x 389
CSS 像素大小的范围内,渲染 1倍/2倍/3倍 图的效果如下:
实际图片所占的物理像素为 900 x 1167。
可以看到,在高 DPR 设备下提供只有 CSS 像素大小的图片,是非常模糊的。
因此,为了在不同的 DPR 屏幕下,让图片看起来都不失真,我们需要为不同 DPR 的图片,提供不同大小的图片。
那么,有哪些可行的解决方案呢?
方案一:无脑多倍图
假设,在移动端假设我们需要一张 CSS 像素为 300 x 200
的图像,考虑到现在已经有了 dpr = 3 的设备,那么要保证图片在 dpr = 3 的设备下也正常高清展示,我们最大可能需要一张 900 x 600
的原图。
这样,不管设备的 dpr 是否为 3,我们统一都使用 3 倍图。这样即使在 dpr = 1,dpr = 2 的设备上,也能非常好的展示图片。
当然这样并不可取,会造成大量带宽的浪费。
现代浏览器,提供了更好的方式,让我们能够根据设备 dpr 的不同,提供不同尺寸的图片。
方案二:媒体查询
方案二,我们可以考虑使用媒体查询。到今天,我们可以通过相应的媒体查询,得知当前的设备的 DPR 值,这样,我们就可以在对应的媒体查询中,使用对应的图片。
像是这样:
#id {
background: url(xxx@2x.png)
}
@media (device-pixel-ratio: 2) {
#id {
background: url(xxx@2x.png)
}
}
@media (device-pixel-ratio: 3) {
#id {
background: url(xxx@3x.png)
}
}
这个方案的缺点在于:
- 要写的代码可能太多了,而且,可能存在一些介于 1
2,23 之间的 DPR 值,不好穷举出所有场景 - 需要注意语法需要的兼容性,需要添加前缀,譬如
-webkit-min-device-pixel-ratio
,当然这个可以由autoprefixer
辅助解决
方案三:CSS 配合 image-set 语法
image-set
属于 CSS background 中的一种语法,image-set()
函数为设备提供最合适的图像分辨率,它提供一组图像选项,每个选项都有一个相关的 DPR 声明,浏览器将从中选择最适合设备的图像进行设置。
什么意思呢,来看看代码:
.img {
/* 不支持 image-set 的浏览器*/
background-image: url('../photo@2x.png');
/* 支持 image-set 的浏览器*/
background-image: image-set(
url('./photo@2x.png') 2x,
url('./photo@3x.png') 3x
);
}
这样一看,作用应该很清晰了。对于支持 image-set
语法的浏览器:
- 如果其设备对应的 DPR 为 2,会选取这条
url('./photo@2x.png') 2x
记录,也就是最终生效的 URL 是'./photo@2x.png'
; - 如果其设备对应的 DPR 为 3,会选取这条
url('./photo@3x.png') 3x
记录,也就是最终生效的 URL 是'./photo@3x.png'
;
其中的 2x
,3x
就是用于匹配 DRP的。
使用 image-set
的一些痛点与媒体查询方案类似。代码量与兼容性语法,而且难以匹配所有情况。
方案四:srcset 配合 1x 2x 像素密度描述符
简单来说,srcset 可以根据不同的 dpr 拉取对应尺寸的图片:
<div class='illustration'>
<img src='illustration-small.png'
srcset='images/illustration-small.png 1x,
images/illustration-big.png 2x'
>
</div>
上面 srcset
里的 1x,2x 表示 像素密度描述符,表示
- 当屏幕的 dpr = 1 时,使用
images/illustration-small.png
这张图 - 当屏幕的 dpr = 2 时,使用
images/illustration-big.png
这张图 - 如果不支持
srcset
语法,src='illustration-small.png'
将会是最终的兜底方案
方案五:srcset 属性配合 sizes 属性 w 宽度描述符
上面 1x,2x 的写法比较容易接受易于理解。
但是,上述 3 种方案都存在统一的问题,只考虑了 DPR,但是忽略了响应性布局的复杂性与屏幕的多样性。
因此,规范还推出了一种方案 -- srcset 属性配合 sizes 属性 w 宽度描述符。
srcset
属性还有一个 w 宽度描述符,配合 sizes
属性一起使用,可以覆盖更多的面。
sizes
属性怎么理解呢?它定义图像元素在不同的视口宽度时,可能的大小值。
以下面这段代码为例子:
<img
sizes = “(min-width: 600px) 600px, 300px"
src = "photo.png"
srcset = “photo@1x.png 300w,
photo@2x.png 600w,
photo@3x.png 1200w,
>
解析一下:
sizes = “(min-width: 600px) 600px, 300px"
的意思是:
- 如果屏幕当前的 CSS 像素宽度大于或者等于 600px,则图片的 CSS 宽度为 600px
- 反之,则图片的 CSS 宽度为 300px
也就是 sizes 属性声明了在不同宽度下图片的 CSS 宽度表现。这里可以理解为,大屏幕下图片宽度为 600px,小屏幕下图片宽度为 300px。
需要注意的是,这里大屏、小屏下图片具体的宽度表现,还是需要借助媒体查询代码,经由 CSS 实现的
srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w
里面的 300w,600w,900w 叫宽度描述符。
那么,怎么确定当前场景会选取哪张图片呢?
当前屏幕 dpr = 2 ,CSS 宽度为 375px。
当前屏幕 CSS 宽度为 375px,则图片 CSS 宽度为 300px。分别用上述 3 个宽度描述符的数值除以 300。
- 300 / 300 = 1
- 600 / 300 = 2
- 1200 / 300 = 4
上面计算得到的 1、 2、 4 即是算出的有效的像素密度,换算成和 x 描述符等价的值 。这里 600w 算出的 2 即满足 dpr = 2 的情况,选择此张图。
当前屏幕 dpr = 3 ,CSS 宽度为 414px。
当前屏幕 CSS 宽度为 414px,则图片 CSS 宽度仍为 300px。再计算一次:
- 300 / 300 = 1
- 600 / 300 = 2
- 1200 / 300 = 4
因为 dpr = 3,2 已经不满足了,则此时会选择 1200w 这张图。
当前屏幕 dpr = 1 ,CSS 宽度为 1920px。
当前屏幕 CSS 宽度为 1920px,则图片 CSS 宽度变为了 600px。再计算一次:
- 300 / 600 = .5
- 600 / 600 = 1
- 1200 / 600 = 2
因为 dpr = 1,所以此时会选择 600w 对应的图片。
具体的可以试下这个 Demo:CodePen Demo -- srcset属性配合w宽度描述符配合sizes属性
此方案的意义在于考虑到了响应性布局的复杂性与屏幕的多样性,利用上述规则,可以一次适配 PC 端大屏幕和移动端高清屏,一箭多雕。
嗯,总结一下,在实现响应式图像时,我们同时使用 srcset
和 sizes
属性。它们的作用是:
-
srcset
:定义多个不同宽度的图像源,让浏览器在 HTML 解析期间选择最合适的图像源 -
sizes
:定义图像元素在不同的视口宽度时,可能的大小值
有了这些属性后,浏览器就会根据 srcset/size 来创建一个分辨率切换器的响应式图片,可以在不同的分辨率的情况下,提供相同尺寸的图像,或者在不同的视图大小的情况下,提供不同尺寸大小的图像。
模块总结
本章节一共列举了 5 种实现响应式图片,适配不同屏幕大小,不同 DPR 的方式,它们分别是:
- 无脑多倍图的方式
- DRP 媒体查询
- CSS Background 中的使用
image-set
- srcset 配合 1x 2x 像素密度描述符
- srcset 属性配合 sizes 属性 w 宽度描述符
合理使用它们,可以有效的为不同屏幕,提供最为恰当的图片资源,在保证用户体验的同时,尽可能节省带宽。
它们各有优缺点,可以根据自己实际的业务场景,选取合适相对成本最低的方案,并且适当的配合 Autoprefixer 以及一些 PostCSS 等工具,简化代码量。
图片的宽高比、裁剪与缩放
OK,下面进入到我们的第三个模块,图片的宽高比、裁剪与缩放。我们会介绍 4 个新的特性:
aspect-ratio
object-fit
object-position
image-rendering
使用 aspect-ratio
避免布局偏移
很多时候,只能使用固定尺寸大小的图片,我们的布局可能是这样:
对应的布局:
<ul class="g-container">
<li>
<img src="http://placehold.it/150x100">
<p>图片描述</p>
</li>
</ul>
ul li img {
width: 150px;
}
当然,万一假设后端接口出现一张非正常大小的图片,上述不加保护的布局就会出问题:
所以对于图片,我们总是建议同时写上高和宽,避免因为图片尺寸错误带来的布局问题:
ul li img {
width: 150px;
height: 100px;
}
同时,给 <img>
标签同时写上高宽,可以在图片未加载之前提前占住位置,避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。
当然,到今天,我们还可以使用 aspect-ratio
设定图片的高宽比。
aspect-ratio
CSS 属性为容器规定了一个期待的宽高比,这个宽高比可以用来计算自动尺寸以及为其他布局函数服务。
像是上面的代码,我们就可以替换成:
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
}
当然,有的时候,我们的布局是响应式动态在变化的,容器的宽度也是不确定的,因此,有了 aspect-ratio
之后,我们的写法就可以更佳的舒服。
ul li img {
width: 100%;
aspect-ratio: 3 / 2;
}
这里,容器基于 Flex 弹性布局或者响应式布局,其宽度是不固定的,但是图片的宽高比是固定的,使用 aspect-ratio: 3 / 2
就能非常好的适配这种情况。
我们借助了 aspect-ratio 这个 CSS 中较新的属性来始终自动获得正确的宽高比,无论其父元素的宽度如何变化。
当然,
aspect-ratio
不仅仅只是能运用在这里,在aspect-ratio
出现之前,我们只能通过一些其它的 Hack 方式,譬如设置padding-top
等方式模拟固定的宽高比。在aspect-ratio
之后,我们终于有了设定容器固定宽高比的能力。
object-fit
避免图片拉伸
当然,限制高宽也会出现问题,譬如图片被拉伸了,非常的难看:
这个时候,我们可以借助 object-fit
,它能够指定可替换元素的内容(也就是图片)该如何适应它的父容器的高宽。
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
object-fit: cover;
}
利用 object-fit: cover
,使图片内容在保持其宽高比的同时填充元素的整个内容框。
object-fit
的取值有 fill
、none
、contain
、cover
,与 background-size
类似,可以类比记忆。
也可以看看这张图,很易于理解:
object-fit
还有一个配套属性 object-position
,它可以控制图片在其内容框中的位置。(类似于 background-position
),默认是 object-position: 50% 50%
,如果你不希望图片居中展示,可以使用它去改变图片实际展示的 position。
ul li img {
width: 150px;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: 50% 100%;
}
像是这样,object-position: 100% 50%
指明从底部开始展示图片。这里有一个很好的 Demo 可以帮助你理解 object-position
。
CodePen Demo -- Object position
使用 image-rendering
设置图片缩放算法
相对于上面几个新特性,image-rendering
会更为冷门。
很多时候,我们设置一个图片在页面上的展示大小为 200px x 200px
,但是图片的原始尺寸可能是 800px x 800px
,也可能是 50px x 50px
。
这个时候,我们就可以利用 image-rendering
,设置图片在缩放状态下的展示算法。
image-rendering
在特定的场景下,能够起到奇效。
来看这样一个有意思的 DEMO,假设我们有这样一个原图效果,它是一个二维码,大小为 100px x 100px
:
如果我们将它放大,放到很大,明显,这个二维码会失真,像是这样:
OK,在这种放大失真的情况想,可以使用 image-rendering
改变图片缩放算法,这里我们试一下 image-rendering: pixelated
:
.img {
image-rendering: pixelated;
}
效果变化,如下图所示:
可以看到,image-rendering: pixelated
处理过的图像,竟然变得如此清晰!
CodePen Demo -- QrCode Image-rendering demo
来看看 image-rendering
的几个取值:
-
image-rendering: auto
:自 Gecko 1.9(Firefox 3.0)起,Gecko 使用双线性(bilinear)算法进行重新采样(高质量)。 -
image-rendering: smooth
:使用能最大化图像客观观感的算法来缩放图像 -
image-rendering: high-quality
:与 smooth 相同,但更倾向于高质量的缩放。 -
image-rendering: crisp-edges
:必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放,并且,该算法既不会平滑颜色,又不会在处理过程中为图像引入模糊。合适的算法包括最近邻居(nearest-neighbor)算法和其他非平滑缩放算法,比如 2×SaI 和 hqx-* 系列算法。此属性值适用于像素艺术作品,例如一些网页游戏中的图像。 -
image-rendering: pixelated
:放大图像时,使用最近邻居算法,因此,图像看着像是由大块像素组成的。缩小图像时,算法与 auto 相同。
虽然规范定义了挺多值,但是实际上,现代浏览器基本暂时只支持:auto
、pixelated
、以及 -webkit-optimize-contrast
(Chrome 下的 smooth)。
看描述都会挺懵逼的,实际使用的时候,最好每个都试一下验证一下效果。总结而言,image-rendering
的作用是在图像缩放时,提供不一样的渲染方式,让图片的展示形态更为多样化,或者说是尽可能的去减少图片的失真带来的信息损耗。
我们再看一个 DEMO,原图如下(例子来源于 W3C 规范文档):
实际效果:
当然,看上去 pixelated
的效果挺好,这是由于这是一张偏向于矢量的图片,细节不多,对于高精度的人物图,就不太适用于 pixelated
,容易把图片马赛克化。
真正规范希望的在放大后让图片尽可能不失真的 crisp-edges
效果,目前暂时没有得到浏览器的实现。后面可以期待一下。
CodePen Demo -- Image-rendering demo
模块总结
这一章,我们介绍了 4 个较新的 CSS 特性:
-
aspect-ratio
:控制容器的宽高比,避免产生布局偏移及抖动 -
object-fit
:设定内容应该如何适应到其使用高度和宽度确定的框,避免图片拉伸 -
object-position
:基于object-fit
,设置图片实际展示的 position 范围 -
image-rendering
:控制图片在缩放状态下的展示算法
合理利用它们,可以给用户在图片上以更好的体验。
懒加载/异步图像解码方案
继续下一个章节。本章节,我们来讨论下图片的懒加载与异步图像解码方案。
图片的懒加载
懒加载是一种网页性能优化的常见方式,它能极大的提升用户体验。到今天,现在一张图片超过几 M 已经是常见事了。如果每次进入页面都需要请求页面上的所有的图片资源,会较大的影响用户体验,对用户的带宽也是一种极大的损耗。
所以,图片懒加载的意义即是,当页面未滚动到相应区域,该区域内的图片资源(网络请求)不会被加载。反之,当页面滚动到相应区域,相关图片资源的请求才会被发起。
在过去,我们通常都是使用 JavaScript 方案进行图片的懒加载。而今天,我们在图片的懒加载实现上,有了更多不一样的选择。
JavaScript 方案实现图片的懒加载
首先,回顾一下过往最常见的,使用 JavaScript 方案实现图片的懒加载。
通过 JavaScript 实现的懒加载,主要是两种方式:
- 监听 onscroll 事件,通过
getBoundingClientRect
API 获取元素图片距离视口顶部的距离,配合当前可视区域的位置实现图片的懒加载 - 通过 HTML5 的
IntersectionObserver
API,Intersection Observer(交叉观察器) 配合监听元素的isIntersecting
属性,判断元素是否在可视区内,能够实现比监听 onscroll 性能更佳的图片懒加载方案
但是,JavaScript 方案的一个劣势在于,不管如何,需要引入一定量的 JavaScript 代码,进行一定量的运算。
到今天,其实我们有更多的其他便捷的方式去实现图片的懒加载。
使用 content-visibility: auto
实现图片内容的延迟渲染
首先,介绍一个非常有用,但是相对较为冷门的属性 -- content-visibility
。
content-visibility
:属性控制一个元素是否渲染其内容,它允许用户代理(浏览器)潜在地省略大量布局和渲染工作,直到需要它为止。
利用 content-visibility
的特性,我们可以实现如果该元素当前不在屏幕上,则不会渲染其后代元素。
假设我们有这样一个 DEMO:
<div class="g-wrap">
// 模块 1
<div class="paragraph">
<p>Lorem Start!</p>
<img src="https://s1.ax1x.com/2023/02/20/pSX1xMV.png" alt="" />
<p>Lorem End!</p>
</div>
// 模块 2
<div class="paragraph">
<p>Lorem Start!</p>
<img src="https://s1.ax1x.com/2023/02/20/pSX1xMV.png" alt="" />
<p>Lorem End!</p>
</div>
// ... 连续几十个上述类似的结构
</div>
只需要给需要延迟(实时)渲染的元素,设置简单的 CSS 样式:
.paragraph {
content-visibility: auto;
}
我们来看一下,设置了 content-visibility: auto
与没设置的区别。
如果,不添加上述的 content-visibility: auto
代码,页面的滚动条及滚动效果如下:
那么,在添加了 content-visibility: auto
之后,注意观察页面的滚动条及滚动效果:
可以看到滚动条在向下滚动在不断的抽搐,这是由于下面不在可视区域内的内容,一开始是没有被渲染的,在每次滚动的过程中,才逐渐渲染,以此来提升性能。
Codepen Deom -- content-visibility: auto Image Load Demo
content-visibility: auto
VS 图片懒加载
当然,其实使用 content-visibility: auto
并不能真正意义上实现图片的懒加载。
这是因为,即便当前页面可视区域外的内容未被渲染,但是图片资源的 HTTP/HTTPS 请求,依然会在页面一开始被触发!
因此,这也得到了一个非常重要的结论:
content-visibility: auto
无法直接替代图片懒加载,设置了 content-visibility: auto
的元素在可视区外只是未被渲染,但是其中的静态资源仍旧会在页面初始化的时候被全部加载。因此,它更像是一个虚拟列表的替代方案。
关于
content-visibility
本文限于篇幅,没有完全展开,但是它是一个非常有意思且对渲染性能有帮助的属性,完整的教程,你可以看我的这篇文章 -- 使用 content-visibility 优化渲染性能
使用 loading=lazy
HTML 属性实现图片懒加载
OK,content-visibility
很不错,但是略有瑕疵。但是,我们还有其他方式。
HTML5 新增了一个 loading
属性。
到今天,除了 IE 系列浏览器,目前都支持通过 loading
属性实现延迟加载。此属性可以添加到 <img>
元素中,也可以添加到 <iframe>
元素中。
属性的值为 loading=lazy
会告诉浏览器,如果图像位于可视区时,则立即加载图像,并在用户滚动到它们附近时获取其他图像。
我们可以像是这样使用它:
<img src="xxx.png" loading="lazy">
这样,便可以非常便捷的实现图片的懒加载,省去了添加繁琐的 JavaScript 代码的过程。
看看 loading=lazy
到今天(2023-02-26)的兼容性,还是非常不错的:
使用 decoding=async
实现图片的异步解码
除了 loading=lazy
,HTML5 还新增了一个非常有意思的属性增强图片的用户体验。那就是 decoding
属性。
HTMLImageElement 接口的 decoding
属性用于告诉浏览器使用何种方式解析图像数据。
它的可选取值如下:
-
sync
: 同步解码图像,保证与其他内容一起显示。 -
async
: 异步解码图像,加快显示其他内容。 -
auto
: 默认模式,表示不偏好解码模式。由浏览器决定哪种方式更适合用户。
上文其实也提及了,浏览器在进行图片渲染展示的过程中,是需要对图片文件进行解码的,这一个过程快慢与图片格式有关。
而如果我们不希望图片的渲染解码影响页面的其他内容的展示,可以使用 decoding=async
选项,像是这样:
<img src="xxx.png" decoding="async">
这样,浏览器便会异步解码图像,加快显示其他内容。这是图片优化方案中可选的一环。
同样的,我们来看看到今天(2023-02-26),decoding="async"
的兼容性,整体还是非常不错的,作为渐进增强方案使用,是非常好的选择。
实际检验 loading=lazy
与 decoding=async
效果
OK,下面我们制作一个简单的 DEMO,试一下 loading=lazy
与 decoding=async
的效果。
我们准备一个拥有 339 个图片的 HTML 页面,每个图片文件的 src 大小不一。
<div class="g-container">
<img src="image1.jpeg">
<img src="image2.jpeg">
// ... 339 个
</div>
CSS 的设置也很重要,由于是纯图片页面,如果不给图片设置默认高宽,最页面刷新的一瞬间,<img>
元素的高宽都是 0,会导致所有 <img>
元素都在可视区内,所以,我们需要给 <img>
设置一个默认的高宽:
img {
margin: 8px;
width: 300px;
height: 200px;
object-fit: cover;
}
这样,再不添加 loading=lazy
与 decoding=async
的状态下,看看 Network
的表现:
我这里没有模拟弱网环境,网速非常快,可以看到,发送了 339 个图片资源请求,也就是全部的图片资源在页面加载的过程中都请求了,页面 Load
事件完成的时间为 1.28s。
好,我们给所有的图片元素,添加上 loading=lazy
与 decoding=async
:
<div class="g-container">
<img src="image1.jpeg" loading="lazy" decoding="async">
<img src="image2.jpeg" loading="lazy" decoding="async">
// ... 339 个
</div>
看看效果:
可以看到,这一次只发送了 17 个图片资源请求,页面 Load
事件完成的时间为 26ms。
优化前 | 优化后 |
---|---|
1.28s | 26 ms |
1.28s 到 26ms,效果是非常明显的,如果是弱网环境,对首屏加载性能的提升,会更为明显!
当然,实际我测试的过程也,也单独试过 decoding="async"
的作用,只是由于是纯图片页面,效果不那么明显。感兴趣的同学,可以自行尝试。
模块总结
在本章节中,我们介绍了不同的方式实现图片的懒加载、延迟渲染、异步解码,它们分别是:
- 通过 onscroll 事件与
getBoundingClientRect
API 实现图片的懒加载方案 - 通过 Intersection Observer(交叉观察器)实现比监听 onscroll 性能更佳的图片懒加载方案
- 通过
content-visibility: auto
实现图片资源的延迟渲染 - 通过
loading=lazy
HTML 属性实现图片懒加载 - 通过
decoding=async
HTML 属性实现图片的异步解码
图片资源的容错及可访问性处理
OK,最后一个章节,我们简单聊一聊图片资源的容错及可访问性处理。
图片的可访问性处理
可访问性(A11Y),在我们的网站中,属于非常重要的一环,但是大部分同学都容易忽视它。
在一些重交互、重逻辑的网站中,我们需要考虑用户的使用习惯、使用场景,从高可
推荐阅读
-
如何提升图片显示速度与用户体验:现代响应式图片优化实战指南
-
如何提升现代图片显示速度与用户体验:详解各类图片格式与HTML5 Picture 标签的运用技巧
-
提升图片和用户体验的现代优化策略指南
-
B端设计:任何不顾及用户体验的设计,都是在装样子,花架子-用户研究和需求分析:了解目标用户的特点、需求和痛点,通过调研和用户测试等方法获取真实的用户反馈和意见。 信息架构和界面设计:建立清晰的信息架构,使用户能够快速找到所需的信息和功能。界面设计要符合用户的习惯和期望,简洁明了,易于操作。 功能和流程设计:根据用户需求和工作流程,设计合理的功能和流程,减少用户的操作步骤和复杂度,提高工作效率。 可用性测试和反馈收集:通过用户测试和反馈收集,及时发现和修复设计中的问题和不足,不断优化和改进设计。 只有在考虑到用户体验的前提下,B端设计才能真正为企业带来价值。不顾及用户体验的设计只是为了装样子,花架子,无法满足用户的需求,也无法帮助企业提升竞争力。因此,在进行B端设计时,务必将用户体验放在首位,以用户为中心,为企业创造实际的价值。 如何评估用户体验是否合理呢? 尼尔森用户体验十大原则
-
中文顶刊上用准自然实验识别的实证文章有哪些?有的附程序和code, 不看至少需要收藏一下!-经济研究 [1]刘啟仁,赵灿.税收政策激励与企业人力资本升级[J].经济研究,2020,55(04):70-85. [2]李广众,朱佳青,李杰,李新春.经理人相对绩效评价与企业并购行为:理论与实证[J].经济研究,2020,55(03):65-82. [3]张克中,欧阳洁,李文健.缘何“减税难降负”:信息技术、征税能力与企业逃税[J].经济研究,2020,55(03):116-132. [4]周波,赵国昌.中国间接税税负归宿研究:汽车市场准自然实验的证据[J].经济研究,2020,55(03):133-147. [5]毛其淋.贸易政策不确定性是否影响了中国企业进口?[J].经济研究,2020,55(02):148-164. [6]刘瑞明,毛宇,亢延锟.制度松绑、市场活力激发与旅游经济发展——来自中国文化*改革的证据[J].经济研究,2020,55(01):115-131. [7]施新政,高文静,陆瑶,李蒙蒙.资本市场配置效率与劳动收入份额——来自股权分置改革的证据[J].经济研究,2019,54(12):21-37. [8]王永钦,吴娴.中国创新型货币政策如何发挥作用:抵押品渠道[J].经济研究,2019,54(12):86-101. [9]唐宜红,俞峰,林发勤,张梦婷.中国高铁、贸易成本与企业出口研究[J].经济研究,2019,54(07):158-173. [10]张琦,郑瑶,孔东民.地区环境治理压力、高管经历与企业环保投资——一项基于《环境空气质量标准(2012)》的准自然实验[J].经济研究,2019,54(06):183-198. [11]冯晨,陈舒,白彩全.长期人力资本积累的历史根源:制度差异、儒家文化传播与国家能力塑造[J].经济研究,2019,54(05):146-163. [12]刘柏惠,寇恩惠,杨龙见.增值税多档税率、资源误置与全要素生产率损失[J].经济研究,2019,54(05):113-128. [13]陈林,万攀兵.《京都议定书》及其清洁发展机制的减排效应——基于中国参与全球环境治理微观项目数据的分析[J].经济研究,2019,54(03):55-71. [14]范子英,赵仁杰.法治强化能够促进污染治理吗?——来自环保法庭设立的证据[J].经济研究,2019,54(03):21-37. [15]夏怡然,陆铭.跨越世纪的城市人力资本足迹——历史遗产、政策冲击和劳动力流动[J].经济研究,2019,54(01):132-149. [16]毛其淋.人力资本推动中国加工贸易升级了吗?[J].经济研究,2019,54(01):52-67. [17]齐绍洲,林屾,崔静波.环境权益交易市场能否诱发绿色创新?——基于我国上市公司绿色专利数据的证据[J].经济研究,2018,53(12):129-143. [18]李明,李德刚,冯强.中国减税的经济效应评估——基于所得税分享改革“准自然试验”[J].经济研究,2018,53(07):121-135. [19]陈德球,陈运森.政策不确定性与上市公司盈余管理[J].经济研究,2018,53(06):97-111. [20]杜鹏程,徐舒,吴明琴.劳动保护与农民工福利改善——基于新《劳动合同法》的视角[J].经济研究,2018,53(03):64-78. [21]许和连,王海成.简政放权改革会改善企业出口绩效吗?——基于出口退(免)税审批权下放的准自然试验[J].经济研究,2018,53(03):157-170. [22]苏冬蔚,倪博.转融券制度、卖空约束与股价变动[J].经济研究,2018,53(03):110-125. [23]毕青苗,陈希路,徐现祥,李书娟.行政审批改革与企业进入[J].经济研究,2018,53(02):140-155. [24]李艳,杨汝岱.地方国企依赖、资源配置效率改善与供给侧改革[J].经济研究,2018,53(02):80-94. [25]陈林.自然垄断与混合所有制改革——基于自然实验与成本函数的分析[J].经济研究,2018,53(01):81-96. [26]赵西亮.教育、户籍转换与城乡教育收益率差异[J].经济研究,2017,52(12):164-178. [27]陆蓉,何婧,崔晓蕾.资本市场错误定价与产业结构调整[J].经济研究,2017,52(11):104-118. [28]*生,李好,马伟力,林秉旋.融资融券交易的信息治理效应[J].经济研究,2017,52(11):150-164. [29]钱雪松,方胜.担保物权制度改革影响了民营企业负债融资吗?——来自中国《物权法》自然实验的经验证据[J].经济研究,2017,52(05):146-160. [30]王朝阳,王振霞.涨跌停、融资融券与股价波动率——基于AH股的比较研究[J].经济研究,2017,52(04):151-165. [31]范子英,彭飞.“营改增”的减税效应和分工效应:基于产业互联的视角[J].经济研究,2017,52(02):82-95. [32]马述忠,张洪胜.集群商业信用与企业出口——对中国出口扩张奇迹的一种解释[J].经济研究,2017,52(01):13-27. [33]余明桂,钟慧洁,范蕊.业绩考核制度可以促进央企创新吗?[J].经济研究,2016,51(12):104-117. [34]林卉,许尤洋,刘峰.中国资本市场“框架效应”现象的实证研究——基于中组部18号文的自然实验[J].经济研究,2016,51(12):161-175. [35]刘啟仁,黄建忠.人民币汇率、依市场定价与资源配置效率[J].经济研究,2016,51(12):18-31. [36]叶青,赵良玉,刘思辰.独立董事“政商旋转门”之考察:一项基于自然实验的研究[J].经济研究,2016,51(06):98-113. [37]范子英,彭飞,刘冲.政治关联与经济增长——基于卫星灯光数据的研究[J].经济研究,2016,51(01):114-126. [38]毛其淋,许家云.中间品贸易*化与制造业就业变动——来自中国加入WTO的微观证据[J].经济研究,2016,51(01):69-83. [39]赵绍阳,臧文斌,尹庆双.医疗保障水平的福利效果[J].经济研究,2015,50(08):130-145. [40]*生,陈晨,林秉旋.卖空机制提高了中国股票市场的定价效率吗?——基于自然实验的证据[J].经济研究,2015,50(04):165-177. [41]李科,徐龙炳,朱伟骅.卖空限制与股票错误定价——融资融券制度的证据[J].经济研究,2014,49(10):165-178. [42]简泽,张涛,伏玉林.进口*化、竞争与本土企业的全要素生产率——基于中国加入WTO的一个自然实验[J].经济研究,2014,49(08):120-132. [43]范子英,李欣.部长的政治关联效应与财政转移支付分配[J].经济研究,2014,49(06):129-141. [44]陈刚,李树.司法独立与市场分割——以法官异地交流为实验的研究[J].经济研究,2013,48(09):30-42+70. [45]范子英,田彬彬.税收竞争、税收执法与企业避税[J].经济研究,2013,48(09):99-111. [46]简泽,干春晖,余典范.银行部门的市场化、信贷配置与工业重构[J].经济研究,2013,48(05):112-127. [47]李树,陈刚.环境管制与生产率增长——以APPCL2000的修订为例[J].经济研究,2013,48(01):17-31. [48]马双,张劼,朱喜.最低工资对中国就业和工资水平的影响[J].经济研究,2012,47(05):132-146. [49]白重恩,李宏彬,吴斌珍.医疗保险与消费:来自新型农村合作医疗的证据[J].经济研究,2012,47(02):41-53. [50]叶光亮,邓国营,黎志刚.个人住房贷款行为与房贷调控的有效性分析[J].经济研究,2011,46(S1):105-115. 经济学季刊 [1]王剑程,李丁,马双.宽带建设对农户创业的影响研究——基于“宽带乡村”建设的准自然实验[J].经济学(季刊),2020,19(01):209-232. [2]李仲飞,于守金,曹夏平.产业信贷政策对于房地产企业债务的影响——基于银行业359号“限贷”文件的准自然实验分析[J].经济学(季刊),2019,18(04):1373-1396. [3]吕铁,王海成.放松银行准入管制与企业创新——来自股份制商业银行在县域设立分支机构的准自然试验[J].经济学(季刊),2019,18(04):1443-1464. [4]陈晓红,朱蕾,汪阳洁.驻地效应——来自国家土地督察的经验证据[J].经济学(季刊),2019,18(01):99-122. [5]刘行,叶康涛,陆正飞.加速折旧政策与企业投资——基于“准自然实验”的经验证据[J].经济学(季刊),2019,18(01):213-234. [6]毛其淋,许家云.外资进入如何影响了本土企业出口国内附加值?[J].经济学(季刊),2018,17(04):1453-1488. [7]王智波,韩希.废止收容遣送制度的经济影响——基于检验最优城市理论的实证研究[J].经济学(季刊),2018,17(03):1013-1034. [8]卢盛峰,吴一平,谢潇.历史名片的经济价值——来自中国城市更名的证据[J].经济学(季刊),2018,17(03):1055-1078. [9]郭峰,熊瑞祥.地方金融机构与地区经济增长——来自城商行设立的准自然实验[J].经济学(季刊),2018,17(01):221-246. [10]*,李培鑫,李丽霞.*合作、市场整合与城市群经济绩效——基于长三角城市经济协调会的实证检验[J].经济学(季刊),2017,16(04):1563-1582. [11]边文龙,王向楠,李冉.保险费率市场化效果的解释和评估[J].经济学(季刊),2017,16(04):1477-1498. [12]刘怡,耿纯,赵仲匡.出口退税*间分担对产品出口的影响[J].经济学(季刊),2017,16(03):1011-1030. [13]倪骁然,朱玉杰.卖空压力影响企业的风险行为吗?——来自A股市场的经验证据[J].经济学(季刊),2017,16(03):1173-1198. [14]毛其淋,许家云.中间品贸易*化提高了企业加成率吗?——来自中国的证据[J].经济学(季刊),2017,16(02):485-524. [15]刘瑞明,赵仁杰.匿名审稿制度推动了中国的经济学进步吗?——基于双重差分方法的研究[J].经济学(季刊),2017,16(01):173-204. [16]范子英,田彬彬.政企合谋与企业逃税:来自国税局长异地交流的证据[J].经济学(季刊),2016,15(04):1303-1328. [17]丘心颖,郑小翠,邓可斌.分析师能有效发挥专业解读信息的作用吗?——基于汉字年报复杂性指标的研究[J].经济学(季刊),2016,15(04):1483-1506. [18]马榕,石晓军.中国债券信用评级结果具有甄别能力吗?——基于盈余管理敏感性的视角[J].经济学(季刊),2016,15(01):197-216. [19]李楠,林矗.太平天国战争对近代人口影响的再估计——基于历史自然实验的实证分析[J].经济学(季刊),2015,14(04):1325-1346. [20]管汉晖,陈博凯.货币的非国家化:汉代中国的经历(前175—前144年)[J].经济学(季刊),2015,14(04):1497-1518. [21]陈思霞,卢盛峰.分权增加了民生性财政支出吗?——来自中国“省直管县”的自然实验[J].经济学(季刊),2014,13(04):1261-1282. [22]马双,孟宪芮,甘犁.养老保险企业缴费对员工工资、就业的影响分析[J].经济学(季刊),2014,13(03):969-1000. [23]马双,甘犁.最低工资对企业在职培训的影响分析[J].经济学(季刊),2014,13(01):1-26. [24]何浩然.公共政策的效果能否被准确预测?来自中国塑料袋使用限制政策的自然实验证据[J].经济学(季刊),2012,11(04):1305-1322. [25]雷晓燕.管理医疗模式的影响差异——来自加州医疗救助的经验证据[J].经济学(季刊),2010,9(01):333-348. 管理世界 [1]李永友,王超.集权式财政改革能够缩小城乡差距吗?——基于“乡财县管”准自然实验的证据[J].管理世界,2020,36(04):113-130. [2]肖静华,胡杨颂,吴瑶.成长品:数据驱动的企业与用户互动创新案例研究[J].管理世界,2020,36(03):183-205. [3]贾建民,耿维,徐戈,郝辽钢,贾轼.大数据行为研究趋势:一个“时空关”的视角[J].管理世界,2020,36(02):106-116+211-212. [4]黄俊威,龚光明.融资融券制度与公司资本结构动态调整——基于“准自然实验”的经验证据[J].管理世界,2019,35(10):64-81. [5]陈林,万攀兵,许莹盈.混合所有制企业的股权结构与创新行为——基于自然实验与断点回归的实证检验[J].管理世界,2019,35(10):186-205. [6]刘冲,刘晨冉,孙腾.交通基础设施、金融约束与县域产业发展——基于“国道主干线系统”自然实验的证据[J].管理世界,2019,35(07):78-88+203. [7]周茂,李雨浓,姚星,陆毅.人力资本扩张与中国城市制造业出口升级:来自高校扩招的证据[J].管理世界,2019,35(05):64-77+198-199. [8]陈胜蓝,马慧.贷款可获得性与公司商业信用——中国利率市场化改革的准自然实验证据[J].管理世界,2018,34(11):108-120+149. [9]毛其淋,许家云.贸易政策不确定性与企业储蓄行为——基于中国加入WTO的准自然实验[J].管理世界,2018,34(05):10-27+62+179. [10]赵静,*昌,刘峰.高铁开通与股价崩盘风险[J].管理世界,2018,34(01):157-168+192. [11]钟覃琳,陆正飞.资本市场开放能提高股价信息含量吗?——基于“沪港通”效应的实证检验[J].管理世界,2018,34(01):169-179. [12]叶菁菁,吴燕,陈方豪,王宇晴.个人所得税减免会增加劳动供给吗?——来自准自然实验的证据[J].管理世界,2017(12):20-32+187. [13]谢贞发,严瑾,李培.中国式“压力型”财政激励的财源增长效应——基于取消农业税改革的实证研究[J].管理世界,2017(12):46-60+187-188. [14]刘行,赵健宇,叶康涛.企业避税、债务融资与债务融资来源——基于所得税征管*改革的断点回归分析[J].管理世界,2017(10):113-129. [15]李超,李涵.空气污染对企业库存的影响——基于我国制造业企业数据的实证研究[J].管理世界,2017(08):95-105. [16]李文贵,余明桂,钟慧洁.央企董事会试点、国有上市公司代理成本与企业绩效[J].管理世界,2017(08):123-135+153. [17]陈胜蓝,马慧.卖空压力与公司并购——来自卖空管制放松的准自然实验证据[J].管理世界,2017(07):142-156. [18]申广军,邹静娴.企业规模、政企关系与实际税率——来自世界银行“投资环境调查”的证据[J].管理世界,2017(06):23-36. [19]卢盛峰,陈思霞.*偏袒缓解了企业融资约束吗?——来自中国的准自然实验[J].管理世界,2017(05):51-65+187-188. [20]顾乃康,周艳利.卖空的事前威慑、公司治理与企业融资行为——基于融资融券制度的准自然实验检验[J].管理世界,2017(02):120-134. [21]权小锋,尹洪英.中国式卖空机制与公司创新——基于融资融券分步扩容的自然实验[J].管理世界,2017(01):128-144+187-188. [22]倪骁然,朱玉杰.劳动保护、劳动密集度与企业创新——来自2008年《劳动合同法》实施的证据[J].管理世界,2016(07):154-167. [23]许伟,陈斌开.税收激励和企业投资——基于2004~2009年增值税转型的自然实验[J].管理世界,2016(05):9-17. [24]范子英,刘甲炎.为买房而储蓄——兼论房产税改革的收入分配效应[J].管理世界,2015(05):18-27+187. [25]李涵,唐丽淼.交通基础设施投资、空间溢出效应与企业库存[J].管理世界,2015(04):126-136. [26]贾俊雪,宁静.纵向财政治理结构与地方*职能优化——基于省直管县财政*改革的拟自然实验分析[J].管理世界,2015(01):7-17+187. [27]余淼杰,梁中华.贸易*化与中国劳动收入份额——基于制造业贸易企业数据的实证分析[J].管理世界,2014(07):22-31. [28]刘行,叶康涛.金融发展、产权与企业税负[J].管理世界,2014(03):41-52. [29]李泽广,马泽昊.契约环境、代理成本与企业投资—债务期限关系[J].管理世界,2013(08):183-185. [30]叶青,李增泉,李光青.富豪榜会影响企业会计信息质量吗?——基于政治成本视角的考察[J].管理世界,2012(01):104-120. [31]郑新业,王晗,赵益卓.“省直管县”能促进经济增长吗?——双重差分方法[J].管理世界,2011(08):34-44+65. [32]王贤彬,聂海峰.行政区划调整与经济增长[J].管理世界,2010(04):42-53. [33]贾明,张喆.高管的政治关联影响公司慈善行为吗?[J].管理世界,2010(04):99-113+187. [34]聂辉华,方明月,李涛.增值税转型对企业行为和绩效的影响——以东北地区为例[J].管理世界,2009(05):17-24+35. [35]攀登,施东晖,宋铮.证券市场泡沫的生成机理分析——基于宝钢权证自然实验的实证研究[J].管理世界,2008(04):15-23+186. 世界经济 [1]吉赟,杨青.高铁开通能否促进企业创新:基于准自然实验的研究[J].世界经济,2020,43(02):147-166. [2]毛其淋,方森辉.外资进入*化如何影响中国制造业生产率[J].世界经济,2020,43(01):143-169. [3]刘灿雷,王永进.出口扩张与企业间工资差距:影响与机制[J].世界经济,2019,42(12):99-120. [4]林志帆,龙晓旋.卖空威胁能否激励中国企业创新[J].世界经济,2019,42(09):126-150. [5]李嘉楠,代谦,庄嘉霖.开放、市场整合与经济空间变迁:基于近代中国开埠的证据[J].世界经济,2019,42(09):27-51. [6]李磊,王小霞,蒋殿春,方森辉.中国最低工资上升是否导致了外资撤离[J].世界经济,2019,42(08):97-120. [7]郭俊杰,方颖,杨阳.排污费征收标准改革是否促进了中国工业二氧化硫减排[J].世界经济,2019,42(01):121-144. [8]蒋灵多,陆毅,陈勇兵.市场机制是否有利于僵尸企业处置:以外资管制放松为例[J].世界经济,2018,41(09):121-145. [9]施震凯,邵军,浦正宁.交通基础设施改善与生产率增长:来自铁路大提速的证据[J].世界经济,2018,41(06):127-151. [10]李胜旗,毛其淋.关税政策不确定性如何影响就业与工资[J].世界经济,2018,41(06):28-52. [11]曾建光,步丹璐,饶品贵.无偿划转、*补贴与社会福利[J].世界经济,2017,40(07):147-168. [12]马双,邱光前.最低工资对中国劳动密集型出口产品价格的影响[J].世界经济,2016,39(11):80-103. [13]周茂,陆毅,符大海.贸易*化与中国产业升级:事实与机制[J].世界经济,2016,39(10):78-102. [14]彭飞,范子英.税收优惠、捐赠成本与企业捐赠[J].世界经济,2016,39(07):144-167. [15]代谦,别朝霞.财政压力的经济后果:以宋朝的“靖康之变”为例[J].世界经济,2015,38(01):173-192. [16]戴觅,茅锐.外需冲击、企业出口与内销:金融危机时期的经验证据[J].世界经济,2015,38(01):81-104. [17]田巍,余淼杰.中间品贸易*化和企业研发:基于中国数据的经验分析[J].世界经济,2014,37(06):90-112. [18]刘甲炎,范子英.中国房产税试点的效果评估:基于合成控制法的研究[J].世界经济,2013,36(11):117-135. [19]王永进,盛丹.经济波动、劳动力市场摩擦与产业结构[J].世界经济,2013,36(04):22-46. [20]何浩然,陈叶烽.禀赋获得方式影响被试行为是否存在性别差异:来自自然现场实验的证据[J].世界经济,2012,35(04):102-117. [21]周浩,郑筱婷.交通基础设施质量与经济增长:来自中国铁路提速的证据[J].世界经济,2012,35(01):78-97. [22]冯皓,陆铭.通过买房而择校:教育影响房价的经验证据与政策含义[J].世界经济,2010,33(12):89-104. [23]曾海舰,苏冬蔚.信贷政策与公司资本结构[J].世界经济,2010,33(08):17-42. 金融研究 [1]吕朝凤,毛霞.地方金融发展能够影响FDI的区位选择吗?——一个基于城市商业银行设立的准自然实验[J].金融研究,2020(03):58-76. [2]许红梅,李春涛.劳动保护、社保压力与企业违约风险——基于《社会保险法》实施的研究[J].金融研究,2020(03):115-133. [3]胡珺,黄楠,沈洪涛.市场激励型环境规制可以推动企业技术创新吗?——基于中国碳排放权交易机制的自然实验[J].金融研究,2020(01):171-189. [4]诸竹君,黄先海,王煌.交通基础设施改善促进了企业创新吗?——基于高铁开通的准自然实验[J].金融研究,2019(11):153-169. [5]鲁元平,赵颖,石智雷.产假政策与子女长期人力资本积累[J].金融研究,2019(11):57-74. [6]刘杰,陈佳,刘力.投资者关注与市场反应——来自中国证券交易所交易公开信息的自然实验[J].金融研究,2019(11):189-206. [7]陈胜蓝,刘晓玲.中国城际高铁与商业信用供给——基于准自然实验的研究[J].金融研究,2019(10):117-134. [8]张*,王永进,李坤望.贸易*化对制造业企业现金储蓄的影响——预防性动机还是投资挤压?[J].金融研究,2019(09):19-38. [9]段白鸽,王永钦,夏梦嘉.金融创新如何缓解信任品市场失灵?——中国食品安全责任强制保险的自然实验[J].金融研究,2019(09):75-93. [10]陈运森,黄健峤.股票市场开放与企业投资效率——基于“沪港通”的准自然实验[J].金融研究,2019(08):151-170. [11]钱雪松,唐英伦,方胜.担保物权制度改革降低了企业债务融资成本吗?——来自中国《物权法》自然实验的经验证据[J].金融研究,2019(07):115-134. [12]卞元超,吴利华,白俊红.高铁开通是否促进了区域创新?[J].金融研究,2019(06):132-149. [13]杨筝,王红建,戴静,许传华.放松利率管制、利润率均等化与实体企业“脱实向虚”[J].金融研究,2019(06):20-38. [14]张鹏杨,徐佳君,刘会政.产业政策促进全球价值链升级的有效性研究——基于出口加工区的准自然实验[J].金融研究,2019(05):76-95. [15]杨青,吉赟,王亚男.高铁能提升分析师盈余预测的准确度吗?——来自上市公司的证据[J].金融研究,2019(03):168-188. [16]李建军,韩珣.普惠金融、收入分配和贫困减缓——推进效率和公平的政策框架选择[J].金融研究,2019(03):129-148. [17]李广众,贾凡胜.*财政激励、税收征管动机与企业盈余管理——以财政“省直管县”改革为自然实验的研究[J].金融研究,2019(02):78-97. [18]王永钦,徐鸿恂.杠杆率如何影响资产价格?——来自中国债券市场自然实验的证据[J].金融研究,2019(02):20-39. [19]毛其淋.外资进入*化如何影响了中国本土企业创新?[J].金融研究,2019(01):72-90. [20]苏冬蔚,连莉莉.绿色信贷是否影响重污染企业的投融资行为?[J].金融研究,2018(12):123-137. [21]郑志刚,刘思敏,黄继承.我国上市公司策略性股票更名:战略转型还是高位*?[J].金融研究,2018(10):158-173. [22]陈康,刘琦.股价信息含量与投资-股价敏感性——基于融资融券的准自然实验[J].金融研究,2018(09):126-142. [23]朱莹,王健.市场约束能够降低地方债风险溢价吗?——来自城投债市场的证据[J].金融研究,2018(06):56-72. [24]王永钦,陈映辉,熊雅文.存款保险制度如何影响公众对不同银行的信心?——来自中国的证据[J].金融研究,2018(06):109-122. [25]王芳,陈硕,王瑾.农业税减免、农业发展与地方*行为——县级证据[J].金融研究,2018(04):104-120. [26]叶康涛,刘芳,李帆.股指成份股调整与股价崩盘风险:基于一项准自然实验的证据[J].金融研究,2018(03):172-189. [27]王红建,杨筝,阮刚铭,曹瑜强.放松利率管制、过度负债与债务期限结构[J].金融研究,2018(02):100-117. [28]姜军,申丹琳,江轩宇,伊志宏.债权人保护与企业创新[J].金融研究,2017(11):128-142. [29]王攀娜,罗宏.放松卖空管制对分析师预测行为的影响——来自中国准自然实验的证据[J].金融研究,2017(11):191-206. [30]李春涛,刘贝贝,周鹏.卖空与信息披露:融券准自然实验的证据[J].金融研究,2017(09):130-145. [31]胡婷,惠凯,彭红枫.异常波动停牌对股价波动性和流动性的影响研究——来自我国取消异常波动停牌的自然实验[J].金融研究,2017(09):146-160. [32]杨晓兰,金雪军.我国股票市场熔断机制的磁力效应:基于自然实验的证据[J].金融研究,2017(09):161-177. [33]曹春方,陈露兰,张婷婷.“法律的名义”:司法独立性提升与公司违规[J].金融研究,2017(05):191-206. [34]杨筝,刘放,李茫茫.利率市场化、非效率投资与资本配置——基于中国人民银行取消贷款利率上下限的自然实验[J].金融研究,2017(05):81-96. [35]王兵,戴敏,武文杰.环保基地政策提高了企业环境绩效吗?——来自东莞市企业微观面板数据的证据[J].金融研究,2017(04):143-160. [36]冯根福,刘虹,冯照桢,温军.股票流动性会促进我国企业技术创新吗?[J].金融研究,2017(03):192-206. [37]侯青川,靳庆鲁,刘阳.放松卖空管制与公司现金价值——基于中国资本市场的准自然实验[J].金融研究,2016(11):112-127. [38]张三峰,张伟.融资约束、金融发展与企业雇佣——来自中国企业调查数据的经验证据[J].金融研究,2016(10):111-126. [39]王茂斌,孔东民.反腐败与中国公司治理优化:一个准自然实验[J].金融研究,2016(08):159-174. [40]卢盛峰,陈思霞.政策偏袒的经济收益:来自中国工业企业出口的证据[J].金融研究,2016(07):33-47. [41]张龙耀,杨骏,程恩江.融资杠杆监管与小额贷款公司“覆盖率-可持续性”权衡——基于分层监管的准自然实验[J].金融研究,2016(06):142-158. [42]陈海强,韩乾,吴锴.融资约束抑制技术效率提升吗?——基于制造业微观数据的实证研究[J].金融研究,2015(10):148-162. [43]*生,杜爽,林秉旋.卖空交易与股票价格稳定性——来自中国融资融券市场的自然实验[J].金融研究,2015(06):173-188. [44]汪小圈,张红,刘冲.幼年饥荒经历对个人自雇选择的影响[J].金融研究,2015(05):18-33. [45]曾建光,伍利娜,王立彦,諶家蘭.技术进步、信息透明度与开放式基金的资金流量——基于中国开放式基金强制采用XBRL的证据[J].金融研究,2014(08):131-145. [46]马光荣,刘明,杨恩艳.银行授信、信贷紧缩与企业研发[J].金融研究,2014(07):76-93. [47]梁中华,余淼杰.人民币升值与中国出口企业盈利能力——基于面板数据的实证分析[J].金融研究,2014(07):1-15. [48]简泽.银行债权治理、管理者偏好与国有企业的绩效[J].金融研究,2013(01):135-148. [49]余静文.信贷约束、股利分红与企业预防性储蓄动机——来自中国A股上市公司的证据[J].金融研究,2012(10):97-110. 统计研究 [1]王亚飞,廖甍,王亚菲.高铁开通促进了农业全要素生产率增长吗?——来自长三角地区准自然实验的经验证据[J].统计研究,2020,37(05):40-53. [2]胡宗义,李毅.环境信息披露的污染减排效应评估[J].统计研究,2020,37(04):59-74. [3]严文龙,陈宋生,田至立.审计定价管制与交易剩余——2010年审计定价管制失效的自然实验[J/OL].统计研究:1-11[2020-06-05].http://kns.cnki.net/kcms/detail/11.1302.C.20200325.1534.002.html. [4]王立勇,许明.中国精准扶贫政策的减贫效应研究:来自准自然实验的经验证据[J].统计研究,2019,36(12):15-26. [5]许家云.互联网如何影响工业结构升级?——基于互联网商用的自然实验[J].统计研究,2019,36(12):55-67. [6]邹伟,梁平汉.腾飞的翅膀:机场属地化改革与企业库存[J].统计研究,2019,36(11):76-89. [7]徐超,庞保庆,张充.降低实体税负能否遏制制造业企业“脱实向虚”[J].统计研究,2019,36(06):42-53. [8]卢盛峰,陈思霞,张东杰.*推动型城市化促进了县域经济发展吗[J].统计研究,2017,34(05):59-68. [9]许坤,苏扬.逆周期资本监管、监管压力与银行信贷研究[J].统计研究,2016,33(03):97-105. 中国工业经济 [1]谭小芬,钱佳琪.资本市场压力与企业策略性专利行为:卖空机制的视角[J].中国工业经济,2020(05):156-173. [2]于新亮,上官熠文,于文广,李倩.养老保险缴费率、资本——技能互补与企业全要素生产率[J].中国工业经济,2019(12):96-114. [3]饶品贵,王得力,李晓溪.高铁开通与供应商分布决策[J].中国工业经济,2019(10):137-154. [4]王雄元,卜落凡.国际出口贸易与企业创新——基于“中欧班列”开通的准自然实验研究[J].中国工业经济,2019(10):80-98. [5]黄溶冰,赵谦,王丽艳.自然资源资产离任审计与空气污染防治:“和谐锦标赛”还是“环保资格赛”[J].中国工业经济,2019(10):23-41. [6]张国建,佟孟华,李慧,陈飞.扶贫改革试验区的经济增长效应及政策有效性评估[J].中国工业经济,2019(08):136-154. [7]孟庆斌,李昕宇,张修平.卖空机制、资本市场压力与公司战略选择[J].中国工业经济,2019(08):155-173. [8]徐思,何晓怡,钟凯.“一带一路”倡议与中国企业融资约束[J].中国工业经济,2019(07):155-173. [9]任胜钢,郑晶晶,刘东华,陈晓红.排污权交易机制是否提高了企业全要素生产率——来自中国上市公司的证据[J].中国工业经济,2019(05):5-23. [10]宋贺,段军山.财务顾问与企业并购绩效[J].中国工业经济,2019(05):155-173. [11]史贝贝,冯晨,康蓉.环境信息披露与外商直接投资结构优化[J].中国工业经济,2019(04):98-116. [12]王桂军,卢潇潇.“一带一路”倡议与中国企业升级[J].中国工业经济,2019(03):43-61. [13]魏悦羚,张洪胜.进口*化会提升中国出口国内增加值率吗——基于总出口核算框架的重新估计[J].中国工业经济,2019(03):24-42. [14]孙雪娇,翟淑萍,于苏.柔性税收征管能否缓解企业融资约束——来自纳税信用评级披露自然实验的证据[J].中国工业经济,2019(03):81-99. [15]吴晓晖,郭晓冬,乔政.机构投资者抱团与股价崩盘风险[J].中国工业经济,2019(02):117-135. [16]贾俊雪,李紫霄,秦聪.社会保障与经济增长:基于拟自然实验的分析[J].中国工业经济,2018(11):42-60. [17]刘友金,曾小明.房产税对产业转移的影响:来自重庆和上海的经验证据[J].中国工业经济,2018(11):98-116. [18]蒋灵多,陆毅.市场竞争加剧是否助推国有企业加杠杆[J].中国工业经济,2018(11):155-173. [19]钱雪松,康瑾,唐英伦,曹夏平.产业政策、资本配置效率与企业全要素生产率——基于中国2009年十大产业振兴规划自然实验的经验研究[J].中国工业经济,2018(08):42-59. [20]诸竹君,黄先海,余骁.进口中间品质量、自主创新与企业出口国内增加值率[J].中国工业经济,2018(08):116-134. [21]李蕾蕾,盛丹.地方环境立法与中国制造业的行业资源配置效率优化[J].中国工业经济,2018(07):136-154. [22]李贲,吴利华.开发区设立与企业成长:异质性与机制研究[J].中国工业经济,2018(04):79-97. [23]龙小宁,林菡馨.专利执行保险的创新激励效应[J].中国工业经济,2018(03):116-135. [24]周茂,陆毅,杜艳,姚星.开发区设立与地区制造业升级[J].中国工业经济,2018(03):62-79. [25]余静文.企业国有化中的*角色[J].中国工业经济,2018(03):155-173. [26]刘瑞明,李林,亢延锟,赵勇.景点评选、*公共服务供给与地区旅游经济发展[J].中国工业经济,2018(02):118-136. [27]王永进,冯笑.行政审批制度改革与企业创新[J].中国工业经济,2018(02):24-42. [28]史贝贝,冯晨,张妍,杨菲.环境规制红利的边际递增效应[J].中国工业经济,2017(12):40-58. [29]蒋灵多,陆毅.最低工资标准能否抑制新僵尸企业的形成[J].中国工业经济,2017(11):118-136. [30]张小茜,孙璐佳.抵押品清单扩大、过度杠杆化与企业破产风险——动产抵押法律改革的“双刃剑”效应[J].中国工业经济,2017(07):175-192. [31]龙小宁,万威.环境规制、企业利润率与合规成本规模异质性[J].中国工业经济,2017(06):155-174. [32]简泽,谭利萍,吕大国,符通.市场竞争的创造性、破坏性与技术升级[J].中国工业经济,2017(05):16-34. [33]王兵,聂欣.产业集聚与环境治理:助力还是阻力——来自开发区设立准自然实验的证据[J].中国工业经济,2016(12):75-89. [34]林乐,郑登津.退市监管与股价崩盘风险[J].中国工业经济,2016(12):58-74. [35]何靖.延付高管薪酬对银行风险承担的政策效应——基于银行盈余管理动机视角的PSM-DID分析[J].中国工业经济,2016(11):126-143. [36]龙小宁,张训常,杨进.转轨背景下官员兼职规制的经济效应[J].中国工业经济,2016(07):40-56. [37]罗知,赵奇伟,严兵.约束机制和激励机制对国有企业长期投资的影响[J].中国工业经济,2015(10):69-84. [38]赵晶,张书博,祝丽敏.传承人合法性对家族企业战略变革的影响[J].中国工业经济,2015(08):130-144. [39]吴海民,吴淑娟,陈辉.城市文明、交易成本与企业“第四利润源”——基于全国文明城市与民营上市公司核匹配倍差法的证据[J].中国工业经济,2015(07):114-129. [40]范子英.土地财政的根源:财政压力还是投资冲动[J].中国工业经济,2015(06):18-31. [41]韩超,胡浩然.清洁生产标准规制如何动态影响全要素生产率——剔除其他政策干扰的准自然实验分析[J].中国工业经济,2015(05):70-82. [42]唐明哲,刘丰波,林平.价格检验在相关市场界定中的实证运用——对茅台、五粮液垄断案的再思考[J].中国工业经济,2015(04):135-148. 会计研究 [1]朱焱,王玉丹.卖空机制与企业社会责任承担——基于中国融资融券制度的准自然实验研究[J].会计研究,2019(12):58-64. [2]刘行,赵健宇.税收激励与企业创新——基于增值税转型改革的“准自然实验”[J].会计研究,2019(09):43-49. [3]崔学刚,邓衢,邝文俊.卖空交易、市场行情与股价崩盘风险[J].会计研究,2019(06):43-50. [4]张金丹,路军,李连华.审计报告中披露关键审计事项信息有助于提高审计质量吗?——报表盈余和市场感知双维度的经验证据[J].会计研究,2019(06):85-91. [5]陈运森,黄健峤,韩慧云.股票市场开放提高现金股利水平了吗?——基于“沪港通”的准自然实验[J].会计研究,2019(03):55-62. [6]钱雪松,代禹斌,陈琳琳,方胜.担保物权制度改革、融资约束与企业现金持有——基于中国《物权法》自然实验的经验证据[J].会计研究,2019(01):72-78. [7]王仲兵,王攀娜.放松卖空管制与企业投资效率——来自中国资本市场的经验证据[J].会计研究,2018(09):80-87. [8]郝颖,谢光华,石锐.外部监管、在职消费与企业绩效[J].会计研究,2018(08):42-48. [9]吴战篪,陈相伊,吴伟立.融资融券制度与资产增长效应[J].会计研究,2017(06):89-95+97. [10]李丹,袁淳,廖冠民.卖空机制与分析师乐观性偏差——基于双重差分模型的检验[J].会计研究,2016(09):25-31. [11]刘运国,刘梦宁.雾霾影响了重污染企业的盈余管理吗?——基于政治成本假说的考察[J].会计研究,2015(03):26-33+94. [12]王春飞,陆正飞.事务所“改制”、保险价值与投资者保护[J].会计研究,2014(05):81-87+95. [13]陈运森,郑登津,李路.民营企业发审委社会关系、IPO资格与上市后表现[J].会计研究,2014(02):12-19+94. [14]曾建光,伍利娜,谌家兰,王立彦.XBRL、代理成本与绩效水平——基于中国开放式基金市场的证据[J].会计研究,2013(11):88-94+96. 世界经济文汇 [1]蓝嘉俊,方颖,魏下海.性别比失衡下的婚姻匹配与劳动力市场表现——基于独生子女政策准自然实验的实证分析[J].世界经济文汇,2019(04):67-84. [2]赵琳,唐珏,陈诗一.环保管理*垂直化改革的环境治理效应[J].世界经济文汇,2019(02):100-120. [3]周梦天,王之.空气质量信息公开会影响城市房价吗?——基于我国各城市公开PM2.5监测数据的自然实验[J].世界经济文汇,2018(03):20-42. [4]傅家范,刘冲.*注资、存款优势与国有银行反危机信贷投放[J].世界经济文汇,2017(05):75-90. [5]刘金山,*.对口支援政策有效吗?——来自19省市对口援疆自然实验的证据[J].世界经济文汇,2017(04):43-61. [6]陈怡安.父母政治身份、职位背景与子女创业[J].世界经济文汇,2017(01):26-50. [7]范子英.为买房而离婚——基于住房限购政策的研究[J].世界经济文汇,2016(04):1-17. 中国人口、资源与环境 [1]王为东,王冬,卢娜.中国碳排放权交易促进低碳技术创新机制的研究[J].中国人口·资源与环境,2020,30(02):41-48. [2]胡江峰,黄庆华,潘欣欣.碳排放交易制度与企业创新质量:抑制还是促进[J].中国人口·资源与环境,2020,30(02):49-59. [3]张晖,吴霜,张燕媛,虞祎.流域生态补偿政策对受偿地区经济增长的影响研究——以安徽省黄山市为例[J].长江流域资源与环境,2019,28(12):2848-2856. [4]刘常建,许为宾,蔡兰,张孝静.环保压力与重污染企业的银行贷款契约——基于“PM_(2.5)爆表”事件的经验证据[J].中国人口·资源与环境,2019,29(12):121-130. [5]龚梦琪,刘海云,姜旭.中国低碳试点政策对外商直接投资的影响研究[J].中国人口·资源与环境,2019,29(06):50-57. [6]尤济红,陈喜强.区域一体化合作是否导致污染转移——来自长三角城市群扩容的证据[J].中国人口·资源与环境,2019,29(06):118-129. [7]翟华云,刘亚伟.环境司法专门化促进了企业环境治理吗?——来自专门环境法庭设置的准自然实验[J].中国人口·资源与环境,2019,29(06):138-147. [8]张楠,卢洪友,黄健.资源枯竭城市转移支付对经济增长的影响[J].中国人口·资源与环境,2019,29(04):147-156. [9]赵领娣,徐乐.基于长三角扩容准自然实验的区域一体化水污染效应研究[J].中国人口·资源与环境,2019,29(03):50-61. [10]温湖炜,周凤秀.环境规制与中国省域绿色全要素生产率——兼论对《环境保护税法》实施的启示[J].干旱区资源与环境,2019,33(02):9-15. [11]景守武,张捷.新安江流域横向生态补偿降低水污染强度了吗?[J].中国人口·资源与环境,2018,28(10):152-159. [12]黄志平.碳排放权交易有利于碳减排吗?——基于双重差分法的研究[J].干旱区资源与环境,2018,32(09):32-36. [13]雷平,曹黎明,赵连荣.乡土官员对区域经济与环境发展路径的影响[J].中国人口·资源与环境,2018,28(04):163-176. [14]何文剑,徐静文,张红霄.森林采伐限额管理制度能否起到保护森林资源的作用[J].中国人口·资源与环境,2016,26(07):128-136. [15]何浩然,陈安来.中国限制塑料袋使用的政策效果及国际经验借鉴[J].中国人口·资源与环境,2010,20(11):167-174. 中国农村经济 [1]罗斯炫,何可,张俊飚.增产加剧污染?——基于粮食主产区政策的经验研究[J].中国农村经济,2020(01):108-131. [2]丁从明,吴羽佳,秦姝媛,梁甄桥.社会信任与公共政策的实施效率——基于农村居民新农保参与的微观证据[J].中国农村经济,2019(05):109-123. [3]胡新艳,陈小知,米运生.农地整合确权政策对农业规模经营发展的影响评估——来自准自然实验的证据[J].中国农村经济,2018(12):83-102. [4]周振,张琛,彭超,孔祥智.农业机械化与农民收入:来自农机具购置补贴政策的证据[J].中国农村经济,2016(02):68-82. 国际贸易问题 [1]曾守桢,余官胜.行政审批简化与我国对外直接投资增长——基于核准权下放试点的准自然实验实证研究[J].国际贸易问题,2020(04):19-34. [2]刘冲,张辉,吴群锋.进口竞争与企业产品专业化——基于中国多产品企业的研究[J].国际贸易问题,2020(03):22-39. [3]高翔,袁凯华.清洁生产环境规制与企业出口技术复杂度——微观证据与影响机制[J].国际贸易问题,2020(02):93-109. [4]吴嵩博,崔凡.融资约束与中国企业出口市场偏好——基于开发区准自然实验的实证分析[J].国际贸易问题,2020(02):157-174. [5]杨珍增,杨宏.美国“301调查”征税清单调整的政治经济学分析[J].国际贸易问题,2020(01):82-93. [6]张彩云.科技标准型环境规制与企业出口动态——基于清洁生产标准的一次自然实验[J].国际贸易问题,2019(12):32-45. [7]王毅,黄先海,余骁.环境规制是否降低了中国企业出口国内附加值率[J].国际贸易问题,2019(10):117-131. [8]兰健,张洪胜.集群商业信用与出口产品质量——来自中国企业层面的证据[J].国际贸易问题,2019(09):12-25. [9]黄先海,王煌,陈航宇.人口集聚如何影响出口企业加成率:理论机制与经验证据[J].国际贸易问题,2019(07):1-18. [10]张鹏杨,李众宜,毛海涛.产业政策如何影响企业出口二元边际[J].国际贸易问题,2019(07):47-62. [11]孙林,胡玲菲,方巧云.中国*贸易区战略提升中国进口食品质量了吗——基于双重差分模型[J].国际贸易问题,2019(05):54-68. [12]胡浩然.产业政策如何影响出口企业绩效——基于出口加工区企业样本的准自然实验[J].国际贸易问题,2018(12):27-38. [13]章韬,戚人杰.集聚-出口双促进政策的溢出效应——来自出口加工区的微观企业证据[J].国际贸易问题,2017(03):26-38. [14]彭冬冬,杜运苏.中间品贸易*化、融资约束与贸易方式转型[J].国际贸易问题,2016(12):52-63. [15]杜艳,周茂,李雨浓.贸易*化能否提高中国制造业企业资源再配置效率——基于中国加入WTO的倍差法分析[J].国际贸易问题,2016(09):38-49. [16]项后军,何康.自贸区的影响与资本流动——以上海为例的自然实验研究[J].国际贸易问题,2016(08):3-15. [17]刘啟仁,黄建忠.贸易*化、企业动态与行业生产率变化——基于我国加入WTO的自然实验[J].国际贸易问题,2016(01):27-37. [18]申萌,曾燕萍,曲如晓.环境规制与企业出口:来自千家企业节能行动的微观证据[J].国际贸易问题,2015(08):43-50. 南开管理评论 [1]田利辉,王可第.腐败惩治的正外部性和企业创新行为[J].南开管理评论,2020,23(02):121-131+154. [2]胡宁,王雪方,孙莲珂,靳庆鲁.房产限购政策有助于实体企业“脱虚返实”吗——基于双重差分研究设计[J].南开管理评论,2019,22(04):20-31. [3]马惠娴,佟爱琴.卖空机制对高管薪酬契约的治理效应——来自融资融券制度的准自然实验[J].南开管理评论,2019,22(02):61-74. [4]何威风,陈莉萍,刘巍.业绩考核制度会影响企业盈余管理行为吗[J].南开管理评论,2019,22(01):17-30. [5]田轩,孟清扬.股权激励计划能促进企业创新吗[J].南开管理评论,2018,21(03):176-190. [6]陈怡欣,张俊瑞,汪方军.卖空机制对上市公司创新的影响研究——基于我国融资融券制度的自然实验[J].南开管理评论,2018,21(02):62-74. [7]黄俊,黄超,位豪强,王敏.卖空机制提高了分析师盈余预测质量吗——基于融资融券制度的经验证据[J].南开管理评论,2018,21(02):135-148. [8]孙光国,孙瑞琦.控股股东委派执行董事能否提升公司治理水平[J].南开管理评论,2018,21(01):88-98+108. [9]沈洪涛,周艳坤.环境执法监督与企业环境绩效:来自环保约谈的准自然实验证据[J].南开管理评论,2017,20(06):73-82. [10]李茫茫,黎文靖.审计具有保险功能吗——基于*官员变更的自然实验[J].南开管理评论,2017,20(04):93-104. [11]陈运森,郑登津.董事网络关系、信息桥与投资趋同[J].南开管理评论,2017,20(03):159-171. [12]贾凡胜,吴昱,廉柯赟.股利税差别化、现金分红与代理问题——基于财税[2012]85号文件的研究[J].南开管理评论,2016,19(01):142-154. [13]徐莉萍,辛宇.媒体治理与中小投资者保护[J].南开管理评论,2011,14(06):36-47+94. 管理科学学报 [1]李沁洋,许年行.资本市场对外开放与股价崩盘风险——来自沪港通的证据[J].管理科学学报,2019,22(08):108-126. [2]张岩,吴芳,吴晓晖.IPO募资双重管制与资源配置——基于自然实验的经验证据[J].管理科学学报,2018,21(11):76-91. [3]刘志红,王艺明.“省直管县”改革能否提升县级财力水平?[J].管理科学学报,2018,21(10):1-13. [4]陈胜蓝,卢锐.卖空压力与控股股东私利侵占——来自卖空管制放松的准自然实验证据[J].管理科学学报,2018,21(04):67-85. [5]金宇超,靳庆鲁,严青蕾.合谋与胁迫:作为经济主体的媒体行为——基于新闻敲诈曝光的事件研究[J].管理科学学报,2018,21(03):1-22. [6]才静涵,夏乐.卖空制度、流动性与信息不对称问题研究——香港市场的个案[J].管理科学学报,2011,14(02):71-85. [7]王志强,吴世农.我国股票市场透明度变革效应研究[J].管理科学学报,2008,11(05):110-119. 社会学研究 [1]哈巍,赵颖.教学相“涨”:高校学生成绩和评教分数双重膨胀研究[J].社会学研究,2019,34(01):84-105+243-244. [2]程诚.同伴社会资本与学业成就——基于随机分配自然实验的案例分析[J].社会学研究,2017,32(06):141-164+245. 中国的准自然实验真多!
-
金融科技的高效省力秘籍:打造全面连接、全景覆盖、智能化的数字化运营体系" - 当下金融科技运营:挑战与机遇共存的时代解读 在快速发展的数字技术和企业数字化转型的大背景下,中国金融科技产业步入了提质增效的新阶段。面对市场的起伏变革与不确定性,金融机构需积极拥抱创新,灵活运用新技术,确保在竞争激烈的市场环境中稳固立足。 - 面临的双重考验: 1. 技术迭代压力:持续跟进行业内的科技革新,掌握新兴工具和平台,时刻应对瞬息万变的市场需求是金融科技运营的一大挑战。 2. 安全与隐私挑战:伴随着网络安全风险加剧和数据泄漏频发,如何强化信息安全体系、防范攻击、维护客户资金及隐私安全显得尤为重要。同时,伴随金融科技公司崛起,个人隐私权保障愈发关键。 - 喜人的发展空间: 1. 提升运营效益与降低成本:借助数字化技术,实现流程自动化、信息整合以及数据分析等,有效提升工作效能并缩减运营成本。 2. 扩大市场份额与增收途径:利用数字化手段拓宽销售渠道,优化用户体验,吸引更多用户并带动收入增长。 3. 加强客户联系与提升满意度:通过数字化科技运营,企业能更好地与客户互动沟通,增强客户信任感与忠诚度。 - 构建金融科技降本增效的核心驱动力:实施“全感知、全链接、全场景、智能”的科技运营体系升级路径
-
提升直播体验:Flv.js的追帧、断流重连和实时更新的优化策略