原创 前端頁面卡頓?或是DOM操作惹的禍,需優化代碼

文檔對象模型(DOM)是一個獨立 於特定語言的應用程序接口。在瀏覽器中,DOM接口是以JavaScript語言實現的,通過JavaScript來操作瀏覽器頁面中的元素,這使得 DOM成爲了JavaScript中重要的組成部分。在富客戶端

原创 js內存泄露的幾種情況詳細探討

內存泄露是指一塊被分配的內存既不能使用,又不能回收,直到瀏覽器進程結束。在C++中,因爲是手動管理內存,內存泄露是經常出現的事情。而現在流行的C#和Java等語言採用了自動垃圾回收方法管理內存,正常使用的情況下幾乎不會發生內存泄露。瀏覽器

原创 開發者調試工具Chrome Workspace

Workspace是個什麼樣的東西呢?他能夠在開發者工具中調試修改js或者css同時自動保存文件,能夠避免開發人員在工具中調試好,再到編輯器中修改一次代碼的重複操作,能夠提高一定的效率 配置Chrome Workspace功能 Ch

原创 圖片和文字透明問題

在我們設計製作一些網頁的時候可能會用到半透明的效果,首先我們可能會想到用PNG圖片處理,當然這是一個不錯的辦法,唯一的兼容性問題就是ie6下的BUG,但這也不困難,加上一段js處理就行了。但假如我們需要一個半透明遮罩的彈出層,如登陸

原创 ps如何裁剪掉圖片的不規則區域

按P,鼠標變成鋼筆工具,點選住待清除區域,如下: 按ctrl+enter, 將點線變成選中區域: 按delete刪除:  ctrl+D取消選中區域 完成!

原创 使用瀏覽器緩存

使用瀏覽器緩存 當PageSpeed Insights檢測到您的服務器響應不包含明確的緩存標頭或某些資源被指定只緩存一小段時間時,就會觸發此規則。 概覽 如果用戶會多次訪問您的網站,那麼靜態資源的瀏覽器緩存可以節省用戶的時間

原创 事件委託與阻止冒泡

簡單說下事件委託與阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li>

原创 【ps】裁剪圖片的某一塊

最近做我趣的專輯學了一點小技巧,我們切圖的時候可能需要改變圖片上的文字、需要圖片某一部分的顏色塊進行覆蓋等。這時候就需要下面的技巧啦: 第一步:點v,變箭頭選中圖片 第二部:點M,變矩形框,劃出需要裁剪的部分 第三步:ctrl+J,裁剪(

原创 [切圖]不規則圖形的切法

把選中的兩個圖層連接起來,以後無論選不選中這兩個圖層,都可以直接把不規則圖片拖走啦(選中圖層,點擊下面的鏈接標誌,就可以把圖層連接起來),如下圖: PS小技巧: 點擊圖片選中圖層前,記着做下面的噢:

原创 css sprite簡便方法切 《評分五角星》

摘抄自我趣同伴的心得: 大家可以會遇到過要做滿意度用星級來評分的情況,類似這種 實現的方法有很多,大家最初想到的可能是根據滿意度有多少種情況就切多少種圖,然後拼在一張圖裏面,通過控制圖片的位置來實現。 以下有一種方法實現起來會比較簡單

原创 webapp開發調試環境--weinre配置

    用谷歌調試工具中的手機模擬器模擬手機進行webapp的開發,與真機上的效果還是有些偏差,opera手機模擬器的效果亦不佳。有時在pc上開發出來的webapp效果良好,在部分真機上就出現了偏差,這時候就需要我們進行微調。     

原创 觸屏touchstart 與 click

設計效果:當手指點擊或觸摸紅框線menuList之外的部分時,彈框menuList消失。 問題:在優化觸屏版的時候發現如圖問題,當menuList彈出,手指觸摸屏幕向下滑動時,menuList彈框不消失,只有手指點擊menuList之

原创 css sprite 調整大張圖片中小圖標的大小

直接說解決方法: 假設一張拼合好的大圖大小是:900 x 1000 px (如上圖) 現在想取圖中左上角的河馬圖標,並縮小圖標的大小。 正常取圖: .sprite { background: url('imgs/woqu_local

原创 JSON 數據使用方法

當同一個模板需要替換不同的數據顯示的時候,如果數據量大點,用json很方便。 json對象: var JSONObject= { "name":"Bill Gates", "street":"Fifth Avenue New York 6

原创 谷歌調試工具選取元素選擇不到頁面的具體元素問題

z-index的問題 document的默認值是0. 一旦出現這種問題,檢查下是否對大背景設置了z-index:-1; 如果設置了這個,那麼所有的被設元素的內容都會在document之下,選取不到。包括不會出現鏈接點擊、文字選取、hove