Ajax前端性能优化浏览器+服务器篇

同样、性能优化的浏览器篇

1、把CSS放在head中加载

  • 会叫页面重新早的先河渲染,制止闪屏
  • 极致好能包含关键渲染路径的样式:首屏
  • 会面吃页面呈现加载速度又快,因为如此做可以如果浏览器渐渐加载已经下载的网页内容,这对情节比较多的网页尤其要,用户毫无直接等在一个白屏上,而是可以预先看已经下载的始末。
  • 假若体制表放在底层,浏览器会拒绝渲染已经下载的网页,因为多数浏览器在实现时都尽力制止重绘,样式表中的情节是绘制网页的重点新闻,没有下载下来在此之前只能对不起观众了。

2、把JS放在body未尾

  • 因为JS阻塞HTML解析和CSS渲染

3、不使用CSS表达式

  • 好像强大,实际性能开销很要命,可能致页面卡顿

 4、用外链形式引用CSS和JS

  • 有效削减HTML的体积
  • 唯独成立施用浏览器缓存

5、压缩JS和CSS

  • 生儿育女条件去不必要之阐明、空白
  • JS中变量名减弱,混淆压缩

6、不还加载JS

  • 每当IE中尚是碰头三个请求,不可能表明缓存优势
  • 代表又增长的JS执行时间

7、让Ajax请求而缓存

  • GZIP、内容缩小都可适用

8、用GET模式倡导Ajax请求

  • GET格局可缓存
  • 万一是获取音讯,GET更语义化
  • 如是交给数据,POST更语义化

9、组件延迟加载

  • 保重点页面资源先加载:因为并发数限制
  • 延期加载的突动手段:Lazyload(对于图片于多的页面)

10、减少DOM节点数

  • 天猫:更多节点数以为浏览器布局、渲染时总结量更充足
  • 会加大页面加载与本子执行之功效

11、制止用iframe

  • 会师死父文档的onload
  • 便是一无所有也正如耗时

12、减少COOKIE体积

  • 盖总裁KIE每一趟要都碰面所有牵动齐

13、使用无CEOKIE域名加载静态资源

  • 压缩静态资源加载时之网络传输量
  • 静态资源加载平日是休待主管KIE的
  • 阿里:精简主任KIE后,每年节约的流量TB记

14、减少JS中的DOM访问 

  • 对此查找到的因素,缓存在变量中
  • 节点扩充是合理合法运用DocumentFragment
  • 不要就此JS去数修改样式

15、使用更智能的波监听机制

  • 据悉事件冒泡的托机制,有效缩小绑定的多少
  • $(“selector”).delegate(“li”,”click”,function(){});

16、使用大的图形优化手段

  • 对照代码,图片体积非凡要命
  • 广的压缩工具:PNGCrush、JPEGTRAN、PNGQUANT
  • 渐进式编码:JPG 

17、不要在HTML中缩放图片

  • 唯有添渲染开,提供方便尺寸即可(用到多那一个的就用几近深之,比如动用100*100的绝不设置为500*500)

18、不要将图纸src置空

  • IE、Chrome、Fire福克斯(Fox)(Fox)会发起额外的主文档请求
  • 空的图形src依旧会使浏览器发送请求到服务器,这样了是浪费时间,而且浪费服务器的资源。尤其是您的网站媒体于过两人走访的时候,这种空请求造成的侵蚀不容忽略。

19、任何资源尽量以25K以内

  • iphone不可能缓存25K之上之资源

仲、性能优化的服务器篇

1、收缩网络要

  • 合并请求:包括JS、CSS(将大半只CSS合并在协同)
  • 使用可口可乐图:CSS 百事可乐
  • 利用地图:HTML Map
  • 内联小图:Base64Encode

2、使用内容分发网络CDN

  • 地理上离用户更近
  • 标准的号供劳动

3、适当的以缓存

  • 否静态资源添加Expires响应头
  • 为静态资源添加Cache-Control资源
  • 配置Apache、Nginx、Express

4、启用GZIP压缩

  • 粗大回落网络传输体积,压缩率高臻:60%~90%
  • 强文件类型:HTML、JS、CSS、Image

5、减少DNS查找

  • 单个站点不要以最多域名
  • 单次DNS查找约消耗20~120ms

6、制止重定向3XX(301、302)

  • 重定向对浏览器意味着重头再来
  • 历次重定向至少多消费50ms

7、配置中之ETAG

  • 及浏览器表明过期规则

  Ajax 1

8、让Ajax请求而缓存

  • GZIP、内容减弱都可适用

 9、尽快输出第一只字节

  • 急速输出页面头部,浏览器会抢干活
  • 互下载外链的CSS
  • 兴一时底BigPipe也是因这么些

10、使用无主任KIE域名加载静态资源

  • 减静态资源加载时的纱传输量
  • 静态资源加载日常是不需要首席执行官KIE的
  • 阿里:精简老董KIE后,每年节约的费百万层

相关文章