成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

巧用css的border屬性完成對(duì)圖片編輯功能的性能優(yōu)化

番茄西紅柿 / 1245人閱讀

摘要：一需求場(chǎng)景最近閑來(lái)無(wú)事，提出了一個(gè)要求，研究相關(guān)代碼并完成一個(gè)關(guān)于編輯圖片功能的性能優(yōu)化，該功能的主要界面展示如下通過(guò)了幾分鐘的短暫試用，發(fā)現(xiàn)就是一個(gè)簡(jiǎn)單的裁剪并保存用戶(hù)選擇并上傳的圖片作為用戶(hù)頭像的功能。

一、需求場(chǎng)景：

最近閑來(lái)無(wú)事，boss提出了一個(gè)要求，研究相關(guān)代碼并完成一個(gè)關(guān)于編輯圖片功能的性能優(yōu)化，該功能的主要界面展示如下：

通過(guò)了幾分鐘的短暫試用，發(fā)現(xiàn)就是一個(gè)簡(jiǎn)單的裁剪并保存用戶(hù)選擇并上傳的圖片作為用戶(hù)頭像的功能。

主要功能點(diǎn)如下：

  1. 選擇圖片并上傳。
  2. 拖動(dòng)中間選擇區(qū)域的位置或者大小選擇設(shè)置的圖片區(qū)域。
  3. 點(diǎn)擊確定按鈕，完成圖片設(shè)置。

初步一看，貌似沒(méi)有什么值得優(yōu)化的地方，通過(guò)與boss深入了解后知曉，在選擇容量較大（超過(guò)10MB）的圖片時(shí)，瀏覽器響應(yīng)速度會(huì)變得異常緩慢，具體表現(xiàn)是

拖動(dòng)中間選擇區(qū)域的位置或者大小時(shí)，大約3-4秒才響應(yīng)一次，嚴(yán)重影響了使用者的用戶(hù)體驗(yàn)，作為一名專(zhuān)（zhuang）業(yè)（bi）的前端人員來(lái)說(shuō)，是完全不能容忍的。

二、性能分析：

作為一名專(zhuān)（zhuang）業(yè)（bi）的前端人員來(lái)說(shuō)，遇到問(wèn)題的首要肯定是先進(jìn)行性能分析。一般來(lái)說(shuō)瀏覽器的性能問(wèn)題無(wú)非就是CPU和內(nèi)存消耗占用。

通過(guò)對(duì)比查看性能管理器中的chrome內(nèi)存占用后發(fā)現(xiàn)，選擇大容量圖片前，chrome的內(nèi)存占用是883MB，而選擇大容量圖片后，chrome的內(nèi)存占用達(dá)到了2232MB，

內(nèi)存占用暴漲將近了200%！這就是出現(xiàn)性能問(wèn)題的所在。事不宜遲，開(kāi)始著手研究并解決問(wèn)題。

三、查看代碼：

通過(guò)查看代碼，發(fā)現(xiàn)實(shí)現(xiàn)該功能的程序猿（也可能是媛）是通過(guò)在背景渲染一張完整的image，前景的圖片選擇區(qū)域設(shè)置一個(gè)透明度為0.3的蒙版（圖中的黑色背景區(qū)域），

然后在選擇區(qū)域（圖中綠色方框）的背景區(qū)域再渲染一張image，再通過(guò)動(dòng)態(tài)設(shè)置background-position的top、left和size來(lái)達(dá)到預(yù)覽并獲取選中區(qū)域圖片的目的。

html結(jié)構(gòu)如下：


　　

　　　　
　　　　
　　　　　　
　　　　　　
　　　　
　　　　
　　　　
　　　　
　　　　
　　　　　　　
	　　
	　　
	　　
	　　
	　　
　　　　
　　

javascript代碼如下（基于AngularJS）：

scope.roomPhotoEdit.edited = {
    background-image: url( + currentImage.attr(src) + ),　　　　　　　　　　 // 這里多渲染了一張圖片
    background-position: backgroundPositionOption[imageSizeType],　　　　　　　　 // 動(dòng)態(tài)設(shè)置top和left
    background-size: backgroundSizeOption[imageSizeType]　　　　　　　　　　　　　 // 設(shè)置預(yù)覽區(qū)域的尺寸
}

通過(guò)代碼可以很明顯的看到通過(guò)在class為drag_area的區(qū)域額外渲染一張背景圖片并動(dòng)態(tài)修改background-position和background-size來(lái)達(dá)到預(yù)覽選擇區(qū)域圖片的目的。

由于額外渲染了一張圖片，如果用戶(hù)選擇的容量超大的圖片，則會(huì)導(dǎo)致瀏覽器內(nèi)存占用暴漲，如果能只渲染一張圖片，應(yīng)該就能極大減少內(nèi)存占用，可以從此入手。

四、嘗試優(yōu)化：

首先就是去除拖放區(qū)域中額外渲染的背景圖片。

可以從上圖中看到去除了背景圖片之后，拖放區(qū)域被黑色蒙版遮蓋住了，沒(méi)有預(yù)覽的效果了。

通過(guò)度娘之后得知可以通過(guò)動(dòng)態(tài)設(shè)置黑色蒙版區(qū)域的border-width、border-style、border-color來(lái)達(dá)到顯示拖放區(qū)域的預(yù)覽圖片效果。

話(huà)不多說(shuō)，先來(lái)直接看看效果。

再來(lái)看之前drag_area區(qū)域的html結(jié)構(gòu)，可以發(fā)現(xiàn)，之前的背景圖片等樣式全部被去除了。

 取而代之的之前的黑色蒙版區(qū)域crop_dimmed的樣式，可以看到設(shè)置了border-width、border-style和border-color，來(lái)達(dá)到顯示中間預(yù)覽區(qū)域的效果。

最后要做的只是，在預(yù)覽區(qū)域的拖放事件中動(dòng)態(tài)去設(shè)置drop_dimmed區(qū)域的border-width屬性即可。

該屬性主要的計(jì)算規(guī)則如下（其中l(wèi)ayoutTop為綠色方框區(qū)域的top屬性，layoutLeft為綠色方框區(qū)域的left屬性，containerWidth為外部容器的寬度，containerHeight為外部容器的高度，position.size為綠色方框區(qū)域的寬高，在這里拖放區(qū)域只能等比拖放，所以是個(gè)正方形，寬高一致）：

border-top-width: layoutTop + "px"
border-right-width: containerWidth - layoutLeft - position.size + "px"
border-bottom-width: containerHeight - layoutTop - position.size + "px"
border-left-width: layoutLeft + "px"

五、驗(yàn)收

代碼改完了最后一步當(dāng)然是驗(yàn)收了，通過(guò)查看修改后的內(nèi)存占用發(fā)現(xiàn)，即使選擇了大容量的圖片之后，內(nèi)存占用也穩(wěn)定在了800MB左右，而且操作比之前流暢多了。

搞定，收工！

六、總結(jié)：

從最初的純粹為了圖片裁剪區(qū)域的預(yù)覽，而額外渲染了一張圖片開(kāi)始，到最后的去除額外圖片渲染，而采用border-width的方案來(lái)達(dá)到裁剪區(qū)域預(yù)覽的目的。

前端er們做的事情無(wú)非為了用戶(hù)體驗(yàn)這4個(gè)字不斷在努力。而前端的一切的方案和手段，最終目的都是為了提升用戶(hù)體驗(yàn)。

畢竟，我們做出的是最接近用戶(hù)的產(chǎn)品。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1518.html

相關(guān)文章

  • 巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

    摘要：那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來(lái)?yè)伍_(kāi)而非，這個(gè)方案跟消除浮動(dòng)所用的方案非常相似給容器添加一個(gè)子元素偽元素，并把子元素偽元素的設(shè)為，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來(lái)，便能把容器的高度撐至與寬度一致了。 一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn) 本文依賴(lài)于一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)：當(dāng)margin/padding取形式為百分比的值時(shí)，無(wú)論是left/right，還是t...

    wenzi 評(píng)論0 收藏0

  • 巧用CSS遮罩

    摘要：用法樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來(lái)顯示位于該遮罩圖下方的圖像。其實(shí)可以利用變色，而利用遮罩去繪制圖標(biāo)。遮罩透過(guò)的地方是圖標(biāo)的填色部分，而遮罩蓋過(guò)的地方則沒(méi)有顏色。 1. 用法 -webkit-mask樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來(lái)顯示位于該遮罩圖下方的圖像。如果遮罩圖某個(gè)像素點(diǎn)透明度為1則顯示下方的圖像，透明度為0則不顯示，介于0...

    cocopeak 評(píng)論0 收藏0

  • CSS（一）偽元素的巧用

    摘要：并且，一些偽元素可以使開(kāi)發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見(jiàn)的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類(lèi)使用一個(gè)冒號(hào)例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。 作為一門(mén)前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類(lèi)和...

    entner 評(píng)論0 收藏0

  • 知識(shí)整理之CSS篇

    摘要：如對(duì)知識(shí)點(diǎn)感興趣，可移步至知識(shí)整理之篇就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫(xiě)特定的樣式達(dá)到讓瀏覽器兼容的過(guò)程。對(duì)于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素，這些對(duì)象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識(shí)點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對(duì)HTML知識(shí)點(diǎn)感興趣，可移步至...

    ermaoL 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<