如何进行web前端性能优化?

作者: 1194b60087a9 | 来源:发表于2019-05-30 19:39 被阅读2次

    Web性能优化重不重要?相信每一个从事Web前端开发的人都会回答重要,毕竟Web性能优化好的网站可以给用户带来更好的体验,这也意味着用户对网站更满意,自然也就能为网站带来效益。那么如何进行Web性能优化呢?下面千锋就为大家介绍3个小技巧。

    1. 减少HTTP请求数:

    1)资源大小很重要,不仅仅关系到下载时间,还因为IPv4和IPv6协议规定一个IP包的最大值为65535字节。一个IP包是一次请求,于是可以得到一个等式:

    图片1

    根据这个公式,我们可以控制资源尽可能小。可以采取使用gulp等自动化构建工具进行自动合并JS文件、压缩文件和图片等手段。

    1. 避免重定向:重定向说明需要客户端采取进一步操作才能完成请求,请求时间就会延长。所以输入URL时应使用最完整的、最直接的地址,比如输入www.baidu.com而不是baidu.com

    2. 使用缓存机制:主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。

    2. 图片懒加载

    页面图片很多的,可以使用懒加载。只加载第一屏的图片,当用户滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片,占位图只下载一次,将原本图片的src存储在另一个属性中,判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

    3. 代码优化

    1)页面结构:CSS放在HTML内容上部,JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的,因此放置资源的位置会影响网站的访问速度。比如,如果将script标签放在HTML内容的前边,浏览器就会先调用JavaScript解释器对JS进行解析,完成之后才会渲染其余的HTML内容,对用户来说,能看到的是HTML的内容,所以1) 这么做会导致页面可用性的延迟。另外,CSS是对页面节点进行修饰的,如果CSSOM未构建之前就进行了布局,等到CSSOM构建出来,如果CSS修改了节点的布局,就会发生重排,需要重新计算布局并绘制。

    1. JavaScript优化:比如减少对DOM的操作,减少重排和重绘,减少作用域链查找,慎用eval函数等等。JS代码和(下面的)CSS的优化主要要求前端开发人员对页面渲染原理有清晰的了解、对基础知识的掌握和良好的编程习惯。

    2. CSS优化:比如减少使用通配符‘*’,提取公用样式增强可复用性,选择器准确可减少匹配时间,适度使用内联样式。

    多年编程经验,今年1月整理了一批2019年最新WEB前端教学视频,不论是零基础想要学习前端还是学完在工作想要提升自己,这些资料都会给你带来帮助,从HTML到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun:296,212,562,即可免费获取,学习不怕从零开始,就怕从不开始。

    相关文章

      网友评论

        本文标题:如何进行web前端性能优化?

        本文链接:https://www.haomeiwen.com/subject/lclbtctx.html