8000 前端性能优化大纲 · Issue #2 · iNuanfeng/blog · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

前端性能优化大纲 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
iNuanfeng opened this issue Jul 6, 2019 · 0 comments
Open

前端性能优化大纲 #2

iNuanfeng opened this issue Jul 6, 2019 · 0 comments
Labels
前端性能

Comments

@iNuanfeng
Copy link
Owner
iNuanfeng commented Jul 6, 2019 •
edited
Loading

最近在给推啊的互动小游戏做大盘的一个性能优化，借此体系化地整理一下一些前端性能优化的基本概念和进阶手段。

推啊其实应该是对h5性能要求极其高的业务，我们的场景主要是互动小游戏，投放于各个top APP，对性能要求严苛，特别是弱网环境下的用户体验。

基本优化篇先，介绍基本准则。

页面加载时序，资源优先级，http2，阻塞，渲染时机，背景图。

预加载

首屏渲染提速，弹层交互白屏，预加载后续资源，dns，懒加载不重要资源

首屏

体积，提取首屏资源预加载，loading，骨架屏，内联样式

缓存

介绍cdn缓存，离线缓存应用，webview缓存，离线缓存更新机智，第三方微信缓存的处理，数据识别

webp

介绍，自己实现，cdn支持，如何加载，css背景图的处理，img的处理，异步资源的处理封装，webpack插件

图片相关

gif压缩，png压缩，jpg压缩，tinypng，进阶式图片压缩工具工程化，服务端压缩工具应用

雪碧图

原理，工程化，webpack插件原理，服务端配置图的雪碧图，base64的选择

webpack相关

webpack对js的压缩，分包，runtime，webpackjsonp问题内联，路由及分模块

服务端渲染

非js语言，js语言，框架ssr，预渲染puppeteer，预渲染变种，约定处理，重复渲染处理，框架的处理，原理

大型网站的性能优化

基于浏览器的原理

浏览器内核分析，重绘触发，对性能的影响

svga动画，svg使用，帧动画，css3性能

执行性能

动画，js，webworker，wasm简单介绍

webpack构建性能，工程部署性能

前端框架的性能优化，长列表页面优化等等

node性能简单介绍，注意事项等

v8引擎原理，内核，性能分析，举例子

高并发流量处理，亿级数据查询，分表，读写分估离，队列，node适用场景

vue，react同构的问题

弱网降级特效方案
@iNuanfeng iNuanfeng changed the title 前端性能优化进阶 前端性能优化大纲 Mar 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
前端性能
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@iNuanfeng
0