8月29号上课内容

第一节课:

补充jquery的extend 方法()

性能优化基本知识点:

  • 1 性能优化量化指标

    性能优化主要是优化首屏时间,页面加载时间以及浏览器处理性能,但是优化的核心都是提高用户体验,减少用户首屏等待时间

  • 2 如何统计

    统计首屏时间等一般来说都是在页面头部和domReady 的时候埋点

  • 3 性能优化的几个方面

    1 网络请求的优化

    2 JS 层面优化

第一部分: 网络相关优化方案

网络层次的优化核心是减少网络请求,尽量使用CDN

  1. 减少HTTP请求次数 (这是最主要的) 合并图片、CSS、JS,改进首次访问用户等待时间。
  2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
  3. 避免空的src和href () 当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。测试
  4. 为文件头指定Expires (通常对于静态文件才会设置强缓存) 使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
  5. 使用gzip压缩内容 (大部分都是开启的)(response 里面有个content-encoding:gzip) 压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。旧文章
  6. 把CSS放到顶部
  7. 把JS放到底部 防止js加载对之后资源造成阻塞。
  8. 避免使用CSS表达式 (主要是针对IE的一些expression)
  9. 将CSS和JS放到外部文件中 目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
  10. 权衡DNS查找次数 (这个是细致活,初期可以先不考虑) 减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。 IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费
  11. 精简CSS和JS
  12. 避免跳转 同域:注意避免反斜杠 “/” 的跳转; 跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)
  13. 删除重复的JS和CSS 重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
  14. 配置ETags () 它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载
  15. 可缓存的AJAX (对于一些不要求实时性的,可以开启缓存,但是对于jsonp和script标签,是不能缓存的,需要用户自己缓存) “异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
  16. 使用GET来完成AJAX请求 (除非一定使用post的) 当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义
  17. 减少Cookie的大小 (静态资源没有必要使用cookie,cookie是来回传输的,不要设置过大)
  18. 使用无cookie的域 比如图片 CSS 等,Yahoo! 的静态文件都在 yimg.com 上,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

误区:对于1和9会有些误区

1) 把所有的图片,css,js都合并成一个大文件,通过外链文件访问好吗?
2) 代码里面写内联的js,css不好吗?
3) 最重要的,静态图片尽可能的做无损压缩,并且做css sprits,但是也不是都在一张图里面就是好的,要和base64编码混合使用
  • 理解好1和9的本质,9的本质是通过外链文件可以利用浏览器的缓存,但是一个大文件加载过慢会直接影响用户的体验,需要自己权衡

  • 2 浏览器进化了这么多年,有哪些新特性可以利用呢?

    1 script 的defer属性,defer 属性规定是否对脚本执行进行延迟,直到页面加载为止 2 async

  • async 属性规定一旦脚本可用,则会异步执行。
  • 注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
  • 注释:有多种执行外部脚本的方法:

    • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
    • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
    • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
    • async 和 defer 两者的区别在于执行时的不同:
  • async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
  • 与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。
  • 3 chrome 的prefetch http://www.jianshu.com/p/7f58ddfc1392

第二部分: JS 相关部分优化

这里主要是涉及到一些js语法层面和应用技能的

  • 1) 不要使用滤镜,主要是针对IE,png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg
  • 2) 尽量不要缩放图片,用多大就做多大的,这个很难做到的
  • 3) js 可以使用动态加载的方式,比如使用jquery的$.getScript等方法
  • 4) 首屏外的图片尽量使用lazyload 等方式
  • 5) js 语法方面性能优化(这种对性能没有特多的优化帮助,有些只是良好的编码方式)

    • 1) 作用域链尽量使用局部的代替全局的,比如 经常会看到var d = document这种方式,作用域链越长,查找越麻烦,做变量相当于做了一个简单地缓存,
    • 2) js 尽量避免使用eval和with,这两个除了性能低劣之外,还有一些作用域变换的问题,容易出bug
    • 3) try catch 的使用,try 里面的代码是不会被优化的,尽量讲代码封装起来
    • 4) 其他比如for(var j = a.length -1; j; j—)开始 等等,字符串拼接使用join的方式
  • 6) DOM操作(这个也是大头)

    • 1) 对于DOM操作,应该尽量避免大规模的重复操作,比如下面的代码就是不好的

      for(var i =0 ; i < 1000; i++) {div.innerHTML += ‘a’;}
      
      这种是不好的,因为执行一次,就会导致DOM渲染一次,可以改写为
      
      var str = ‘’; for(var i = 0;i<1000; i++) {str += ‘a’;} div.innerHTML = str;
      
    • 2) 最小化DOM 重排重绘(http://blog.csdn.net/lihongxun945/article/details/37830667)

    • 3) 使用事件代理

上面列举的是一些常见的性能优化方案,更复杂的就是牵涉到前端架构的设计了,

同学们继续努力

今天是有作业的,大家浏览器配置好之后,我这里有个页面,是之前做的项目工程,大家的作业是把这个实现了

调用接口:

 url: http://map.baidu.com/detail'',
        data: {
            qt: 'kuang_filter',
            v: 1.0,
            trade: 'hotel',
            os: 'iphone',
            filter: '["placeField","subway","businessCircle"]',
            sign: sign,
            filter: '["placeField","subway","businessCircle"]',
            sign: sign,
            city: city
        },

实现功能,一个筛选列表的功能

UE资源: http://pan.baidu.com/s/1sjl5kWt