#前端性能优化概览 ##网站优化是多方面的 **后端** 1. 架构 2. 数据库优化 3. PHP优化 4. 数据缓存 5. 网页缓存 静态化 与URL路由 **网络** **前端** ob_flush(): flush(); ##网页缓存 网页缓存和静态化 提升服务器负载能力 缓存策略: 1、时间过期 2、更新时删除缓存读取时生成 3、更新时重新生成缓存 访问量不同的页面如何缓存?比如名人的微博与普通人的微博 if ($total < 100 || $total % 10 == 0) URL路由可能是伪静态化 1、SEO友好 2、便于理解、收藏 3、安全 示例:url路由与网页缓存 **网页优化是多方面的** 1、后端 2、网络 CDN、域名 3、前端 ##前端优化 1、减少数据传输 不减少页面元素如果减少数据量? 2、优化资源加载 同样的内容应该如何优化? 3、代码级优化 -- HTML、CSS、JavaScript 性能相差多少? 4、需要后端如何配合? ** 减少资源传输 ** 如何减少? 少传输、传输小的、不传输 1、减少请求数 除了合并还有其他方式能减少请求数吗? 2、减少传输数据体积 3、使用缓存 减少资源传输 1、减少请求数 a)合并请求(CSS、JS、image-sprite) jsversion.php 2、减少传输数据体积 除了压缩还能从哪些方面入手? 3、使用缓存 减少资源传输 1、减少请求数 a)合并请求(CSS、JS、image-sprite) b)css3 (shadow border-radius gradient rotate) c)部分image采用data-uri(示例img_datauri.html) d)按需加载 图片按需加载(示例img_lazyload) js/css按需加载 2、减少传输数据体积 除了压缩还能从哪些方面入手? a)压缩(gzip、GCCompiler、YUICompressor)(示例jsmin) b)简化页面结构(首屏内容输出) c)减少cookie(独立静态资源域名) d)合适的图片压缩比和类型(gif、png、jpg) e)响应式设计(media query、ua) 3、使用缓存 a)静态资源外链 b)http cache header(Cache-Control、Expires、Vary、Last- Modified、Etag)需要服务器配合 c)Web Storage(Session Storage、Local Storage) d)Hijax(History+Ajax) e)CDN 优化资源加载 如何优化? 用户先看到一部分、加大并发下载 1、尽早输出后端缓冲区 2、CSS、JS加载顺序 3、异步加载策略 4、并行加载策略 1、尽早输出后端缓冲区 优先输出header,浏览器下载资源是多线程的 2、CSS、JS加载顺序 CSS放页面头部,JS放页面底部 2、CSS、JS加载顺序 a)浏览器会等待JS执行完毕,再执行接下来的渲染 b)CSS是并行加载的 c)CSS放前面防止页面渲染抖动和闪烁 d)CSS放前面减少浏览器重绘和重排,提高效率 示例:long_js.html 3、异步加载策略 a)JS异步加载方式(defer/async/insert into head) b)异步加载不会阻塞浏览器渲染 c)按需加载,延迟加载或者交互再加载 4、并行加载策略(示例multi_down.html) 采用不同的静态域名,浏览器对同一域名请求数有限制 代码优化 1、HTML a)减少DOM数量 b)减少层级 c)不做错误嵌套 2、CSS a)优化选择器。从右到左原则。 效率:id、类、标签、子、属性、伪选择器、通配符 CSS从右到左原则 效率不高 body * { } ul li a { } #main-nav > li { } 看着快其实慢 ul#top_nav { } 画蛇添足 改进 .li-a { } .main-li { } #top_nav { } 3、编写高效的JS 作用域、DOM操作、事件代理、时间分片 作用域链 少用全部变量 示例:scope_vs.html 高效JS-访问DOM a)JS与DOM的桥梁,JS访问DOM代价较大 b)最小化DOM访问,局部变量缓存 c)html collections不是js数组,length动态更新,必要时转换成js 数组效率更高 示例:dom_vs.html、html_collection.html 高效JS-DOM树与渲染树 a)什么是DOM树与渲染树?什么是重绘与重排版? b)什么时候需要重排版: 元素尺寸内容位置、可见元素、重口尺寸、初始化 c)访问这些属性需要马上执行完渲染队列: offsetTop、offsetLeft、offsetWidth、offsetHeight clientTop。。。 scrollTop。。。 d)JS修改DOM如何提高效率? a)合并一次修改 b)从文档移除,修改后再插入文档 隐藏 内存构建 示例:dom_add.html 高效JS-事件托管 a)不要写事件句柄在DOM元素上 事件句柄发生在onload或domready,用户不会100%点击 b)采用事件托管,合并管理 事件托管可以利用冒泡用少量句柄实现 事件托管把动作处理和静态页面分离,修改方便 第四章 更高效的代码执行 高效JS-避免长时间JS脚本 a)调用栈限制 b)用户感知(超过100ms) c)分拆执行 示例:work.html 需要服务器端配合处理 1、gzip压缩 web服务器开启 2、缓存 服务器页面输出http头信息 3、并发、按需 服务器端动态配置域名,灵活配置资源 4、页面静态化 提高负载、SEO、便于理解、安全。伪静态化 5、减少请求 服务器端合并文件、调用压缩 版本控制? CSS、JS压缩之版本控制 好的版本处理: a)浏览器不需要刷新 b)容易回滚 c)修改才生成新的版本 d)合并处理同样遵循上面3条 如何做到? CSS、JS压缩之版本控制 简单处理方式: 1、a.html引用<script src=“a.js?v=1.0.1”></script> 2、a.html引用<script src=“a-1.0.1.js”></script> 哪种方式好? 如何上线? 如何回滚? 如何维护? CSS、JS压缩之版本控制 Hash处理方式: 开发时<script src=“a.js”></script> 上线替换<script src=“a-xxxxxx.js”></script> a)手工版本维护 b)基于目录修改时间