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

[软技能] 第163天移动端的性能优化有哪些方法？ #1262

Open

haizhilin2013 opened this issue Sep 25, 2019 · 3 comments

Labels

软技能

Collaborator

haizhilin2013 commented Sep 25, 2019

第163天移动端的性能优化有哪些方法？

haizhilin2013 added the 软技能 label

cxwht commented Sep 25, 2019

比如在做响应式网站的话，优先做移动端的网页，再去适配桌面端，这样移动端用的代码量少，性能也上去了

nowkizzz commented Sep 26, 2019

使用首屏加载（对一些重要内容优先加载显示，一些次要内容可延迟加载）
懒加载，预加载，异步加载资源
压缩图片，CSS优化

vkboo commented Sep 26, 2019

首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
模块化资源并行下载
inline 首屏必备的 CSS 和 JavaScript
meta dns prefetch 设置 DNS 预解析

<!--cdn域名预解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >

资源预加载:对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成
尝试使用 PWA 模式
图片压缩处理
使用较小的图片，合理使用 base64 内嵌图片
使用更高压缩比格式的图片：webp格式
图片懒加载
使用 iconfont 代替图片图标

vkboo mentioned this issue

[软技能] 第166天如何对前端资源进行优化？ #1274

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment