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

[haizhilin2013]

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

[gyd1997]

• 缓存利用： 缓存 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]

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

[kruzabc]

这个问题也可以这么问：
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等新技术 等等。

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