動態

列表
創建 時間

cookie、session、web storage

cookie與session的區別 首先,使用cookie和session的目的都是為了跟蹤記錄用户狀態,因為http協議是無狀態的協議,而某些場景服務端需要記錄用户的狀態,如購物車,需要來識別具體的用户,服務端就為特定的用户創建特定的session,用於標識並跟蹤用户; 其次,cookie和session都是會話技術,session保存在服務端,cookie保存在客户端,服務端無法知道請求對應哪

創建 時間

單頁應用的優缺點

上月面試海康威視的一道面試題。 單頁應用,即常説的SPA,Single Page Application,從名稱上就可以看出它最大的特點,就是單頁面,即只有一個頁面;相對的就是多頁面,即MPA,Multi-Page Application。 在多頁面的情況下,我們在切換不同頁面時,需要向服務器發送多次請求來獲取不同頁面內容,在獲取到內容後,整個瀏覽器視口需要被重新渲染,而等待服務器的響應需要一定的

創建 時間

居中佈局:水平居中和垂直居中

居中佈局在實際場景中很常見,在面試當中也經常會被考察。 以下分別是水平居中和垂直居中常用的樣式。 水平居中 margin: 0 auto; + width 應用於塊級元素居於容器中間 若節點不是塊級元素,需聲明display: block 若節點寬度已隱式聲明則無需顯式聲明width div class="h-c1" p談笑有鴻儒,往來無白丁。談笑有鴻儒,往來無白丁。/p /div

創建 時間

對BFC的理解

在前端的面試中,相對JavaScript而言,CSS佈局方面考察的內容會相對少一些,其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC,全稱為Block Formatting Context,翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是,網頁上一個獨立且隔離的渲染區域。現在呢,我稍微查閲了一些官方的信息。 在瞭解BFC之前,我們需要先了解一些其他概念: 包含塊(contai

創建 時間

可視化學習:WebGL實現簡易的局部“馬賽克”

前言 接觸過Canvas的小夥伴應該都知道,在Canvas2D中我們要加載一個圖片很簡單,通過調用drawImage API就能將圖像繪製到畫布上,當然在WebGL中我們也可以繪製圖像,在繪製時我們需要用到WebGL中的紋理對象,在之前WebGL實現網格背景的文章中,我使用了一個叫做紋理座標的配置,現在要完成紋理的加載我們也需要用到紋理座標,並且我們可以通過對紋理座標處理實現簡單的”馬賽克“效果。

創建 時間

WebGL:使用着色器進行幾何造型

前言 本文將介紹如何使用着色器來進行幾何造型,説到幾何圖形大家一定都不陌生,比如説三角形、圓形,接觸過WebGL基礎使用的小夥伴一定都知道怎麼去在畫布上繪製一個三角形,只要傳入三個頂點座標,並選擇繪圖模式,我們就能在WebGL的畫布上畫出一個三角形。 但是除了這種形式之外,我們還可以直接使用片元着色器進行幾何造型,那麼具體要怎麼做呢,下面就以三角形作為例子來進行演示。 繪製三角形 要實現三角形的繪

創建 時間

可視化學習:使用極座標參數方程和SDF繪製有趣的圖案

前言 本文將介紹如何使用極座標參數方程和上一篇文章提到的距離場SDF來繪製有趣的圖案。 説到曲線和幾何圖形的繪製,我們知道圖形系統默認支持的是通過直角座標繪製,但是有些曲線呢,不太容易使用直角座標系來表示,卻可以很方便地使用極座標來表示,這個時候我們可以選擇通過極座標和直角座標的相互轉換,來實現圖形的繪製。 下面我就用玫瑰線、花瓣線等曲線作為例子來進行演示。 在開始演示之前,我先簡單介紹下極座標和

創建 時間

可視化學習 | 如何使用噪聲生成紋理

本文分享的是如何使用噪聲生成紋理。 首先,什麼是噪聲呢?在上篇文章中我介紹過一個生成隨機數的函數,利用隨機技巧我們生成了一個類似剪紙的圖案,那在自然界中,這種離散的隨機也是比較常見的,比如蟬鳴突然響起又突然停下,比如雨滴隨機落在一個位置,但是隨機和連續並存是更常見的情況,比如山脈的走向是隨機的,但山峯之間的高度又是連續的,比如天上的雲朵、水面的波紋等等。 那麼這種把隨機和連續結合起來,就形成了噪聲

創建 時間

可視化學習:如何使用後期處理通道增強圖像效果

前言 大家好,本文分享的是如何使用後期處理通道增強圖像效果,通過前面幾篇文章,我們瞭解了一些動態生成紋理的方法,比如符號距離場SDF、基於參數方程生成圖案、基於噪聲生成紋理,等等。這些生成紋理的技術有相似的地方,就是根據片元的紋理座標,對片元着色,直接生成紋理。 因為GPU是並行渲染的,每個像素的着色器程序是並行執行的,這樣的渲染很高效。但是在實際需求中,有時我們計算片元色值時,需要依賴周圍像素點

創建 時間

可視化學習:如何用WebGL繪製3D物體

在之前的文章中,我們使用WebGL繪製了很多二維的圖形和圖像,在學習2D繪圖的時候,我們提過很多次關於GPU的高效渲染,但是2D圖形的繪製只展示了WebGL部分的能力,WebGL更強大的地方在於,它可以繪製各種3D圖形,而3D圖形能夠極大地增強可視化的表現能力。 相信很多小夥伴都對此有所耳聞,也有不少人學習WebGL,就是衝着它的3D繪圖能力。 接下來,我就用一個簡單的正立方體的例子來演示在Web

創建 時間

可視化學習:如何生成簡單動畫讓圖形動起來

大家好,本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中,動畫它是強化數據表達,吸引用户的重要技術手段。 在具體實現動畫之前,我們先來了解一下動畫的三種形式,分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像,將圖像依次播放] D -- C[動態繪製

創建 時間

閉包是什麼,有什麼用途

這是上月面試碰到的一道面試題,作為一個有着十年開發經驗七年前端經驗的大齡青年,碰到這種沒有一點鋪墊的八股文,真的只想説一句毀滅吧。 記得以前剛做前端不久的時候,就在百度搜閉包,大多搜到的結果都説的是閉包是什麼樣子的,比如説在函數外部可以訪問到函數內部的變量,又或者説閉包會導致什麼問題,比如會影響GC回收。總之沒什麼標準説法,就好像現在網上的吐槽,你背面試題沒用,得和麪試官背的同一套才行,但是天知道

創建 時間

給web增加簡單的ai對話功能

自從 ChatGPT 火了之後,越來越多人開始對 AI 感興趣,AI 的使用也越來越普遍了。現在你隨便點開個知名網站或者 APP,基本都能看到 AI 的影子,而且這些 AI 大多都是用 “問答” 的形式跟人互動,説白了就是 “聊天”。 當然啦,現在的 AI 也不是完美的,比如有時候會瞎編東西(就是大家説的 “AI 幻覺”),但給 APP 加個 AI 功能,確實能讓它變好玩、互動感更強。那咱們

創建 時間

WebSSH的簡單實現

今天我們來看WebSSH的簡單實現。 因為web的便利性,很多傳統功能都有了web端的實現,WebSSH就是其中之一,我是第一次接觸,所以來記錄一下使用。 WebSSH支持終端交互,主要可以分為兩部分,第一是頁面輸入命令行並傳遞給遠程終端,第二是展示命令執行結果,這兩部分現在都已經有具體實現的庫了,所以我們只需要把它們組合起來。 在具體實現之前,需要先準備一個遠程終端,我這裏用的是VMware創建