文章加密

;

2020年5月8日 星期五

在中國客戶口中的H5是什麼?原來不是Html5…,還附H5小遊戲代碼

1.
https://medium.com/@chiayenchiu/%E5%88%B0%E5%BA%95%E5%AE%A2%E6%88%B6%E5%8F%A3%E4%B8%AD%E7%9A%84h5%E6%98%AF%E4%BB%80%E9%BA%BC-html5-ac75678c29ff    在中國客戶口中的H5是什麼?原來不是Html5…

原來H5就是在微信裡,透過公眾號或是朋友圈發文的一個連結,點開後會在微信內部瀏覽器開啟一個類似移動端的活動網頁,原來這就是傳說中的H5!
H5的起源很可能是在HTML5發佈並且標準制訂完成的時間左右,先被工程師運用到手機端的活動、行銷頁面,行銷人員或其他人看到酷炫的頁面,詢問工程師後發現是最新標準HTML5製作的,接著行銷或業務在向客戶demo酷炫頁面時,可能就陰錯陽差或是簡稱這新技術叫H5,於是慢慢往外擴散,積非成是,漸漸地大家就都叫這種在微信好友之間分享、轉發的活動或行銷頁面為H5。
由於太多公司或品牌都把H5當作一個透過微信、QQ宣傳的行銷工具,坊間紛紛出現H5速成班(其實就是教授前端技術與知識吧!)、H5行銷等等,甚至還有很多製作H5的模版網站,有MAKA人人秀易秀網等,族繁不及備載,不需具備程式背景,就可以在這些模版網站上拖拉素材、新增頁面、製作動畫效果,有興趣的朋友可以來試試呀!

2.
https://m.html.cn/qa/html5/11792.html  简单的html5小游戏推荐(附代码)
刪除H5遊戲的研究是因為;
前端开发工程师对html5游戏开发一无所知再正常不过了,毕竟几乎完全是两个不同方向:
前端和html/css/js打交道比较多,是基于DOM的(不太会表述,能懂就行)。html5游戏则主要是canvas/js,核心在画布上。开发html5游戏的,不一定会前端,反之亦然。
java web开发者学习Android游戏开发也会有不小门槛。

3.H5模板,如廣宣
向這些網站提供的,MAKA、人人秀( https://rrx.cn/ )、易秀網,但我覺得那也是canvas
差不多可以說H5網頁=canvas製作網頁
雖然H5遊戲可能不必要,但H5廣宣我倒覺得很需要,這是一個需要會代碼又會美術的職業,他絕不會被定義為美術,而真正他會被視為可以製作H5遊戲!
https://rrx.cn/storeview/vtolch.html  廣宣
http://xcdn.php.cn/js/html5/H5%203D%E6%BB%9A%E7%90%83%E6%B8%B8%E6%88%8F%E6%BA%90%E7%A0%81/index.html?sign=cdd1b11d2ae7afeb7f5c1816f9b8faef&timestamp=1588951871  遊戲

2020年4月2日 星期四

TCP, handshake,dns

網域名稱系統(DNS:Domain Name System):

先思考一個有趣的問題,全世界的網址那麼多,一台 DNS 伺服器怎麼可能知道這麼多網址對應的 IP 位址是什麼呢?為了要解決這個問題,我們把全世界所有的網址區分為許多不同的「網域(Domain)」,並且定義了不同的層級

  1. root domain: 根網域是 DNS 架構最上層的伺服器,全球共約 16 台,當下層的任何一台 DNS 伺服器無法查出某個網址對應的 IP 位址時,則會向最上層負責根網域的 DNS 伺服器查詢。一個新網址訪問時,會先到root在一步步往下查詢。
  2. top level domain (TLD)
  3. second level domain
  4. host domain
https://www.stockfeel.com.tw/dns-%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%98%AF%E4%BB%80%E9%BA%BC%EF%BC%9F%E5%A6%82%E4%BD%95%E9%81%8B%E7%94%A8%EF%BC%9F/

handshake:

https://www.chainnews.com/zh-hant/articles/930260468603.htm
 //還沒看 "Handshake 的三大功能 "
https://hsd-dev.org/ 官網
https://www.chainnews.com/zh-hant/articles/452340854508.htm 其他

2020年4月1日 星期三

stack: 栈是一种遵从后进先出(LIFO)原则的有序集合

注意!javascript本身function已經足夠,再建一個stack類與prototype添加function不太必要。
下面僅是利用javascript了解stack,因為本身比較熟javascript
stack用在c++,建構list等等,python應該也有

https://juejin.im/post/5b2323896fb9a00e8f795e5b


leetcode考題
/**
 * Initialize your data structure here.
 */
var MyStack = function() {
this.item=[]
};

/**
 * Push element x onto stack. 
 * @param {number} x
 * @return {void}
 */
MyStack.prototype.push = function(x) {
  this.item.push(x)
};

/**
 * Removes the element on top of the stack and returns that element. 並
* 不是說第一個元素,栈是一种遵从后进先出(LIFO)原则的有序集合,故此處的棧是最後進入的元素
 * @return {number}
 */
MyStack.prototype.pop = function() {
return this.item.pop()
};

/**
 * Get the top element.
 * @return {number}
 */
MyStack.prototype.top = function() {
return this.item[this.item.length-1]
};

/**
 * Returns whether the stack is empty.
 * @return {boolean}
 */
MyStack.prototype.empty = function() {
return this.item.length==0
};

/**
 * Your MyStack object will be instantiated and called as such:
 * var obj = new MyStack()
 * obj.push(x)
 * var param_2 = obj.pop()
 * var param_3 = obj.top()
 * var param_4 = obj.empty()
 */

面試


  1. flex, grid 
  2. 為什麼for迴圈的效能不好?優化他?
  3. for裡面放setTimeout經典題
  4. promise, resolve, reject
  5. capturing, bubbling,
  6. aurhorization, localStorage, cookie

1.
FOUC
http2
html5


2.
會傳到後端
cookie,

不會傳到後端
sessionStorage (不可以跨tab)
localStorage (可以跨tab)

3.
script 會等到資源載完才往下執行

加上async 會載資源的同時解讀下面的code,等資源載完就執行code

defer則是比async再加上要等的頁面document.ready(dom解析完)再執行

4.
為了效能的考量,把css放在head之間,js放在/body之前,是要讓畫面能最先被看見,互動的部分最晚再執行

2020年3月27日 星期五

node.js 實戰開發


  1. 自簽署(self-signed)的 SSL 憑證,為伺服器自行利用工具產生,而未經過第三方機構的核可。它一樣具有加密連線的效果,但訪客將需要忽略瀏覽器警示,才能夠開啟網站。在實際的應用案例上,向公眾服務的網站不應使用自簽署憑證,不過組織內部所使用的網站,則可能會見到使用自簽署憑證的情形。
  2. ad-hoc查詢: 即時查詢的意思
    https://www.itsfun.com.tw/%E5%8D%B3%E5%B8%AD%E6%9F%A5%E8%A9%A2/wiki-8619411-8195801
  3. mapreduce:
    # 這邊需要注意一下,當提到map和reduce是小寫的時候,指的會是functional programing(函數式程式設計)提供的方法。MapReduce則是開發模式。

    MapReduce其實是一種開發模式(Program Model),基本上可以把整個邏輯分成為Map階段和Reduce階段。
  • Map階段基本上會做filtering和sorting並且傳出一個key value pair做結果(以wordcount為例,每一個字會作為最後的key,而value則是1代表有一筆)
  • Reduce階段基本上會做整合(以wordcount為例,從Map傳過來的key如果一樣,表示同一個字,因此把一樣的key做加總最後的出總筆數)

    [image%5B7%5D]
4. functional programing:
要求專案的撰寫 function 追求 pure 不能有其他的副作用,變數必須是 Immutable ,用 map reduce 取代傳統的 for loop 和 while

用第三方 library 來補足原生的 method 的不足
雖然 ECMAScript 5 以後,Array.prototype 本身就支援 map reduce filter slice 等這些功能,但仍有其不足之處:

  • 如果調用處不是 Array,runtime 就會噴出錯誤。常常發生在 api 在空值或是錯誤的處理上會給出無法預期的欄位型別,這個部分常常必須前端額外處理。
  • Object 本身沒有支援類似的功能

因此我個人還蠻推薦用第三方 library 如 lodash 來取代原生的 method,好處是:

  • null undefined 的 input 處理
  • 有其他比 reduce 更強的表達力針對特定用途的 method,例如 flatten
  • 對 Object 也有提供 pickBy omitBy mapValues 等相對應的 method
  • 實作了許多底層上性能的最佳化
_.map(undefined, item => item + 1)               // []_.flatten([1, [2, 3], [4]])                      // [1, 2, 3, 4]_.pickBy({ a: 1, b: 2 }, value => value > 1 )    // { b: 2 }_.omitBy({ a: 1, b: 2 }, value => value === 2)   // { a: 1 }_.mapValues({ a: 1, b: 2 }, value => value * 2)  // { a: 2, b: 4 }
https://medium.com/@as790726/%E8%AB%87%E8%AB%87-javascript-%E9%82%A3%E4%BA%9B%E5%B8%B8%E8%A6%8B%E7%9A%84-functional-programming-%E7%9A%84%E6%A6%82%E5%BF%B5%E5%B8%B6%E4%BE%86%E4%BA%86%E6%80%8E%E6%A8%A3%E7%9A%84%E5%A5%BD%E8%99%95-82892ad20c39

5. Elasticsearch,  Neo4j,  PostgreSQL
  • Elasticsearch 基於Lucene庫的搜尋引擎。它提供了一個分布式、支持多租戶的全文搜索引擎 (NoSQL)
  • Neo4j 圖形數據庫管理系統,被描述為具有本機圖形存儲和處理的ACID兼容事務數據庫(NoSQL)
  • PostgreSQL是開源的物件-關聯式資料庫資料庫管理系統,在類似BSD授權與MIT授權的PostgreSQL授權下發行
6. CPU密集型和I/O密集型
某些進程花費了絕大多數時間在計算上,而其他則在等待I/O上花費了大多是時間,前者稱為計算密集型(CPU密集型)computer-bound或CPU-bound,後者稱為I/O密集型,I/O-bound。
CPU密集型的項目適合調用多進程,例如C
I/O密集則適合調用多線程,例如爬蟲
https://kknews.cc/zh-tw/digital/k6qm9r8.html
  • 中央處理器 (英語:Central Processing Unit,縮寫:CPU)是電腦的主要裝置之一,功能主要是解釋電腦指令以及處理電腦軟體中的資料
  • I/O(英語:Input/Output),即輸入/輸出,通常指資料在記憶體(內部和外部)或其他周邊裝置之間的輸入和輸出,是資訊處理系統(例如計算機)與外部世界(可能是人類或另一資訊處理系統)之間的通信
7. 進程 vs 線程
教科书上最经典的一句话是“进程是资源分配的最小单位,线程是CPU调度的最小单位

进程可以简单的理解为一个可以独立运行的程序单位,它是线程的集合,进程就是有一个或多个线程构成的。而线程是进程中的实际运行单位,是操作系统进行运算调度的最小单位。可理解为线程是进程中的一个最小运行单元。
  • 多线程:

    为什么要使用多线程?
    在一个程序中,有很多的操作是非常耗时的,如数据库读写操作,IO操作等,如果使用单线程,那么程序就必须等待这些操作执行完成之后才能执行其他操作。使用多线程,可以在将耗时任务放在后台继续执行的同时,同时执行其他操作。

    多线程的缺点:
    使用太多线程,是很耗系统资源,因为线程需要开辟内存。更多线程需要更多内存。
    影响系统性能,因为操作系统需要在线程之间来回切换。

    # 多线程是异步的,但这不代表多线程真的是几个线程是在同时进行,实际上是系统不断地在各个线程之间来回的切换(因为系统切换的速度非常的快,所以给我们在同时运行的错觉)。
  • 多进程:进程是程序在计算机上的一次执行活动。当你运行一个程序,你就启动了一个进程。凡是用于完成操作系统的各种功能的进程就是系统进程,而所有由你启动的进程都是用户进程。
    同理,多进程就是指计算机同时执行多个进程,一般是同时运行多个软件

多线程与多进程,选择谁?

下面是本人从知乎-pansz上转载的一个答案,非常通俗地回答了这个问题。
  • 单进程单线程:一个人在一个桌子上吃菜。
  • 单进程多线程:多个人在同一个桌子上一起吃菜。
  • 多进程单线程:多个人每个人在自己的桌子上吃菜。
多线程的问题是多个人同时吃一道菜的时候容易发生争抢,例如两个人同时夹一个菜,一个人刚伸出筷子,结果伸到的时候已经被夹走菜了。。。此时就必须等一个人夹一口之后,在还给另外一个人夹菜,也就是说资源共享就会发生冲突争抢。
1。对于 Windows 系统来说,【开桌子】的开销很大,因此 Windows 鼓励大家在一个桌子上吃菜。因此 Windows 多线程学习重点是要大量面对资源争抢与同步方面的问题。
2。对于 Linux 系统来说,【开桌子】的开销很小,因此 Linux 鼓励大家尽量每个人都开自己的桌子吃菜。这带来新的问题是:坐在两张不同的桌子上,说话不方便。因此,Linux 下的学习重点大家要学习进程间通讯的方法。
开桌子的意思是指创建进程。开销这里主要指的是时间开销。
可以做个实验:创建一个进程,在进程中往内存写若干数据,然后读出该数据,然后退出。此过程重复 1000 次,相当于创建/销毁进程 1000 次。在我机器上的测试结果是:
UbuntuLinux:耗时 0.8 秒 Windows7:耗时 79.8 秒 两者开销大约相差一百倍。
这意味着,在 Windows 中,进程创建的开销不容忽视。换句话说就是,Windows 编程中不建议你创建进程,如果你的程序架构需要大量创建进程,那么最好是切换到 Linux 系统。
这"可能"也是放眼全世界范围,Linux 服务器远远多于 Windows 服务器的原因。

在 CPU 为多核的情况下,多线程在性能上不如多进程。
因而,当前面向多核的服务器端编程中,需要习惯多进程而非多线程


  • 并行:多个CPU实例或多台机器同时执行一段处理逻辑,是真正的同时。
  • 并发:通过CPU调度算法,让用户看上去同时执行,实际上CPU操作层面不是真正的同时。

多线程在高并发问题中的作用就是充分利用计算机资源,使计算机的资源在每一时刻都能达到最大的利用率,不至于浪费计算机资源使其闲置。



https://www.cnblogs.com/linuxAndMcu/p/11064916.html
https://blog.csdn.net/linraise/article/details/12979473

8. 關於 javascript 的 多(或應該是單)線程 多進程

9. crypto-js 加密解密
// 安裝套件npm i --save crypto-js @type/crypto-js// 使用方法var CryptoJS = require("crypto-js");​// Encryptvar ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123').toString();​// Decryptvar bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');var originalText = bytes.toString(CryptoJS.enc.Utf8);​console.log(originalText); // 'my message'

9. 自治系統
或稱自治域(英文:Autonomous system, AS)是指在網際網路中,一個(有時是多個)實體管轄下的所有IP網路和路由器的全體,它們對網際網路執行共同的路由策略。





科技業常見的職務縮寫 SA SD RD PG PM DBA MIS QA Sales

https://mropengate.blogspot.com/2015/05/sa-sd-rd-pg-pm-dba-mis-qa-sales.html

2020年3月18日 星期三

前端php? 後端java? "前端 數據緩存" 和"前端 部署" 目前推薦的技術是?

是說JAVA負責大部分的後端工作(資料庫操作、核心業務邏輯、分布式)做成RESTful的API給PHP或js來訪問;

PHP主要負責更高層面的業務數據緩存、處理和操作,還有用戶終端的前端代碼在伺服器上的部署工作。

然後再是用戶瀏覽器的前端, html css js啥的。


結論:應該先看"前端 數據緩存" 和"前端 部署" 目前推薦的技術是?
https://juejin.im/post/5cd965356fb9a032435dc735

https://kknews.cc/zh-tw/tech/bx63ve6.html