問(wèn)題先行，如何使用 CSS 實(shí)現(xiàn)下述滾動(dòng)條效果？ 就是頂部黃色的滾動(dòng)進(jìn)度條，隨著頁(yè)面的滾動(dòng)進(jìn)度而變化長(zhǎng)短。 在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動(dòng)手...
發(fā)簡(jiǎn)信
IP屬地：湖南
-
不可思議的純 CSS 滾動(dòng)進(jìn)度條效果
-
沖冠一怒為代碼：論程序員與負(fù)能量
沖冠一怒為代碼：論程序員與負(fù)能量 （本文已被譯為俄文和西班牙文，十分感謝譯者們。） 此刻我正凝視著一段代碼。這段代碼，可以說(shuō)是我見(jiàn)過(guò)的最爛的代碼之一。為了更新數(shù)據(jù)庫(kù)中的單條記...
-
「譯」理解Javascript函數(shù)執(zhí)行—調(diào)用棧、事件循環(huán)、任務(wù)等
現(xiàn)如今，web開(kāi)發(fā)者（我們更喜歡被叫做前端工程師）用一門腳本語(yǔ)言就能做任何事情，從提供瀏覽器中的交互，到開(kāi)發(fā)電腦游戲、桌面工具、跨平臺(tái)移動(dòng)應(yīng)用，甚至可以在服務(wù)端部署（如最流行...
-
「前端詞典」這些功能其實(shí)不需要 JS，CSS 就能搞定
直接入題 1. 每個(gè)單詞的首字母大寫(xiě) 其實(shí)我第一次看到這個(gè)功能的時(shí)候就是使用 JS 去實(shí)現(xiàn)這個(gè)功能，想都沒(méi)想 CSS 可以完成這個(gè)功能。馬上就屁顛屁顛的寫(xiě)了一個(gè)方法： 寫(xiě)完這...
-
瀏覽器輸入 URL 后發(fā)生了什么？
這是一道非常經(jīng)典的題目，相信你被面試或者面試別人有非常大的概率接觸過(guò)，也可能只是其中某一部分進(jìn)行提問(wèn)。這道題涵蓋的知識(shí)點(diǎn)非常多，考察得比較全面，網(wǎng)上一搜也有成百上千篇文章，不...
-
靜態(tài)網(wǎng)站生成器是如何工作的
在過(guò)去的幾年里，開(kāi)源靜態(tài)網(wǎng)站生成器的數(shù)量增長(zhǎng)迅速，StaticGen 上幾乎找得到每一種語(yǔ)言實(shí)現(xiàn)的版本。靜態(tài)網(wǎng)站相比動(dòng)態(tài)網(wǎng)站具備無(wú)需依賴應(yīng)用服務(wù)器，性能優(yōu)越，部署簡(jiǎn)單等特點(diǎn)。...
-
jsonp的原理與實(shí)現(xiàn)
概述jsonp是一種跨域通信的手段，它的原理其實(shí)很簡(jiǎn)單： 首先是利用script標(biāo)簽的src屬性來(lái)實(shí)現(xiàn)跨域。 通過(guò)將前端方法作為參數(shù)傳遞到服務(wù)器端，然后由服務(wù)器端注入?yún)?shù)之后...
-
Tree-Shaking性能優(yōu)化實(shí)踐 - 實(shí)踐2篇
三. tree-shaking實(shí)踐 [圖片上傳中...(image-c050ec-1566907647861-15)] webpack2 發(fā)布，宣布支持tree-shakin...
-
Tree-Shaking性能優(yōu)化實(shí)踐 - 原理篇
一. 什么是Tree-shaking [圖片上傳中...(image-1e0c64-1566907465560-23)] 先來(lái)看一下Tree-shaking原始的本意 [圖片...
-
React 源碼解析前言 適合有一定 React 項(xiàng)目經(jīng)驗(yàn)閱讀，默認(rèn)對(duì) React 的常用 api 較為熟悉 研究 React 源碼是結(jié)合網(wǎng)上的一些分析文章＋自己看代碼理解 最開(kāi)始看是因?yàn)轫?xiàng)目中...
-
React 源碼解析前言 適合有一定 React 項(xiàng)目經(jīng)驗(yàn)閱讀，默認(rèn)對(duì) React 的常用 api 較為熟悉 研究 React 源碼是結(jié)合網(wǎng)上的一些分析文章＋自己看代碼理解 最開(kāi)始看是因?yàn)轫?xiàng)目中...
-
前端緩存最佳實(shí)踐
前言 緩存，這是一個(gè)老生常談的話題，也常被作為前端面試的一個(gè)知識(shí)點(diǎn)。 本文，重點(diǎn)在與探討在實(shí)際項(xiàng)目中，如何進(jìn)行緩存的設(shè)置，并給出一個(gè)較為合理的方案。 強(qiáng)緩存和協(xié)商緩存 在介紹...
-
一次弄懂Event Loop（徹底解決此類面試問(wèn)題）
前言 Event Loop即事件循環(huán)，是指瀏覽器或Node的一種解決javaScript單線程運(yùn)行時(shí)不會(huì)阻塞的一種機(jī)制，也就是我們經(jīng)常使用異步的原理。 為啥要弄懂Event ...
-
css加載會(huì)造成阻塞嗎？
之前面試今日頭條的時(shí)候，今日頭條面試官問(wèn)我，js執(zhí)行會(huì)阻塞DOM樹(shù)的解析和渲染，那么css加載會(huì)阻塞DOM樹(shù)的解析和渲染嗎？所以，接下來(lái)我就來(lái)對(duì)css加載對(duì)DOM樹(shù)的解析和渲...
-
教你從零開(kāi)始搭建一款前端腳手架工具
前言 在實(shí)際的開(kāi)發(fā)過(guò)程中，從零開(kāi)始建立項(xiàng)目的結(jié)構(gòu)是一件讓人頭疼的事情，所以各種各樣的腳手架工具應(yīng)運(yùn)而生。筆者使用較多的yoeman，express-generator和vue...
-
ESLint里的規(guī)則教會(huì)我，無(wú)規(guī)矩 不編程編程風(fēng)格要統(tǒng)一 編程風(fēng)格這個(gè)東西，說(shuō)實(shí)在的對(duì)于剛加入團(tuán)隊(duì)的新成員來(lái)說(shuō)還是很難讓人完全適應(yīng)的。因?yàn)槊咳说木幊田L(fēng)格都不同，完全是各有千秋的既視感啊 到了新公司后團(tuán)隊(duì)中的每個(gè)人也都...