极客

前端性能优化

2019-02-24  本文已影响0人  极客传

资源加载

样式表加载放在头部,js文件加载放在body结束标签前。样式表先加载,避免页面开始加载时,页面显示混乱;js文件执行的是逻辑处理,不会影响页面的初始显示,放在尾部加载可以让页面更快地渲染出来。

图标做成雪碧图,通过background-position来显示。页面使用图标较多时,发出多个请求,会影响页面加载。

资源按需加载,图片懒加载。为保证页面加载渲染速度,可以考虑对资源进行按需加载,比如对页面进行分页,或页面滚动到底部时,再进行更多资源的加载。

使用CDN来加载资源。利用最靠近每位用户的服务器,来将资源发送给用户。

内容分发网络(英语:Content delivery network或Content distribution network,缩写CDN)是指一种透过互联网互相连接的计算机网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

合理使用缓存。对于某些更新不频繁的资源,可以设置缓存,当未超出过期时间时,直接使用缓存中的资源,不再从服务器调取。

页面渲染

减少页面回流(reflow)。当发生回流(reflow),渲染树中受到影响的部分,需要重新构建,并重绘(repaint),这整个过程会消耗性能。
适当地减少DOM操作,减少回流。对于需要多次回流的元素,可以考虑将它的position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。
repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
回流一定会伴随着重绘,但是重绘不一定会引起回流。

代码优化

css代码优化。css样式表中,对元素的查找设置,是右结合的,尽量写能精确定位的元素选择器。

js代码优化。对于执行完毕后,不再需要的变量,及时删除置空,避免占内存。

嗯,暂时想到这么多,后续再补充

上一篇 下一篇

猜你喜欢

热点阅读