浅谈前端性能优化
张兵
 


 
 

页面怎么来的？

—— 什么是前端，什么是后端

 

先从哪里下手？

  • 前端优化 :  80% - 90%的时间用来下载页面资源以及浏览器渲染
  • 后端优化 :  10% - 20%的时间生成html内容
    What to talk  about ？


     

    查询DNS

    • 关注点 ：
      • 域名多少对于前端性能的影响
    • 不关注点 ：
      • 查询逻辑
      • 各级DNS缓存逻辑
     

    高并发   VS   DNS解析

     

    相同域名下，主流浏览器的并发下载量

     

    CDN  &  多域名

    • 从最近的服务器节点获取资源
    • 2 - 4个域名，保证并发，也避免dns查询耗时
    • domain hash技术（同一个资源的hash值应相同）
     

    请求Html页面

    • Header头
    • 页面大小
     

    header头大小

    • 不返回无用的http header
    • 尽量压缩cookie的大小
    • 静态资源不传输cookie（域名区分）
    静态资源，不跟应用同域名，最好根域都不同。
     

    页面大小

    1. 去掉多余空格、换行
    2. nginx输出开启gzip
    3. 减少dom节点数量
    4. 异步 & 按需加载

    空格、缩进换行

    1. 减少html大小
    2. 减少空白节点，加快渲染速度
    3. 页面布局可控

    空格处理 


    <div id= "enter">
<img src="images/common.png" alt="" />
<a href=""> 换                          行</a ></div>
<div id= "noenter"><img src="images/common.png" alt="" /><a href=""> 换&nbsp;行</a ></div>

    换行的处理

    <div id= "enter">
<img src="images/common.png" alt="" />
<a href="">换行</a ></div>
<div id= "noenter"><img src="images/common.png" alt="" /><a href=""> 没有换行，有空格</a ></div>


    <div id= "enter">
<img src="images/common.png" alt="" />
<a href="">换行</a ></div>
<div id= "noenter"><img src="images/common.png" alt="" /><a href="">没有换行</a ></div>

    tips:

    1. 不同浏览器对于空格、换行、tab处理不同
    2. 输出html前过滤，布局靠css控制
      3.


     

    请求资源文件

    • css、js、img合并、gzip压缩
    • 缓存控制
    • 浏览器的线程模型
    • 页面架构

    压缩、合并

    • cssmin、uglify剔除空格、换行、tab
    • uglify还可以混淆代码，减少变量长度，但是线上调试麻烦
    • nginx的gzip压缩，gzip的服务器缓存
    • 图片不建议压缩，有时候反而变大，而且消耗性能严重
    • 图片一般用css 切图的方式，减少http请求，或者base64
    • 尽量不用图片
    • 在保证效果的前提下，尽量压缩图片大小（imgmin）
    • 异步按需加载js、css、image（requirejs、seajs模块化工具）

    css 切图

     


    原始方式：<img src="icon-new.gif" />
    切图调用方式：
     .icon-new{
    background-position: -38px 0px;
    background: url(/img/icon.gif);
}
.icon-del{
    background-position: 30px 0px;
    background: url(/img/icon.gif);
}

<i class="icon-del"></i>
<i class="icon-new"></i>

    缓存控制

    1. Cache-Control（http1.1）
    2. Expires（http1.0）
    3. Last-Modified、If-Modified-Since（集群服务器时间）
    4. Etag 、 if-match-since
    5. 资源标识（版本号、md5值）

    Last-Modified、If-Modified-Since浏览器会发起请求，服务器返回304。
    Expires，Cache-Control直接不发起请求，减少负载，两者F5、ctrl+F2无效。
    Cache-Control会重写掉Expires

    浏览器的线程模型

    • GUI渲染线程
    • javascript解析线程
    两者互斥
    css放头部减少 “白屏”、“无脚本闪烁”、
    js放尾部减少 “白屏”、“阻塞其它资源下载”

    页面架构

    1. 结构、表现、行为分离（可维护性）
    2. 减少内联css、js
    3. 避免使用html标签属性（width、height，尽量用css控制）
    4. 先加载css，最后加载js （减少空白等待，提高体验，IE就哭了）

    <html>
<head>
    <title>常用html架构</title>
    <link rel="stylesheet" type="text/css" href="app.css" />
</head>
<body>
    <div id="wrapper">
      <header></header>
      <div id="content"></div>
      <footer></footer> 
    </div>
    <script type="text/javascript" src="lib.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

    CSS、JS执行性能

    1. css书写的方式，影响大小，以及解析性能
    2. javascript的性能优化
    3. 单页面应用的template，提前编译


    Summary

    1. 减少HTTP请求
    2. 压缩资源大小
    3. 异步&按需加载
    4. 代码执行性能

    推荐阅读

    1. 雅虎web性能优化的34条军规
    2. 《高性能网站建设指南》
    3. 《高性能网站建设进阶指南》

    Q & A

    浅谈前端性能优化

    By bing zhang

    Made with Slides.com

    浅谈前端性能优化

    html、js、css压缩、合并；浏览器加载模型；http缓存实现；

    • 1,725

    More from bing zhang