前端优化:懒加载思考 前端页面加载优化

杨帆，2018年加入去哪儿，很荣幸能和很多优秀的同事一起打拼，目前在大住宿/大前端/综合业务团队，主要负责专题系统的开发和优化等工作，涉及前端组件化开发和后端 node 工程的开发。希望在大前端架构思想上有所突破，帮助同事和团队在大前端领域里提高开发效率。

一、简介

在进行系统优化的时候，如果只局限于前端范畴的话，所能使用的方法很有限。通常能想到的就是如何让首屏更加流畅，提升用户体验。

懒加载指的是，合理的进行图片、静态资源延迟加载，甚至接口或业务逻辑的延迟执行，做到给首屏最大的性能空间，达到页面首屏更快的渲染效果。

这种思想，适合很多前端工程的优化场景。

二、实现思路

1、资源站位

在懒加载的时候，通常是需要跳过原本的执行步骤。比如：懒加载图片时，需要进行标签的站位，事先设定图片宽高，使用 data-* 属性设置好待请求的图片地址，这时，图片还没有被浏览器下载。

1. <img
3. class
4. =
5. "qLazy"
7. data-original
8. =
9. 'https://xyz.abc.com/common/logo.png'
11. />

由于没有此时没有设置 src 属性，所以 data-original 地址对应的图片并不会进行加载。

如果直接在 src 属性设置好图片地址，浏览器解析到则会直接下载，那么，就失去了懒加载的意义。

2、监听 scroll 事件

在懒加载时，需要制定懒加载的容器。比如：某些可以滚动的内容列表区域。

但在实际开发中，往往不会显式的制定容器，举个例子：手机端常常会有长列表，随整个页面滚动展现，这时如果进行懒加载优化，默认滚动容器应该为 window 对象。

3、判断资源位置是否在视窗内

这个功能是懒加载功能的核心，因为，懒加载也可以称为延迟加载，但什么时候进行加载呢？一定是用户在看到或者即将要看到待加载资源的时候，提前进行加载。这样，用户在看到资源时，资源已经加载完毕，可以给用户更好体验。

借用网络上一张图片加以说明：

即：当绿色待加载的页面元素，即将进入蓝色可视区域或已经进入可视区域后，执行懒加载方法。

4、判断加载资源或执行相应的回调逻辑

这个功能可以是根据业务进行扩展或更改。懒加载最初的构想只设计在了图片标签上，因为大部分手机端页面 80% 左右都会是图片，能够合理的控制图片的加载就能更好的改善用户体验。但也有例外，随着前端的功能越来越强大，很多渲染工作都会交给前端负责，很多业务逻辑也都又前端进行控制。所以，系统会很希望扩展一些懒执行功能，保证首屏逻辑优先完成，后续渲染或复杂操作延迟执行。

下面是部分懒加载实现源码。

1. function
3. QLazyLoader
4. (
5. setting
6. )
8. {
10. var
11. _setting
12. =
14. {
15. selector
16. :
18. '.qLazy'
19. ,
21. // 事件名
23. event
24. :
26. 'scroll'
27. ,
29. // 默认绑定 evnet 的对象容器
30. container
31. :
32. setting
33. .
34. container
35. ||
36. window
37. ,
39. // 获取 src 的 data 属性，默认 data-attrbute
40. attribute
41. :
43. 'data-original'
44. ,
46. // 设置懒加载类型 默认为img 选项: 图片:img 只执行回调：call
47. loadtype
48. :
50. 'img'
51. ,
53. // 回调事件，元素出现在视口中 function
54. appear
55. :
57. null
58. ,
60. // 触发 load 事件时执行的回调 function
61. load
62. :
64. null
66. };
68. //省略：进行滚动监听
70. //省略：判断是否出现再视窗内
72. //如果元素出现在视窗内
73. elements
74. .
75. each
76. (
77. function
79. ()
81. {
83. var
84. dom
85. =
87. this
88. ;
90. var
91. jqThis
92. =
93. $
94. (
95. dom
96. );
98. var
99. qSrc
100. =
101. jqThis
102. .
103. attr
104. (
105. setting
106. .
107. attribute
108. );
110. var
111. loadAction
112. =
114. function
115. ()
117. {};
119. var
120. loadedCall
121. =
123. function
124. ()
126. {
127. elements
128. =
129. $
130. (
131. grepElements
132. (
133. elements
134. ));
136. if
138. (
139. setting
140. .
141. load
142. )
144. {
145. setting
146. .
147. load
148. .
149. call
150. (
151. dom
152. ,
153. jqThis
154. ,
155. elements
156. .
157. length
158. ,
159. setting
160. );
162. }
164. }
166. if
168. (
169. /img|background-image/
170. .
171. test
172. (
173. setting
174. .
175. loadtype
176. )
178. &&
179. qSrc
180. )
182. {
184. var
185. _img
186. =
187. jqThis
188. ;
190. // 开始懒加载图片
192. if
194. (!
195. _img
196. .
197. attr
198. (
199. 'src'
200. ))
202. {
203. jqThis
204. .
205. attr
206. (
207. 'src'
208. ,
209. qSrc
210. );
212. }
213. _img
214. .
215. one
216. (
217. 'error'
218. ,
220. function
222. ()
224. {
225. console
226. .
227. log
228. (
229. 'qSrc loaded error'
230. ,
231. qSrc
232. );
234. });
236. }
238. if
240. (
241. /js/
242. .
243. test
244. (
245. setting
246. .
247. loadtype
248. )
250. &&
251. qSrc
252. )
254. {
255. loadAction
256. =
258. function
259. ()
261. {
263. LoadScript
264. (
265. qSrc
266. ,
267. loadedCall
268. );
270. }
272. }
274. if
276. (
277. /css/
278. .
279. test
280. (
281. setting
282. .
283. loadtype
284. )
286. &&
287. qSrc
288. )
290. {
291. loadAction
292. =
294. function
295. ()
297. {
299. LoadStyle
300. (
301. qSrc
302. ,
303. loadedCall
304. );
306. }
308. }
310. if
312. (
313. /call/
314. .
315. test
316. (
317. setting
318. .
319. loadtype
320. ))
322. {
323. loadAction
324. =
325. loadedCall
326. ;
328. }
329. jqThis
330. .
331. one
332. (
333. APPEAR_EVENT
334. ,
336. function
338. (
339. e
340. )
342. {
344. if
346. (!
347. dom
348. .
349. loaded
350. )
352. {
354. if
356. (
357. setting
358. .
359. appear
360. )
362. {
363. setting
364. .
365. appear
366. .
367. call
368. (
369. dom
370. ,
371. $
372. (
373. this
374. ),
375. elements
376. .
377. length
378. ,
379. setting
380. );
382. }
383. loadAction
384. ();
386. }
388. });
390. });
391. }

三、如何判断资源位置是否出现在视窗内

1、根据可视区域高度和滚动高度以及元素距离页面顶端的距离进行计算

1. function
2. isElementInViewport
3. (
4. el
5. )
7. {
9. // 获取div距离顶部的偏移量
11. var
12. offsetTop
13. =
14. el
15. .
16. offsetTop
17. ;
19. // 获取屏幕高度
21. var
22. clientHeight
23. =
24. document
25. .
26. documentElement
27. .
28. clientHeight
29. ;
31. // 屏幕卷去的高度
33. var
34. scrollTop
35. =
36. document
37. .
38. documentElement
39. .
40. scrollTop
41. ;
43. if
44. (
45. clientHeight
46. +
47. scrollTop
48. >
49. offsetTop
50. )
52. {
53. console
54. .
55. log
56. (
57. "已经进入可视区"
58. );
60. }
62. else
64. {
65. console
66. .
67. log
68. (
69. "并没有进入可视区"
70. );
72. }
73. }

注意：document.documentElement 的兼容性问题，不在此次讲解范围内。

2、getBoundingClientRect API

这个方法非常有用，常用于确定元素相对于视口的位置。该方法会返回一个 DOMRect 对象，包含 left,top,width,height,bottom,right 六个属性。

left,right,top,bottom: 都是元素（不包括 margin ）相对于视口的原点（视口的上边界和左边界）的距离。

1. // 用法举例：
2. var
3. ro
4. =
6. object
7. .
8. getBoundingClientRect
9. ();
10. var
12. Top
14. =
15. ro
16. .
17. top
18. ;
19. var
21. Bottom
23. =
24. ro
25. .
26. bottom
27. ;
28. var
30. Left
32. =
33. ro
34. .
35. left
36. ;
37. var
39. Right
41. =
42. ro
43. .
44. right
45. ;
46. var
48. Width
50. =
51. ro
52. .
53. width
54. ||
56. Right
58. -
60. Left
61. ;
62. var
64. Height
66. =
67. ro
68. .
69. height
70. ||
72. Bottom
74. -
76. Top
77. ;
78. function
79. isElementInViewport
80. (
81. el
82. )
84. {
86. var
87. rect
88. =
89. el
90. .
91. getBoundingClientRect
92. ();
94. return
96. (
97. rect
98. .
99. top
100. >=
102. 0
104. &&
105. rect
106. .
107. left
108. >=
110. 0
112. &&
113. rect
114. .
115. bottom
116. <=
118. (
119. document
120. .
121. documentElement
122. .
123. clientWidth
124. ||
125. document
126. .
127. documentElement
128. .
129. clientHeight
130. )
132. &&
133. rect
134. .
135. right
136. <=
138. (
139. document
140. .
141. documentElement
142. .
143. clientWidth
144. ||
145. document
146. .
147. documentElement
148. .
149. clientWidth
150. )
152. );
153. }

3、IntersectionObserver API

至于是否使用这个 API ，个人建议了解就好，目前仍处于 w3c 草案阶段 ，并且浏览器实现不太乐观。

这个 API 为开发者提供了一种可以异步监听目标元素与视窗 (viewport) 交叉状态的手段。

下面是一个懒加载模板内容的例子。

1. function
2. query
3. (
4. selector
5. )
7. {
9. return
11. Array
12. .
13. from
14. (
15. document
16. .
17. querySelectorAll
18. (
19. selector
20. ));
21. }
22. var
23. observer
24. =
26. new
28. IntersectionObserver
29. (
31. function
32. (
33. changes
34. )
36. {
37. changes
38. .
39. forEach
40. (
41. function
42. (
43. change
44. )
46. {
48. var
49. container
50. =
51. change
52. .
53. target
54. ;
56. var
57. content
58. =
59. container
60. .
61. querySelector
62. (
63. 'template'
64. ).
65. content
66. ;
67. container
68. .
69. appendChild
70. (
71. content
72. );
73. observer
74. .
75. unobserve
76. (
77. container
78. );
80. });
82. }
83. );
84. query
85. (
86. '.lazy-loaded'
87. ).
88. forEach
89. (
90. function
92. (
93. item
94. )
96. {
97. observer
98. .
99. observe
100. (
101. item
102. );
103. });

这个 API 使懒加载变得简单了，由于不需要监听容器的滚动事件，全部由原生的观察者进行了异步回调。

四、扩展与优化

1、添加节流

scroll 事件，在滚动过程中，由于检测是否在视窗内的逻辑频繁被触发。因而频繁执行 DOM 操作、资源加载等浏览器负担消耗比较严重的行为。如果不加以控制很可能导致 UI 停顿甚至浏览器崩溃。

1. // 添加节流控制。
2. if
4. (
5. _setting
6. .
7. throttleMS
8. >
10. 0
11. )
13. {
15. this
16. .
17. update
18. =
19. throttle
20. (
21. this
22. .
23. update
24. ,
25. _setting
26. .
27. throttleMS
28. );
29. }

2、添加仅垂直方向判断

通常懒加载情况 scroll 事件绑定在 window 对象，整个页面又是从上到下进行渲染，所以，横向的元素判断是否在视窗内通常没有意义。设置开关，可以减少横向判断逻辑，减少资源消耗。

1. // 只判断垂直方向元素是否出现在视窗内
2. if
4. (
5. setting
6. .
7. vertical
8. )
10. {
12. if
13. (
14. jqThis
15. .
16. height
17. ()
19. <=
21. 0
23. ||
24. jqThis
25. .
26. css
27. (
28. 'display'
29. )
31. ===
33. 'none'
34. ){
36. return
37. ;
39. }
41. if
43. (
44. $
45. .
46. abovethetop
47. (
48. this
49. ,
50. setting
51. ))
53. {
55. // Nothing.
57. }
59. else
61. if
63. (!
64. $
65. .
66. belowthefold
67. (
68. this
69. ,
70. setting
71. ))
73. {
74. jqThis
75. .
76. trigger
77. (
78. APPEAR_EVENT
79. );
80. counter
81. =
83. 0
84. ;
86. }
88. else
90. {
92. if
94. (++
95. counter
96. >
97. setting
98. .
99. failureLimit
100. )
102. {
104. return
106. false
107. ;
109. }
111. }
112. }

3、扩展功能

前面可能说过，懒加载并不局限与图片情况，有时根据业务需求可以扩展需要延迟加载的静态资源。比如：js 外链脚本、css 外链样式、视频、音频等。或者只放出回调，后续具体业务逻辑交由开发自行处理。

具体思路，可以在初始化时，配置指定参数决定当前懒加载实例执行哪种功能加载。也可以在站位 DOM 中配置属性进行懒加载类型判断，可以根据业务需要灵活处理。

五、总结

懒加载对于前端优化来讲，可以称得上是一种万金油的优化方式，很多场景都可以使用其提升页面体验。

但懒加载核心是判断元素是否在视窗内的操作，这种判断是要在视窗滚动过程中获取元素宽高，导致页面会频繁重绘，会耗费很大的性能开销。

而且在监听 DOM 方面，如果懒加载的逻辑是延迟渲染某段 HTML 代码的话，那么在绑定 DOM 事件方面也是有更多详细考虑才行，否则可能会出现监听事件失效的问题。

所以，在应用懒加载的场景，还是要多多考虑，如果页面资源较少，页面整体逻辑较简单，可以不使用懒加载，一次性加载完成体验可能还会更优于懒加载优化效果。

希望大家可以在工作中合理运用懒加载思想，做到页面的更好体验。