24行代碼，讓你的網(wǎng)頁元素任意放大、縮小、拖拽、移動

了點(diǎn)時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因?yàn)榇a文字呈現(xiàn)沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。

到底多簡單，先來看代碼

基于jQuery

基于jQuery

拖拽實(shí)例圖：

拖拽實(shí)例圖

將代碼剝離，只要寫5行就可以實(shí)現(xiàn)拖拽了，是不是很簡單：

調(diào)用方式

放大、縮小

我們給拖拽增加點(diǎn)功能，支持放大、縮小，先看實(shí)例圖:

放大、縮小

將代碼剝離，原先的代碼保留不變，增加一個綁定事件：

放大、縮小

這樣來實(shí)現(xiàn)放大、縮小、拖拽是不是很簡單，還能實(shí)現(xiàn)很多其他效果，大家慢慢領(lǐng)悟。

原理分析：

放大、縮小、拖拽都離不開在網(wǎng)頁上拖動鼠標(biāo)，對于前端來說就是 document 的 mousemove，當(dāng)鼠標(biāo)在網(wǎng)頁上移動的時候，無時無刻不在觸發(fā) mousemove 事件，當(dāng)鼠標(biāo)觸發(fā)事件時，什么時候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個對象來判定是否進(jìn)行操作：

move：是否執(zhí)行觸發(fā)操作
move_target：操作的元素對象
move_target.posix：操作對象的坐標(biāo)
call_down：mousemove的時候的回調(diào)函數(shù)，傳回來的this指向document
call_up：當(dāng)鼠標(biāo)彈起的時候執(zhí)行的回調(diào)函數(shù)，傳回來的this指向document

小提示：

簡單的操作，只需要設(shè)定 move_target 對象，設(shè)置 move_target 的時候不要忘記了 move_target.posix 哦；
復(fù)雜的操作可以通過call_down、call_up進(jìn)行回調(diào)操作，這個時候是可以不用設(shè)置 move_target 對象的

深入研究

拖拽和放大、縮小實(shí)現(xiàn)了，但是有個問題，當(dāng)我們鼠標(biāo)點(diǎn)擊并滑動的時候，是會選中文本的，為了避免這個問題，大家可以自行百度

css 阻止文本選中

css 阻止文本選中

網(wǎng)頁的放大、縮小、拖拽事件就研究到這里了，小編不再對如何拓展進(jìn)行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了?！?/p>

源碼鏈接地址：

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

本文內(nèi)容均屬個人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。

加關(guān)注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！

今的網(wǎng)絡(luò)中，頁面加載速度是最重要的網(wǎng)站指標(biāo)之一。即使是毫秒也會對用戶體驗(yàn)、產(chǎn)品產(chǎn)生巨大影響，而緩慢的頁面加載會輕易的的降低轉(zhuǎn)化率。您可以采用許多工具和技術(shù)來加快網(wǎng)站速度。在本文中，我們將介紹可用于改善前端性能的最佳CSS優(yōu)化技巧。

1.查找性能瓶頸

所有優(yōu)化中最重要的事情是從全面診斷開始。幸運(yùn)的是，有許多CSS診斷工具可以幫助您發(fā)現(xiàn)任何性能瓶頸。首先，您可以使用網(wǎng)絡(luò)瀏覽器的DevTools檢查資產(chǎn)加載的速度。在大多數(shù)瀏覽器中，您可以通過按F12按鈕打開DevTools 。

例如，在Firefox DevTools中，可以使用“ 網(wǎng)絡(luò)”選項(xiàng)卡檢查頁面加載的所有CSS文件的大小和加載時間。您還可以測試使用和不使用緩存時CSS加載的速度。由于DevTools還顯示了外部CSS，例如Google字體文件和從第三方CDN提取的CSS資源，因此您可以找到許多您以前都不知道的資源。

Pingdom Tools和Google提供的Lighthouse是開發(fā)人員經(jīng)常用來分析網(wǎng)站速度和前端性能的另外兩個免費(fèi)工具。例如，如果您運(yùn)行簡單的網(wǎng)站速度測試，則Pingdom Tools會為您提供一些有用的CSS優(yōu)化技巧。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

2.縮小和壓縮CSS文件

大多數(shù)網(wǎng)站都依賴多個CSS文件。盡管在大多數(shù)情況下，模塊化CSS被認(rèn)為是最佳實(shí)踐，但是加載所有文件可能需要一段時間。但是，這正是CSS縮小和壓縮工具存在的原因。如果您適當(dāng)?shù)厥褂盟鼈?，則可以大大縮短頁面加載時間。

有一些在線工具，例如CSS Minify，可讓您通過將其復(fù)制粘貼為簡單形式來縮小CSS文件的大小。這種類型的工具可以與較小的項(xiàng)目很好地配合。但是，對于帶有多個CSS文件的大型項(xiàng)目，使用它們會變得很麻煩且耗時。在這種情況下，最好選擇自動化解決方案。

如今，大多數(shù)構(gòu)建工具可讓您在代碼庫上自動執(zhí)行壓縮。例如，默認(rèn)情況下，Webpack將所有文件作為縮小的包返回。PostCSS還具有諸如CSS Nano之類的智能插件，它們不僅可以縮小文件的大小，還可以通過許多有針對性的優(yōu)化來運(yùn)行它。

3.使用Flexbox和CSS網(wǎng)格

如果在編寫CSS時仍僅依靠傳統(tǒng)的框模型，并使用邊距，填充和浮點(diǎn)在屏幕上對齊項(xiàng)目，則應(yīng)考慮采用更現(xiàn)代的布局模塊，即flexbox和CSS Grid。這些新模型使您可以用更少的代碼來實(shí)現(xiàn)復(fù)雜的布局。

使用較舊的技術(shù)，您甚至需要進(jìn)行許多技巧和調(diào)整，即使是比較簡單的事情，例如將項(xiàng)目垂直居中。但是，flexbox和CSS Grid并非如此。盡管拾取新的布局模塊可能要花費(fèi)一些時間，但還是值得的，因?yàn)镃SS文件要小得多。flexbox尤其如此，到目前為止，flexbox具有相當(dāng)不錯的瀏覽器支持（目前全球支持 98.3％）。

盡管瀏覽器對CSS Grid的支持還不夠完善（目前占全球的92.03％），但如果不必支持舊版瀏覽器或愿意提供后備功能，則仍然可以使用它。

4.使用<link>標(biāo)記代替@import規(guī)則**

您可以使用兩種主要技術(shù)來使網(wǎng)頁加載CSS文件：

使用<link>標(biāo)記將它們添加到HTML頁面的<head>部分，

使用*@import *CSS規(guī)則從其他樣式表導(dǎo)入它們。

您需要將@import規(guī)則添加到主CSS文件的頂部。在大多數(shù)情況下，它用于加載較小的資源，例如字體和其他設(shè)計(jì)元素。最初，這似乎是一個不錯的解決方案，但是，與HTML頁面使用<link>標(biāo)記直接加載樣式表相比，瀏覽器加載額外的樣式表所花的時間要長得多。

當(dāng)您在HTML頁面中添加多個CSS文件時，請務(wù)必注意CSS特殊性。首先添加最通用的樣式表，然后再選擇更具體的樣式表。您需要這樣做，因?yàn)橐院筇砑拥臉邮奖頃采w以前的CSS文件的規(guī)則。例如，以下示例以正確的順序添加CSS文件時：

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

5.使用漸變和SVG代替圖像

將所有圖像加載到網(wǎng)頁上可能要花費(fèi)大量時間。開發(fā)人員使用許多圖像優(yōu)化技術(shù)來減輕這種影響，例如從外部CDN加載圖像或使用諸如TinyJPG之類的圖像壓縮工具。這些解決方案可以提供很多幫助，但是很多時候，您都可以使用原生CSS效果替換大量資源的JPG和PNG圖像。

例如，您可以使用漸變來代替背景圖像，而背景圖像可能會大大降低用戶瀏覽器的速度。您可以使用CSS的漸變功能來創(chuàng)建線性，徑向和重復(fù)漸變。使用這些CSS原生功能，您不僅可以定義顏色，還可以定義漸變的角度。

例如，以下規(guī)則創(chuàng)建了一個很好的漸變背景，其加載速度比任何圖像都要快：

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

對于更復(fù)雜的漸變和紋理，還可以使用CSSmatic（在下圖顯示）和ColorZilla這樣的生成器。

除漸變外，您還可以使用可縮放矢量圖形（SVG）替換傳統(tǒng)的JPG和PNG圖像。它們不僅加載速度更快，而且您只需要包含該圖像的一個版本。這是因?yàn)镾VG由于其向量性質(zhì)而可以按比例放大到任何大小而沒有任何質(zhì)量損失。此外，您也可以使用CSS設(shè)置SVG的樣式，就像普通的HTML文件一樣。

6.避免重要規(guī)則

盡管！important規(guī)則在某些情況下可能是天賜之物，但您僅應(yīng)將其作為最后的選擇。此規(guī)則從級聯(lián)中創(chuàng)建一個異常。因此，當(dāng)您在CSS聲明中添加！important時，它將覆蓋所有其他聲明，即使是那些具有更高特異性的聲明。它的語法如下所示：

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

如果CSS中有太多重要規(guī)則，則用戶的瀏覽器將不得不對代碼進(jìn)行額外的檢查，這可能會大大降低頁面速度。根據(jù)經(jīng)驗(yàn)，切勿在整個站點(diǎn)范圍的CSS或創(chuàng)建主題或插件時使用！important。如果可能，請僅在要覆蓋來自第三方庫的CSS時使用它。

7.考慮CSS重構(gòu)

盡管CSS重構(gòu)很少是一件容易的事，但在許多情況下，它可以顯著提高網(wǎng)站性能。例如，如果CSS文件太大，或者您繼承了舊版代碼庫，或者頁面加載時間很差，嚴(yán)重?fù)p害了轉(zhuǎn)換率。CSS重構(gòu)的目標(biāo)是使代碼更整潔，更可維護(hù)并且加載更快。

CSS重構(gòu)是一個多步驟的過程，在此過程中，您需要分析CSS代碼庫的各個方面。您需要檢查幾件不同的事情，例如：

無論您有未使用或重復(fù)的CSS規(guī)則或資源，

是否可以利用Flexbox和CSS網(wǎng)格等更現(xiàn)代的技術(shù)，

是否使用過多的特異性（可以使用此視覺特異性計(jì)算器進(jìn)行計(jì)算），

CSS文件的結(jié)構(gòu)是否合理（例如，維護(hù)較小的文件比維護(hù)較大的文件更容易），

是否值得使用自動構(gòu)建工具，

還有很多其他

在開始重構(gòu)之前，還應(yīng)設(shè)置可衡量的目標(biāo)并選擇要使用的基準(zhǔn)，例如頁面加載時間或第一個有意義的繪制，以便您可以比較它們的前后值。

同樣不要忘記使用版本控制工具，例如Git。這樣，如果出現(xiàn)任何問題，您可以返回到以前的代碼版本。

包起來

您可以使用許多CSS優(yōu)化技巧來改善網(wǎng)站的性能。它們中的大多數(shù)易于實(shí)現(xiàn)，但會對頁面加載時間產(chǎn)生重大影響。更快的加載頁面不僅可以增強(qiáng)用戶體驗(yàn)，還可以幫助您在Google和其他搜索引擎中獲得更好的排名。

除了CSS優(yōu)化最佳實(shí)踐之外，您還可以使用許多其他技術(shù)來提高加載速度，例如緩存，Google AMP和HTTPS協(xié)議。

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

ello，各位小伙伴，今天廣州藍(lán)景跟大家分享前端技術(shù)干貨，頁面加載速度問題。

首先我們都討厭加載緩慢的頁面！

要知道加載時間每增加1秒（0-5秒之間），網(wǎng)站轉(zhuǎn)化率就會平均下降4.42%。頁面加載時間的前五秒對轉(zhuǎn)化率的影響最大。

幸運(yùn)的是，我們可以通過優(yōu)化HTML和CSS文件來提高網(wǎng)站的頁面加載速度，而無需花費(fèi)昂貴的服務(wù)器資源！

注：本文將僅關(guān)注如何使用HTML和CSS文件來提高頁面加載速度。

延遲加載

延遲加載是一種縮短關(guān)鍵渲染路徑長度的策略，從而減少頁面加載時間。

a）拆分CSS文件

盡量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上執(zhí)行。

<!-- 加載和解析整個sytles.css文件會阻塞主瀏覽器渲染 -->
<link rel="stylesheet" href="styles.css" />

對于打印媒體，可以使用：

<!-- 加載和解析print.css時不會阻塞渲染，只會在打印模式加載該樣式 -->
<link rel="stylesheet" href="print.css" media="print" />

對于移動設(shè)備屏幕，可以使用：

<!-- 只會在移動設(shè)備這樣的小屏幕下才會加載和解析該樣式 -->
<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屬性應(yīng)用于@font-face規(guī)則，定義瀏覽器如何加載和顯示字體文件，從而允許在字體加載或加載失敗時以回退字體顯示文本。這可以通過使文本可見取代空白屏幕來提高性能，但代價是閃爍無樣式的文本。

@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格式的圖片被推薦作為網(wǎng)絡(luò)的圖片格式標(biāo)準(zhǔn)。

WebP無損圖片在尺寸方面比PNG小26%。WebP有損圖片比同等SSIM質(zhì)量指數(shù)下的同類JPEG圖片小25-34%。動畫WebP圖片支持有損、無損和透明，與GIF和APNG相比，可以提供更小的尺寸。

下圖是WebP與PNG圖片格式對比：

下圖是WebP與JPEG圖片格式對比：

所有這些測試都可以證明，即使是有損壓縮，webp圖片的壓縮率也更高，因此大大減少了頁面加載時間！

你還可以嘗試另一種圖片格式.avif，在少數(shù)情況下比.webp更好，但由于該格式比較新（2019年發(fā)布），因此還沒有多少瀏覽器支持.avif格式！

使用<picture>元素

a）可用于針對不同的media條件裁剪或修改圖片（例如，在較小的顯示器上加載大圖片的縮略版本）。

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

c）通過為查看器加載最合適的圖片來節(jié)省帶寬并加快頁面加載時間。

如果為高DPI顯示器提供更高分辨率的圖像版本，請改用<img>元素上的srcset。這允許瀏覽器在數(shù)據(jù)保存模式下選擇低分辨率版本，并且你不必編寫顯式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. 渲染圖像

由于圖像是異步加載的，并在第一次繪制后繼續(xù)加載，如果在加載之前未定義其尺寸，則可能會導(dǎo)致重排到頁面內(nèi)容。例如，文本因加載圖像而被推下頁面。因此，設(shè)置width和高h(yuǎn)eight屬性至關(guān)重要，以便瀏覽器可以在布局中為它們保留空間。

對于任何background-image，設(shè)置background-color值很重要，以便在下載圖像之前，覆蓋的內(nèi)容保持可讀。

4. 壓縮HTML和CSS文件

壓縮指的是從代碼中刪除所有不必要的字符以減小尺寸。刪除的是不需要的空格字符，如空格、換行符、制表符等以及注釋。

使用壓縮工具，如CodeBeautify，CSS Minifier等來縮小HTML和CSS文件。有助于為網(wǎng)站提供更快的頁面加載速度。

在線咨詢

上一篇：HTML 鏈接
下一篇：B端設(shè)計(jì)組件：按鈕

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

24行代碼，讓你的網(wǎng)頁元素任意放大、縮小、拖拽、移動

您的項(xiàng)目需求

24行代碼，讓你的網(wǎng)頁元素任意放大、縮小、拖拽、移動