前端优化

1,方法级别
雅虎军规
FIS3
2,架构级别
bigpipe(Facebook优化)


1,技术优化出发点(解耦)
(1)复用(维护性、开发成本)
前端复用:
1)文件复用:js、css、html(错误页面)、媒体文件
ps: css--button在标准浏览器下有黄边,在IE下没有,reset.css
2)后端复用
通用接口;
UI模块复用;
通用API复用;
(2)加载方式(提升用户体验)(网络层和文件加载顺序方面)
同步加载;
分级加载;
按需加载;

2,优化术语定义
(1)技术类
首屏时间;
白屏时间;
可操时间;
连通率(多视频类);
(2)产品类
pv一次访问一次pv;
uv多次访问同一个人一次uv;
day日活跃用户数量;
MAU月活跃用户人数;
跳出率(3s内);


1,回流reflow、重绘repaint
reflow:位置大小发生改变,dom元素的添加、修改、删除;
repaint:颜色改变,字体、边框;

回流reflow一定触发重绘repaint;
重绘不一定触发回流;

2,如何避免
(1)display
(2)元素从dom中删除,修改后再添加到原位置
(3)创建多个dom节点,可使用documentFragment,创建后一次性加入document

3,会触发重绘
(1)改变字体
(2)增加或移除样式表
(3)内容变化(input输入文字)
(4)激活css伪类,eg:hover
(5)脚本操作dom
(6)计算可见的宽高
(7)设置style属性的值
ps:其中用户肉眼可见的操作都会引起重绘

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、页面/文件级优化 1、减少HTTP请求数 解决方法: 1)设置缓存 2)css、js、img等静态资源合并压缩...
    Adoins阅读 9,946评论 0 4
  • 篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。你想超越我...
    __越过山丘__阅读 2,773评论 0 0
  • 前端性能优化这一块一直在项目中多多少少的在使用,但是知识点都太碎了,加上面试的出现率炒鸡高,所以来一波整理。前端优...
    七六丶阅读 3,315评论 0 1
  • 原文链接 移动互联网的发展迅猛,无论在移动游戏、手机购物、各种O2O的方式,都有各种变革;手设备硬件和系统不断升级...
    revert阅读 2,224评论 0 0
  • 本来打算把花画完了再来交作业,奈何一个人照顾宝宝,画画又是项既耗时间,又考验耐性的活儿,借着宝宝睡觉的功夫,先把最...
    大晶2018阅读 3,034评论 2 0