前端性能优化.pptx

web前端性能优化 How to make my application load faster Durling_Xie 2016-4-21 网速决定想看什么和能看什么 2G 看「苍老师.txt」 3G 看「苍老师.jpg」 4G 看「苍老师.avi」 归纳2G、3G 和 4G 区别形象比喻 2G 看小说； 3G 看LALOCAL app、刷微博、浏览新闻……； 4G 看视频…… 3G网平均网速 60-400KB，300kb/s，所以首屏资源不应超过1024kb Mobile端因为手机配置不同，除了加载外 渲染速度也是优化重点 PC端优化手段在Mobile端同样适用 在Mobile端 3秒内渲染完成首屏 指标 关键词： 合并 缓存 长Cache 外联式引用 Gzip loading 定制加载 Cookie 重定向 异步 Media Query link rel=stylesheet href=style.css type=text/css / 外联式 内联式 嵌入式 style type=text/css /style div style=font-family:Arial,Helvetica,sans-serif;芒果/div 网页启用Gzip压缩 提高浏览速度 /reed/550.html Nginx开启Gzip压缩大幅提高页面加载速度 /mitang/p/4477220.html 网页分段加载与首屏渲染优化 /w3c/2014/bigpipe-first-screen-optimized.html delayLoading.min.js 详析6种常见的LOADING设计模式 /6-kinds-of-loadingdesign 1.全屏加载 2.优先加载 3.整页加载 4.自动加载 5.智能加载 6.离线加载 Web前端性能优化教程09：图像和Cookie优化 /web/2015/0417/399755.shtml Web前端性能优化教程06：减少DNS查找、避免重定向 /web/2015/0417/399728.shtml 同步加载 异步加载 延迟加载（lazy loading） 页面优化——js异步加载 /chenmoquan/article/detailslink rel=stylesheet type=text/css href=styleA.css media=screen and (min-width: 400px) CSS3 Media Queries /content/css3-media-queries 关键词： 规范 空SRC DateURL style属性 CSS表达式 兼容浏览器 display属性 float web字体 font-size 0px 0rem 正则表达式 将图片转换成Base64编码的字符串 Data URL Maker /#dataurlmaker 强大的CSS表达式 expression /andyyukun/article/details/1676963 css display:none使用注意事项小结 /html83/3fb9a4dd268da9b3d719aa49b1c10f3b.htm 你所不了解的float（滥用float的怪异现象） float的一些特性：包裹性、破坏性。 包裹的特性其实主要有三个表现：收缩、坚挺、隔绝。 /liyunhua/p/4670908.html?utm_source=tuicoolutm_medium=referral 关键词： 代码替图片 Srcset webP png8 图片大小及宽度 响应式图片srcset属性 img src=low-res.jpg srcset=high-res.jpg 2x 七牛云图片处理实践｜带你认识WebP /o/2016-04-15/doc-ifxrizpp1215679.shtml http://fontawesome.io/ i class=fa fa-picture-o aria-hidden=true/i 关键词： 重绘和回流 Dom 缓存length ID选择器 事件代理 touch click 注意：回流必将引起重绘，而重绘不一定会引起回流。 呈现、回流、重绘 高性能WEB开发之页面呈现、重绘、回流(1) /art/201104/257345.htm 不要1个1个改变元素的样式属性 localStorage 离线缓存 可以把 header、footer 等不太常变动的元素的 innerHTML 储存在 LS 里，在页面上只要保留一个容器元素即可 /question关于for循环中是否需要缓存lengt