24行代码，让你的网页元素任意放大、缩小、拖拽、移动

了点时间写的，蛮长时间了。个人很喜欢，一段很简单的代码，却能够实现很多功能。（因为代码文字呈现没有格式，难以阅读，以后小编提供的代码都以截图方式呈现，底部有源码链接）。

到底多简单，先来看代码

基于jQuery

基于jQuery

拖拽实例图：

拖拽实例图

将代码剥离，只要写5行就可以实现拖拽了，是不是很简单：

调用方式

放大、缩小

我们给拖拽增加点功能，支持放大、缩小，先看实例图:

放大、缩小

将代码剥离，原先的代码保留不变，增加一个绑定事件：

放大、缩小

这样来实现放大、缩小、拖拽是不是很简单，还能实现很多其他效果，大家慢慢领悟。

原理分析：

放大、缩小、拖拽都离不开在网页上拖动鼠标，对于前端来说就是 document 的 mousemove，当鼠标在网页上移动的时候，无时无刻不在触发 mousemove 事件，当鼠标触发事件时，什么时候需要执行我们特定的操作，这就是我们要做的了。我在 mousemove 中增加了几个对象来判定是否进行操作：

move：是否执行触发操作
move_target：操作的元素对象
move_target.posix：操作对象的坐标
call_down：mousemove的时候的回调函数，传回来的this指向document
call_up：当鼠标弹起的时候执行的回调函数，传回来的this指向document

小提示：

简单的操作，只需要设定 move_target 对象，设置 move_target 的时候不要忘记了 move_target.posix 哦；
复杂的操作可以通过call_down、call_up进行回调操作，这个时候是可以不用设置 move_target 对象的

深入研究

拖拽和放大、缩小实现了，但是有个问题，当我们鼠标点击并滑动的时候，是会选中文本的，为了避免这个问题，大家可以自行百度

css 阻止文本选中

css 阻止文本选中

网页的放大、缩小、拖拽事件就研究到这里了，小编不再对如何拓展进行深入讲解，一切靠大家自行研究，权当课后作业了。～～

源码链接地址：

http://orzcss.com/posts/d554a392/

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

今的网络中，页面加载速度是最重要的网站指标之一。即使是毫秒也会对用户体验、产品产生巨大影响，而缓慢的页面加载会轻易的的降低转化率。您可以采用许多工具和技术来加快网站速度。在本文中，我们将介绍可用于改善前端性能的最佳CSS优化技巧。

1.查找性能瓶颈

所有优化中最重要的事情是从全面诊断开始。幸运的是，有许多CSS诊断工具可以帮助您发现任何性能瓶颈。首先，您可以使用网络浏览器的DevTools检查资产加载的速度。在大多数浏览器中，您可以通过按F12按钮打开DevTools 。

例如，在Firefox DevTools中，可以使用“ 网络”选项卡检查页面加载的所有CSS文件的大小和加载时间。您还可以测试使用和不使用缓存时CSS加载的速度。由于DevTools还显示了外部CSS，例如Google字体文件和从第三方CDN提取的CSS资源，因此您可以找到许多您以前都不知道的资源。

Pingdom Tools和Google提供的Lighthouse是开发人员经常用来分析网站速度和前端性能的另外两个免费工具。例如，如果您运行简单的网站速度测试，则Pingdom Tools会为您提供一些有用的CSS优化技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.缩小和压缩CSS文件

大多数网站都依赖多个CSS文件。尽管在大多数情况下，模块化CSS被认为是最佳实践，但是加载所有文件可能需要一段时间。但是，这正是CSS缩小和压缩工具存在的原因。如果您适当地使用它们，则可以大大缩短页面加载时间。

有一些在线工具，例如CSS Minify，可让您通过将其复制粘贴为简单形式来缩小CSS文件的大小。这种类型的工具可以与较小的项目很好地配合。但是，对于带有多个CSS文件的大型项目，使用它们会变得很麻烦且耗时。在这种情况下，最好选择自动化解决方案。

如今，大多数构建工具可让您在代码库上自动执行压缩。例如，默认情况下，Webpack将所有文件作为缩小的包返回。PostCSS还具有诸如CSS Nano之类的智能插件，它们不仅可以缩小文件的大小，还可以通过许多有针对性的优化来运行它。

3.使用Flexbox和CSS网格

如果在编写CSS时仍仅依靠传统的框模型，并使用边距，填充和浮点在屏幕上对齐项目，则应考虑采用更现代的布局模块，即flexbox和CSS Grid。这些新模型使您可以用更少的代码来实现复杂的布局。

使用较旧的技术，您甚至需要进行许多技巧和调整，即使是比较简单的事情，例如将项目垂直居中。但是，flexbox和CSS Grid并非如此。尽管拾取新的布局模块可能要花费一些时间，但还是值得的，因为CSS文件要小得多。flexbox尤其如此，到目前为止，flexbox具有相当不错的浏览器支持（目前全球支持 98.3％）。

尽管浏览器对CSS Grid的支持还不够完善（目前占全球的92.03％），但如果不必支持旧版浏览器或愿意提供后备功能，则仍然可以使用它。

4.使用<link>标记代替@import规则**

您可以使用两种主要技术来使网页加载CSS文件：

使用<link>标记将它们添加到HTML页面的<head>部分，

使用*@import *CSS规则从其他样式表导入它们。

您需要将@import规则添加到主CSS文件的顶部。在大多数情况下，它用于加载较小的资源，例如字体和其他设计元素。最初，这似乎是一个不错的解决方案，但是，与HTML页面使用<link>标记直接加载样式表相比，浏览器加载额外的样式表所花的时间要长得多。

当您在HTML页面中添加多个CSS文件时，请务必注意CSS特殊性。首先添加最通用的样式表，然后再选择更具体的样式表。您需要这样做，因为以后添加的样式表会覆盖以前的CSS文件的规则。例如，以下示例以正确的顺序添加CSS文件时：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用渐变和SVG代替图像

将所有图像加载到网页上可能要花费大量时间。开发人员使用许多图像优化技术来减轻这种影响，例如从外部CDN加载图像或使用诸如TinyJPG之类的图像压缩工具。这些解决方案可以提供很多帮助，但是很多时候，您都可以使用原生CSS效果替换大量资源的JPG和PNG图像。

例如，您可以使用渐变来代替背景图像，而背景图像可能会大大降低用户浏览器的速度。您可以使用CSS的渐变功能来创建线性，径向和重复渐变。使用这些CSS原生功能，您不仅可以定义颜色，还可以定义渐变的角度。

例如，以下规则创建了一个很好的渐变背景，其加载速度比任何图像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

对于更复杂的渐变和纹理，还可以使用CSSmatic（在下图显示）和ColorZilla这样的生成器。

除渐变外，您还可以使用可缩放矢量图形（SVG）替换传统的JPG和PNG图像。它们不仅加载速度更快，而且您只需要包含该图像的一个版本。这是因为SVG由于其向量性质而可以按比例放大到任何大小而没有任何质量损失。此外，您也可以使用CSS设置SVG的样式，就像普通的HTML文件一样。

6.避免重要规则

尽管！important规则在某些情况下可能是天赐之物，但您仅应将其作为最后的选择。此规则从级联中创建一个异常。因此，当您在CSS声明中添加！important时，它将覆盖所有其他声明，即使是那些具有更高特异性的声明。它的语法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大降低页面速度。根据经验，切勿在整个站点范围的CSS或创建主题或插件时使用！important。如果可能，请仅在要覆盖来自第三方库的CSS时使用它。

7.考虑CSS重构

尽管CSS重构很少是一件容易的事，但在许多情况下，它可以显着提高网站性能。例如，如果CSS文件太大，或者您继承了旧版代码库，或者页面加载时间很差，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护并且加载更快。

CSS重构是一个多步骤的过程，在此过程中，您需要分析CSS代码库的各个方面。您需要检查几件不同的事情，例如：

无论您有未使用或重复的CSS规则或资源，

是否可以利用Flexbox和CSS网格等更现代的技术，

是否使用过多的特异性（可以使用此视觉特异性计算器进行计算），

CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），

是否值得使用自动构建工具，

还有很多其他

在开始重构之前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您可以比较它们的前后值。

同样不要忘记使用版本控制工具，例如Git。这样，如果出现任何问题，您可以返回到以前的代码版本。

包起来

您可以使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验，还可以帮助您在Google和其他搜索引擎中获得更好的排名。

除了CSS优化最佳实践之外，您还可以使用许多其他技术来提高加载速度，例如缓存，Google AMP和HTTPS协议。

作者：游X鱼
链接：https://www.jianshu.com/p/69198ac60e53

ello，各位小伙伴，今天广州蓝景跟大家分享前端技术干货，页面加载速度问题。

首先我们都讨厌加载缓慢的页面！

要知道加载时间每增加1秒（0-5秒之间），网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化HTML和CSS文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！

注：本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

a）拆分CSS文件

尽量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上执行。

<!-- 加载和解析整个sytles.css文件会阻塞主浏览器渲染 -->
<link rel="stylesheet" href="styles.css" />

对于打印媒体，可以使用：

<!-- 加载和解析print.css时不会阻塞渲染，只会在打印模式加载该样式 -->
<link rel="stylesheet" href="print.css" media="print" />

对于移动设备屏幕，可以使用：

<!-- 只会在移动设备这样的小屏幕下才会加载和解析该样式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />

对于平板电脑屏幕，可以使用：

<!-- 不会在大屏幕上加载和解析该样式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />

对于移动屏幕横屏或竖屏，也可以使用不同的CSS文件：

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通过将CSS分离成多个文件，主文件（在本例中为styles.css）变得小多了，从而减少了渲染被阻塞的时间，大大提高了页面加载速度。

b） CSS的font-display属性

font-display属性应用于@font-face规则，定义浏览器如何加载和显示字体文件，从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能，但代价是闪烁无样式的文本。

@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}

c） HTML文件中的图片懒加载

使用loading="lazy"，以便仅在需要时加载图像。这将大大降低页面加载速度。

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2. 选择正确的图片格式

.webp格式的图片被推荐作为网络的图片格式标准。

WebP无损图片在尺寸方面比PNG小26%。WebP有损图片比同等SSIM质量指数下的同类JPEG图片小25-34%。动画WebP图片支持有损、无损和透明，与GIF和APNG相比，可以提供更小的尺寸。

下图是WebP与PNG图片格式对比：

下图是WebP与JPEG图片格式对比：

所有这些测试都可以证明，即使是有损压缩，webp图片的压缩率也更高，因此大大减少了页面加载时间！

你还可以尝试另一种图片格式.avif，在少数情况下比.webp更好，但由于该格式比较新（2019年发布），因此还没有多少浏览器支持.avif格式！

使用<picture>元素

a）可用于针对不同的media条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略版本）。

b）在不支持webp格式的情况下提供替代图片格式。

c）通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。

如果为高DPI显示器提供更高分辨率的图像版本，请改用<img>元素上的srcset。这允许浏览器在数据保存模式下选择低分辨率版本，并且你不必编写显式media条件。

<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3. 渲染图像

由于图像是异步加载的，并在第一次绘制后继续加载，如果在加载之前未定义其尺寸，则可能会导致重排到页面内容。例如，文本因加载图像而被推下页面。因此，设置width和高height属性至关重要，以便浏览器可以在布局中为它们保留空间。

对于任何background-image，设置background-color值很重要，以便在下载图像之前，覆盖的内容保持可读。

4. 压缩HTML和CSS文件

压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符，如空格、换行符、制表符等以及注释。

使用压缩工具，如CodeBeautify，CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。

在线咨询

上一篇：HTML 链接
下一篇：B端设计组件：按钮

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

24行代码，让你的网页元素任意放大、缩小、拖拽、移动

您的项目需求