字體渲染

1 commentsfhz?2014-07-29

說到web性能，前端工程師很自然地反應是yahoo的30+條優化規則。這些規則可以將網頁加載從原來的幾秒甚至十幾秒較少到3s甚至1s以內。當一個完整界面展現在用戶眼前時，內容就通過不同的字體、圖片以及多媒體傳達給用戶。使用戶在1s內看到網頁和使用戶留在網頁上幾分鐘甚至幾十分鐘同樣重要。字體作為內容承載信息的重要部分，若使用不“適當”的字體或者字體由于渲染等緣故對用戶不友好，則會（有可能）造成不必要的用戶流失。本文介紹瀏覽器的字體渲染，希望還未接觸字體渲染的同事能通過本文對字體渲染有所了解。

首先看下不同瀏覽器下的截圖，來自攜程-攻略社區。

Read more ?

玩轉git之webhook應用初探

1 commentsl, jian?2014-07-23

在百度搜索了一下 git webhook 這個關鍵字，沒有看到有相關的詳細的應用教程。

所以決定把 自己這段時間以來的摸索 寫成文字 分享給大家 。

最近碰到這樣的一個需求，就是?本地提交代碼 到 git倉庫以后 需要 網站 遠程自動同步代碼?。

git 的 webhook ?正好能 滿足 這個需求。

?

具體步驟：

服務器端：

1. 服務器端 生成 apache 的 deploy key

sudo -u apache ssh-keygen -t rsa -C “jianl@example.com”

2.給apache 操作目錄的權限

第一種方法 直接給 目錄 777 權限 簡單粗暴

第二種方法 建立用戶組 ?把 ftp用戶 和 apache 添加到該組別里面 ， 給予該組權限

groupadd gitwriters adduser [yourusername] gitwriters adduser apache gitwriters chgrp -R gitwriters /path/to/your/repo chmod -R g+rw /path/to/your/repo ?3.在需要自動同步的倉庫打開hook cd /項目/.git/ cp hooks/post-receive.sample hooks/post-receive vim hooks/post-receive #加入下面代碼 GIT_WORK_TREE=/home/www git checkout -f ?4.加入接收 webhook的 腳本， 在項目 創建 update.php $www_folder = "/2T/ftp/utools/uilib" ;//git倉庫地址 $git_repo = "git@git.dev/.......abc.git" ;//執行指令 echo shell_exec(" cd $www_folder && git pull $git_repo 2>&1 "); gitlab 端的設置： 找到項目的設置 ， deploy key項 添加 直接 apache用戶 生成的 ssh key webhook 項 添加 網站地址/update.php （正常能夠訪問的鏈接） ， 勾選 Push events 保存

完全以上配置 。服務器端自動同步代碼的功能就能夠實現了。

?

網頁字體設置你了解嗎？

6 comments破男孩?2014-07-15

以前做項目的時候就依葫蘆畫瓢的設置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等類似的字體，然而當更多的設備和系統出現后，以前這樣的設置已不能滿足網頁在各設備上的顯示需求。

就拿最簡單的宋體(simsun)來說吧，在Windows系統下顯示是一個比較容易閱讀的字體，然而在Mac上簡直無法直視，如下圖給出一個優化前后頁面的對比效果：

因此，出于種種原因，促使我不得不去對字體做一個相應的了解。

對于網站字體設置，本文給出以下意見：

移動端項目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

?

pc端(含Mac)項目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

?

移動和pc端項目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

Read more ?

圖片優化的那些工具

Get first曉輝?2014-06-23

圖片作為頁面的一個主要因素，它的大小直接影響了頁面的加載速度，這一點在移動端尤顯突出。

怎么讓圖片的大小更小？除了選擇合適的格式（jpeg、gif、png），我們還可以利用網上的應用（如smushit、tinypng、imagemin、imageOptim）對圖片進行壓縮。在這里我想給大家介紹一下上述應用主要使用到了哪些命令行工具以及它們的使用方法。?Read more ?

http://ued.ctrip.com/blog/

轉載于:https://www.cnblogs.com/daishuguang/p/3925984.html

總結

以上是生活随笔為你收集整理的携程前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。