Skip to content

[软技能] 第103天 请列举出多种减少页面加载时间的方法 #995

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.

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

Open
haizhilin2013 opened this issue Jul 27, 2019 · 4 comments
Labels
软技能 软技能

Comments

@haizhilin2013
Copy link
Collaborator

第103天 请列举出多种减少页面加载时间的方法

@haizhilin2013 haizhilin2013 added the 软技能 软技能 label Jul 27, 2019
@gyd1997
Copy link

gyd1997 commented Jul 28, 2019

• 缓存利用: 缓存 Ajax,使用 CDN、外部 JavaScript 和 css 文件缓存,添加 Expires 头,在服务器端配置 Etag,减少 DNS 查找等。
• 请求数量.合并样式和脚本,使用 css 图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。
• 请求带宽:压缩文件,开启 GZIP 。
• css 代码:避免使用 css 表达式、高级选择器、通配选择器 。
• JavaScript 代码:用散列表来优化查找,少用全局变量,用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 JavaScript 性能,用 setTimeout 避免页面失去响应,缓 存 DOM 节点查找的结果,避免使用 with (with 会创建自己的作用域, 增加作用域链的 长度),多个变量声明合并。
• HTML 代码:避免图片和 iFrame 等 src 属性为空 。 src 属性为空,会重新加载当前页面 , 影响速度和效率 , 尽量避免在 HTML 标签中写 Style 属性。

@EragonBubble
Copy link

1.减少http请求数量
2.减小请求的文件大小,压缩js,和css
3.使用CDN
4.页面头部放css,body尾放js。
5.服务器使用gzip压缩,减小网络数据的传输大小。
6.尽量减少页面的dom元素,比如使用div布局替代冗余严重的table布局

@kruzabc
Copy link

kruzabc commented Jan 8, 2020

这个问题也可以这么问:
1.如何更快的加载显示网页
2.如何优化网页
3.如何避免长时间白屏

网页优化是笼统的话题,如果要回答, 也只有以下两点:
1.加载优化
2.渲染优化

一.如何进行加载优化?
1.如何利用缓存来进行优化。
2.如何提升http请求和响应的速度来进行优化。
3.如何避免和减少不必要的请求来进行优化。

二.如何进行渲染优化?
1.如何提高html的解析效率。
2.如何提高css的渲染效率。
3.如何提升js的执行效率。

按这个思路,问题就好回答了,思路也比较清晰。

    1. 如何利用缓存来优化?
      合理使用强缓存,协商缓存。使用Etag, Service Workder等等。
    1. 如何提升http请求和响应的速度来进行优化?
      提升服务器带宽,使用http/2,使用cdn,压缩各种文本资源, 合并雪碧图,使用gzip, 减少cookie数量,预取缓存DNS,等等。
  • 3.如何避免和减少不必要的请求来进行优化?
    接口设计时可以合并接口,避免多次请求; 按需缓存Get请求,本地缓存数据 等等。避免各种无效请求(避免img的src为空值)

  • 4.如何提高html的解析效率。
    按标准书写html,语义化,严格闭合。避免解析阻塞(script标签放到body最后) ,可以使用延迟加载(懒加载),避免script标签阻塞dom解析。尽量减少dom标签的嵌套,尽量少用iframe标签。

  • 5.如何提高css的解析效率。
    减少css嵌套次数,少使用标签和属性选择器,多使用gpu渲染,避免reflow, 尽量使用css动画而不是js动画。

-6.如何提高js的执行效率。
尽量避免js操作dom。避免js造成的reflow和闪烁,合理使用 WebWorker, WebAssembly等新技术 等等。

一般来说优化的重点还是放在 加载 这个环节。

@smile-2008
Copy link

1.减少http请求数量 2.减小请求的文件大小,压缩js,和css 3.使用CDN 4.页面头部放css,body尾放js。 5.服务器使用gzip压缩,减小网络数据的传输大小。 6.尽量减少页面的dom元素,比如使用div布局替代冗余严重的table布局

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
软技能 软技能
Projects
None yet
Development

No branches or pull requests

5 participants