美文网首页
前端优化

前端优化

作者: BugMyGod | 来源:发表于2019-04-23 19:36 被阅读0次

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:其中用户肉眼可见的操作都会引起重绘

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化-开篇

    前端性能优化问题是每个前端需要掌握的技术。这篇文章从渲染优化、代码优化、资源优化、构建优化、传输加载优化、更多流行...

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • JavaScript

    前端 优化策略-自查表 前端性能优化常用总结鸟瞰前端 , 再论性能优化 跨域,你需要知道的全在这里内存分析与内存泄...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

网友评论

      本文标题:前端优化

      本文链接:https://www.haomeiwen.com/subject/xypbgqtx.html