資訊專欄INFORMATION COLUMN
摘要：一需求場景最近閑來無事，提出了一個要求，研究相關代碼并完成一個關于編輯圖片功能的性能優(yōu)化，該功能的主要界面展示如下通過了幾分鐘的短暫試用，發(fā)現(xiàn)就是一個簡單的裁剪并保存用戶選擇并上傳的圖片作為用戶頭像的功能。
一、需求場景：
最近閑來無事，boss提出了一個要求，研究相關代碼并完成一個關于編輯圖片功能的性能優(yōu)化，該功能的主要界面展示如下：
通過了幾分鐘的短暫試用，發(fā)現(xiàn)就是一個簡單的裁剪并保存用戶選擇并上傳的圖片作為用戶頭像的功能。
主要功能點如下：
初步一看，貌似沒有什么值得優(yōu)化的地方，通過與boss深入了解后知曉，在選擇容量較大（超過10MB）的圖片時，瀏覽器響應速度會變得異常緩慢，具體表現(xiàn)是
拖動中間選擇區(qū)域的位置或者大小時，大約3-4秒才響應一次，嚴重影響了使用者的用戶體驗，作為一名專（zhuang）業(yè)（bi）的前端人員來說，是完全不能容忍的。
二、性能分析：
作為一名專（zhuang）業(yè)（bi）的前端人員來說，遇到問題的首要肯定是先進行性能分析。一般來說瀏覽器的性能問題無非就是CPU和內(nèi)存消耗占用。
通過對比查看性能管理器中的chrome內(nèi)存占用后發(fā)現(xiàn)，選擇大容量圖片前，chrome的內(nèi)存占用是883MB，而選擇大容量圖片后，chrome的內(nèi)存占用達到了2232MB，
內(nèi)存占用暴漲將近了200%！這就是出現(xiàn)性能問題的所在。事不宜遲，開始著手研究并解決問題。
三、查看代碼：
通過查看代碼，發(fā)現(xiàn)實現(xiàn)該功能的程序猿（也可能是媛）是通過在背景渲染一張完整的image，前景的圖片選擇區(qū)域設置一個透明度為0.3的蒙版（圖中的黑色背景區(qū)域），
然后在選擇區(qū)域（圖中綠色方框）的背景區(qū)域再渲染一張image，再通過動態(tài)設置background-position的top、left和size來達到預覽并獲取選中區(qū)域圖片的目的。
html結構如下：
javascript代碼如下（基于AngularJS）：
scope.roomPhotoEdit.edited = {
background-image: url( + currentImage.attr(src) + ), // 這里多渲染了一張圖片
background-position: backgroundPositionOption[imageSizeType], // 動態(tài)設置top和left
background-size: backgroundSizeOption[imageSizeType] // 設置預覽區(qū)域的尺寸
}
通過代碼可以很明顯的看到通過在class為drag_area的區(qū)域額外渲染一張背景圖片并動態(tài)修改background-position和background-size來達到預覽選擇區(qū)域圖片的目的。
由于額外渲染了一張圖片，如果用戶選擇的容量超大的圖片，則會導致瀏覽器內(nèi)存占用暴漲，如果能只渲染一張圖片，應該就能極大減少內(nèi)存占用，可以從此入手。
四、嘗試優(yōu)化：
首先就是去除拖放區(qū)域中額外渲染的背景圖片。
可以從上圖中看到去除了背景圖片之后，拖放區(qū)域被黑色蒙版遮蓋住了，沒有預覽的效果了。
通過度娘之后得知可以通過動態(tài)設置黑色蒙版區(qū)域的border-width、border-style、border-color來達到顯示拖放區(qū)域的預覽圖片效果。
話不多說，先來直接看看效果。
再來看之前drag_area區(qū)域的html結構，可以發(fā)現(xiàn)，之前的背景圖片等樣式全部被去除了。
取而代之的之前的黑色蒙版區(qū)域crop_dimmed的樣式，可以看到設置了border-width、border-style和border-color，來達到顯示中間預覽區(qū)域的效果。
最后要做的只是，在預覽區(qū)域的拖放事件中動態(tài)去設置drop_dimmed區(qū)域的border-width屬性即可。
該屬性主要的計算規(guī)則如下（其中l(wèi)ayoutTop為綠色方框區(qū)域的top屬性，layoutLeft為綠色方框區(qū)域的left屬性，containerWidth為外部容器的寬度，containerHeight為外部容器的高度，position.size為綠色方框區(qū)域的寬高，在這里拖放區(qū)域只能等比拖放，所以是個正方形，寬高一致）：
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"
五、驗收
代碼改完了最后一步當然是驗收了，通過查看修改后的內(nèi)存占用發(fā)現(xiàn)，即使選擇了大容量的圖片之后，內(nèi)存占用也穩(wěn)定在了800MB左右，而且操作比之前流暢多了。
搞定，收工！
六、總結：
從最初的純粹為了圖片裁剪區(qū)域的預覽，而額外渲染了一張圖片開始，到最后的去除額外圖片渲染，而采用border-width的方案來達到裁剪區(qū)域預覽的目的。
前端er們做的事情無非為了用戶體驗這4個字不斷在努力。而前端的一切的方案和手段，最終目的都是為了提升用戶體驗。
畢竟，我們做出的是最接近用戶的產(chǎn)品。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/1518.html
摘要：那想要優(yōu)化這一點，唯一的方法就是利用內(nèi)容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設為，使其實際高度相當于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。 一個基礎卻又容易混淆的css知識點 本文依賴于一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是t...
摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。 作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4024·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4154·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00
