整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
了点时间写的，蛮长时间了。个人很喜欢，一段很简单的代码，却能够实现很多功能。（因为代码文字呈现没有格式，难以阅读，以后小编提供的代码都以截图方式呈现，底部有源码链接）。
到底多简单，先来看代码
基于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/
本文内容均属个人原创作品，转载此文章须附上出处及原文链接。
加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！
一、先创建一个html文件，记得添加vue库文件。
二、创建一盒容器vmdiv，用vue绑定它，测试vue绑定后的插入值text1效果。
三、加入文本框和两个按钮。
四、通过flex排序，让它们三个竖排。比例为文本框占4，按钮占1。
五、测试一下按钮的点击事件。
六、给文本框添加style样式，给它字体大小为16px，并设置一个变量size，让它来控制字的大小，通过点击后，字变大加5，变小减5。
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文件。有助于为网站提供更快的页面加载速度。
*请认真填写需求信息，我们会在24小时内与您取得联系。
