前端亂燉

掘金發表於2017-12-19

這一次,徹底弄懂 JavaScript 執行機制

本文的目的就是要保證你徹底弄懂javascript的執行機制,如果讀完本文還不懂,可以揍我。 不論你是javascript新手還是老鳥,不論是面試求職,還是日常開發工作,我們經常會遇到這樣的情況:給定的幾行程式碼,我們需要知道其輸出內容和順序。因為javascript是一門單執行緒…

成為專業程式設計師路上用到的各種優秀資料、神器及框架

成為一名專業程式設計師的道路上,需要堅持練習、學習與積累,技術方面既要有一定的廣度,更要有自己的深度。

如何給老婆解釋什麼是 RESTful

老婆經常喜歡翻看我訂閱的技術雜誌,她總能從她的視角提出很多有趣的問題。

Mockjs,再也不用追著後端小夥伴要介面了

相信大家都存在這樣的一個困擾,在前後端分離的大環境下, 前端需要後端的介面去完成頁面的渲染, 但是大部分的情況下,前後端需要同時進行開發, 這種情況下,後端還沒完成資料輸出,前端只好寫靜態模擬資料。 那麼問題就來了 資料太長了,將資料寫在js檔案裡,完成後挨個改url。 某些邏輯…

16種方法實現水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不為別的, 就為用的時候能夠信手拈來. 下面直接步入正題.原文:16種方法實現水平居中垂直居中 水平居中 1) 若是行內元素, 給其父元素設定 text-align:center,即可實現行內元素水平居中. 2) 若是塊級元素, 該元素設定 ma…

正向代理與反向代理

最近工作中用到反向代理,發現網路代理的玩法還真不少,網路背後有很多需要去學習。而在此之前僅僅使用了過代理軟體,曾經為了訪問google,使用了代理軟體,需要在瀏覽器中配置代理的地址。我只知道有代理這個概念,並不清楚代理還有正向和反向之分,於是趕緊學習一下,補充一下知識。首先弄清…

RESTful 介面實現簡明指南

在前後端分離的 Web 應用架構中,前端專注於頁面,同時與後端進行資料互動;而後端則專注於提供 API 介面。在這樣的結構下,REST 是一個很流行的前後端互動形式的約定。這只是一套約定,並不是某個技術標準,所以在實際的應用中,對器實現程度完全取決於後…

從0到1配置eslint (所有人一看就懂)

從0到1配置eslint

19 個 JavaScript 常用的簡寫技術

原文連結,最近很火的一篇文章 1. 三元操作符 當想寫 if…else 語句時,使用三元操作符來代替。 const x = 20; let answer; if (x > 10) { answer = `is greater`; } else { answer = `is les…

深入理解 JavaScript Errors 和 Stack Traces

本文作者是著名 JavaScript BDD 測試框架 Chai.js 原始碼貢獻者之一,Chai.js 中會遇到很多異常處理的情況。跟隨作者思路,從 JavaScript 基本的 Errors 原理,到如何實際使用 Stack Traces,深入學習和理解 JavaScript Errors 和 Stack Traces。文章貼出的原始碼連結也非常值得學習。

前後端分離開發模式的 mock 平臺預研

投稿文章從前後端分離的專案開發方式出發,針對這種開發模式下前端的編碼和自測依賴後臺真實介面,導致無法提高效率的問題,回顧了各種 mock 資料方案,並總結出較好的實踐方式。

前端同學必須要了解關於通訊方面的知識

通過我的前端經驗告訴我掌握下列通訊知識,前端足夠了1.head、options、get、put、post、delete含義與區別2.常見的 GET 和 POST 的區別(淺比較)3.get和post更底層的區別(這可是HR想要的哦)4.總結一下 http 狀態碼5.http 快取

瀏覽器渲染過程與效能優化

大家都知道全球資訊網的應用層使用了HTTP協議,並且用瀏覽器作為入口訪問網路上的資源。使用者在使用瀏覽器訪問一個網站時需要先通過HTTP協議向伺服器傳送請求,之後伺服器返回HTML檔案與響應資訊。這時,瀏覽器會根據HTML檔案來進行解析與渲染(該階段還包括向伺服器請求非內聯的CSS文…

RESTful API 介面設計整理

RESTful API 介面設計整理。安全、URL 定義、查詢引數(排序、過濾)、版本、Headers、狀態碼、響應主體、錯誤、快取、API WIKI 文件要點等

你可能不知道的 14 個 JavaScript 除錯技巧

瞭解你的工具可以在完成任務的過程中發揮重大作用。儘管傳言 JavaScript 難以除錯,但是如果你掌握了一些除錯技巧,那麼你將會花費更少的時間來解決這些錯誤。

前端 PS 切圖方法,圖文詳細

寫在前面:本文主要內容是目前我所知道的切圖技巧結合網上的資料,寫出來分享一波。圖文教程,多圖!! BB:很多人都會說,切圖這個活倒底分給UI還是分給前端。雖然好的UI會給我們把圖切好,但是他們切的圖不一定百分之百符合我們的需求,所以我一直都覺得這是頁面仔必須要會的一項技能,因為…

手把手教你如何使用webpack 生成css sprites

我們在開發網站的時候,通常會把常用的圖示合併成css sprite(雪碧圖),可以有效的減少站點的http請求數量,從而提高網站效能。 下面讓我們一起來學習一下如何使用webpack合併sprite圖。 好了,以上就是webpack生成css sprite的辦法了,是不是覺著很…

影響前端效能的本源——Reflow和Repaint

在移動端的web開發工作中,經常遭遇到的問題就是客戶反映,開啟速度慢,這個說專業點就是效能變差。當接到這種投訴的時候自己心中也是一臉懵逼,在開發環境中測試的好好,怎麼正式執行之後就慢了。心裡雖然在考慮現象的真實原因,但在嘴上估計很多人第一時間就回答給客戶是網速的問題而非自己程式的問題。

SASS: 簡單點,寫 BEM 的方式簡單點

SASS: 簡單點,寫 BEM 的方式簡單點

Firefox 團隊實現的新的超快 CSS 引擎 – Quantum CSS (aka Stylo)

Firefox 團隊在重寫瀏覽器(again),其中 CSS 的部分也同樣需要加速。Quantum CSS 融合了 Parallelism(Servo)、The Rule Tree(Firefox)和 The Style Share Cache(Chrome & Safari)的特點,核心加速點是並行運算。

React 開發中面臨的九個重要抉擇

在 React 開發的過程中我們常常會遇到一些抉擇,下面我將選取其中一些個人認為重要的抉擇來一一分析。但請記住以下所說的都只是的建議,可能有一些方面也沒有考慮到,大家還是需要依據實際情況自己選擇最合適的,切勿隨波逐流。 當開始React開發之前,你或你的團隊必須先考慮選擇什麼樣…

vue-cli#2.0 webpack 配置分析

作者:滴滴公共前端團隊 – 王巨集宇 前言 作為 Vue 的使用者我們對於 vue-cli 都很熟悉,但是對它的 webpack 配置我們可能關注甚少,今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析 vue-cli 的簡介、安裝我們不在這裡贅述,對它還不…

CSS 五種方式實現 Footer 置底

頁尾置底(Sticky footer)就是讓網頁的 footer 部分始終在瀏覽器視窗的底部。這樣的佈局隨處可見,偶然看到 CSS-TRICKS 上介紹頁尾置底的文章覺得不錯,對開闊佈局的思路挺有幫助,遂譯之。

前端常見跨域解決方案(全)

跨域是指一個域下的文件或指令碼試圖去請求另一個域下的資源,這裡跨域是廣義的。 廣義的跨域: 其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。
什麼是同源策略?
同源策略/SOP(Same origin policy)是一種約定,由Netscape公司199…

”天龍八步“細說瀏覽器輸入URL後發生了什麼

當我們在瀏覽器輸入網址並回車後,一切從這裡開始。
我們在瀏覽器輸入網址,其實就是要向伺服器請求我們想要的頁面內容,所有瀏覽器首先要確認的是域名所對應的伺服器在哪裡。將域名解析成對應的伺服器IP地址這項工作,是由DNS伺服器來完成的。
客戶端收到你輸入的域名地址後,它首先去找本地…

Git Cheat Sheet:關於 git 的命令集合

熟練使用 git 能夠成為甩鍋神器,如 git blame 查詢到底是誰動了我的程式碼,git bisect 確認到底是誰提了一個錯誤的提交,git shortlog 檢視每人與多少個提交。

在 JavaScript 中學習資料結構與演算法

這是一本5萬字元(中文約2w)的小書,可能需要幾個小時閱讀,需要幾天或更多時間去消化。部分程式碼還不能正確地跑起來,有錯別字,有不準確的概念…,但這不妨礙它作為你一個野生前端學習資料結構與演算法的啟蒙文章,期待你的一針見血、刀刀致命? 對任何專業技術人員來說,理解資料結構都非…

從 setState promise 化的探討 體會 React 團隊設計思想

從 setState 那個眾所周知的小祕密說起… 在 React 元件中,呼叫 this.setState() 是最基本的場景。這個方法描述了 state 的變化、觸發了元件 re-rendering。但是,也許看似平常的 this.setState() 裡面卻也許蘊含了很多…

RESTful學習及應用

RESTful學習及應用

JS——事件流與事件處理程式

本文對事件流和事件處理程式進行了簡單整理,主要用於理清思路,不做詳細概念解釋。供大家複習與記憶使用。

HTTPS 高效能傳輸優化詳解

HTTPS 高效能傳輸優化詳解

坦然面對:應對前端疲勞 – 眾成翻譯

《Not An Imposter: Fighting Front-End Fatigue》
David Berner:I recently spoke with a back-end developer friend about how many hours I spend coding or learning about code outside of work. He showed me a passage from an Uncle Bob book, “Clean Code”, which compares the hours musicians spend with their instruments in preparation for a concert to developers rehearsing code to perform at work.

原文地址:https://www.smashingmagazine….

前端工程師學習 Nginx 實踐配置 HTTP2.0 篇

HTTP 2.0 介紹的文章看的比較多,但實踐體驗的依然很少,本文就帶你通過 Nginx 實踐配置升級 HTTP 2.0

【 js 基礎 】 setTimeout(fn, 0) 的作用

1、瀏覽器的核心是多執行緒的,它們在核心控制下相互配合以保持同步,一個瀏覽器通常由以下常駐執行緒組成:GUI 渲染執行緒,javascript 引擎執行緒,瀏覽器事件觸發執行緒,定時觸發器執行緒,非同步 http 請求執行緒。 GUI 渲染執行緒:負責渲染瀏覽器介面 HTML 元素,當介面需要重…

長連線/websocket/SSE等主流伺服器推送技術比較

本文將介紹web常用的幾種方式,希望給需要伺服器端推送訊息的同學在選型上有一點啟發。

現代前端技術解析

前端技術發展很快,要學習的東西越來越多,通常我們需要閱讀不同很多資料書籍才能瞭解。比如針對某種技術或框架我們都要去購買一本書籍去了解,久而久之,我們對前端的瞭解依然侷限於點點面面,而無法對前端有一個體系化的認識。這是件很令人煩惱的事情。

Vue.js 開發實踐:實現精巧的無限載入與分頁功能

本篇文章是一篇 Vue.js 的教程,目標在於用一種常見的業務場景—分頁 / 無限載入,幫助讀者更好的理解 Vue.js 中的一些設計思想。

徹底搞清楚 JavaScript 中的 require、import 和 export

隨著es6module的到來,還有現存的各種模組規範,我們很容易暈,這次一次性搞清楚

相關文章