让图片的 内存更小
发布日期:2019-03-15 16:01   浏览次数:

  在项目开发过程中,我们经常会遇到一个问题:已做好的页面在挂载到服务器上之后,加载速度非常缓慢,从而使得用户体验非常糟糕。因此,页面的优化是我们在项目中一定要求会掌握的技能。

  优化页面有很多种不同的方法,接下来我们大体来介绍一下,同时希望各位看官能熟练掌握,在项目中如鱼得水。

  在页面中,为了让效果更加丰富和吸人眼球,往往需要大量的CSS样式描述。下面我们介绍一下常用的CSS优化方法。

  在一个页面中,为了样式的美观,往往会存在着大量的图片和一些图标。其实图片的效果往往不必太清晰,而我们需要做的就是检查页面中出现的图片,然后对其进行优化,让图片的内存更小,从而让用户在进入到该页面时,加载图片的时间大大减少。

  3.合并小图片。如把当前页面中的图标做成一张大图片,在需要的时候只使用该图片的一部分。这样会大大减少文件的网络请求次数,这也是现在很多网站在做的(如淘宝首页、京东首页等等)

  很多熟悉布局的开发者在写样式时,喜欢使用元素的被动属性来撑开面积(如块元素的高度可由内容撑开),但这样做会导致浏览器在渲染页面的时候,不停的调整页面。所以尽量把元素的宽度和高度填写上,在需要响应式的页面时,我们可以使用兼容单位。

  webpack想必大家都比较熟悉,它可以把多种不同的静态资源转换为一个静态文件,这样做也会大大减少页面的网络请求,同时它也可以用来做ES6转码,增加在浏览器中的兼容性。

  以上就是我们平时在项目中常用的方法,通过使用这些方法,我们可以大大减少页面加载时间。当然,还有其他的方法,比如网址后加斜杠、使用前端框架优化代码....,而这些涉及到框架和HTTP的其他知识点,我们以后再议。最后,希望本文对各位看官有所帮助,在项目中通过实战慢慢磨炼。加油!

Copyright © 2002-2011 秒速赛车 版权所有  粤ICP备55698721号 网站地图 网站导航