1. 程式人生 > >頁面優化技術

頁面優化技術

angular 並發 cat css 源代碼 hive 狀況 重復 後端

頁面緩存+URL緩存+對象緩存

並發的瓶頸在數據庫,如何減少對數據庫的訪問呢?

最有效的方式就是加緩存,通過加不同粒度的緩存,最大粒度的頁面緩存,最小粒度的對象緩存

/**
 * 頁面緩存:所有的客戶端請求過來返回的都是同一個頁面,例如用戶訪問淘寶,返回的首頁都是同一個頁面
 * produces="text/html" 直接返回html的源代碼
 * @param request
* @param response
* @param model
* @return
*/
@RequestMapping(value="/userList", produces="text/html")
@ResponseBody
public String userList(HttpServletRequest request, HttpServletResponse response,
                       Model model) {

    //取緩存
String html = redisService.get(USERLISTKEY, String.class); if(!StringUtils.isEmpty(html)) { return html; } //業務代碼 List<TestUser> testUserList = testService.getTestUserList(); model.addAttribute("testUserList", testUserList); /*spring4*/ //SpringWebContext ctx = new SpringWebContext(request,response,request.getServletContext(),
// request.getLocale(), model.asMap(), applicationContext ); /*spring5*/ WebContext ctx = new WebContext(request,response,request.getServletContext(), request.getLocale(), model.asMap()); //手動渲染 html = thymeleafViewResolver.getTemplateEngine().process("testUL", ctx); if(!StringUtils.isEmpty(html)) { redisService.set(USERLISTKEY
, 60, html); } return html; }
/**
 * URL級別的緩存,例如用戶點擊商品詳情,不同的商品返回不一樣的詳情,那就需要每一個url都做緩存
 * @param request
* @param response
* @param model
* @param id
* @return
*/
@RequestMapping(value="/getUserById/{id}", produces="text/html")
@ResponseBody
public String getUserById(HttpServletRequest request, HttpServletResponse response,
                          Model model, @PathVariable Integer id) {

    //取緩存
String html = redisService.get(USERLISTKEY+id, String.class);
    if(!StringUtils.isEmpty(html)) {
        return html;
    }

    //業務代碼
TestUser testUser = testService.getTestUserById(id-1);
    model.addAttribute("testUser", testUser);

    WebContext ctx = new WebContext(request,response,request.getServletContext(),
            request.getLocale(), model.asMap());
    //手動渲染
html = thymeleafViewResolver.getTemplateEngine().process("testUser", ctx);
    if(!StringUtils.isEmpty(html)) {
        redisService.set(USERLISTKEY+id, 60, html);
    }
    return html;
}


實際頁面都已經緩存到了redis,但是這裏的緩存時間不能過長,否則頁面修改延遲比較大

技術分享圖片

對象緩存就不帖代碼了,這個是最常用的緩存

頁面靜態化,前後端分離

常用技術:AngularJS、vue.js

優點:利用瀏覽器的緩存

傳統的jsp,thymeleaf實際上都是動態的,即時做了頁面緩存,客戶端還是需要從服務端下載頁面數據,想象一下,你的網站,一秒鐘被訪問了100w次,每次下載的數據是1k,流量是相當龐大的.

如果做了靜態化,靜態化就是所有頁面都是純的html,通過ajax請求服務器,拉到數據,渲染頁面。這樣有什麽好處?如果做了靜態化,瀏覽器是可以把靜態頁面緩存到客戶端的,這樣頁面數據就不需要重復下載了,只需要下載動態的數據就可以了。

if-modified-since

If-Modified-Since是標準的HTTP請求頭標簽,在發送HTTP請求時,把瀏覽器端緩存頁面的最後修改時間一起發到服務器去,服務器會把這個時間與服務器上實際文件的最後修改時間進行比較。

如果時間一致,那麽返回HTTP狀態碼304(不返回文件內容),客戶端接到之後,就直接把本地緩存文件顯示到瀏覽器中。

如果時間不一致,就返回HTTP狀態碼200和新的文件內容,客戶端接到之後,會丟棄舊文件,把新文件緩存起來,並顯示到瀏覽器中。

參考:

https://www.cnblogs.com/zh2000g/archive/2010/03/22/1692002.html

http://aofengblog.blog.163.com/blog/static/63170212015314111148765/

靜態資源的優化

圖片、css、js

1. JS/CSS 壓縮,減少流量(webpack)

2.多個JS/CSS組合,減少連接數(TCP/IP三次握手肯定會耗時,淘寶的Tengine是在nginx的基礎上做了一些改進,支持組合多個CSS/JS文件的訪問請求變成一個請求)

CDN的優化

CDN的全稱是Content Delivery Network,即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡,CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容,解決 Internet網絡擁擠的狀況,提高用戶訪問網站的響應速度。

頁面優化技術