0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Web前端性能优化的时候怎么做才比较好

IT家园 2019-07-17 14:00 次阅读

Web前端性能优化的实用技巧分享,关注郑州达内教育,来看看如何对web前端性能方面的知识点进行优化吧

Web前端的优化是非常重要的,也是每一位Web前端开发工程师所重视的,毕竟Web前端性能优化的好与否是直接影响到用户体验的。用户体验的好与否是直接影响用户对网站的满意度的。Web前端性能优化的好的网站才能达到理想中的效益。

那么在Web前端性能优化的时候怎么做才比较好呢?Web前端性能优化有没有什么技巧呢,以下为大家推荐三个Web前端性能优化的实用技巧。

1、减少HTTP请求数:

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

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

2、图片懒加载

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

3、代码的优化

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

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

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


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • WEB前端
    +关注

    关注

    0

    文章

    18

    浏览量

    2513
收藏 人收藏

    评论

    相关推荐

    TAS5711做功放,前端光纤与同轴输入,用哪颗芯片比较好

    TAS5711数字功放,输入为I2S信号, 前端用光纤与同轴输入,需要可以解AC3、DTS、PCM信号,可以支持192K\24BIT数据,用TI的哪颗芯片比较好。    另外我看TAS5711的开发板上面有另外一块开发板MC
    发表于 11-01 06:29

    三星贴片电容哪个品牌的比较好

    三星贴片电容作为电子元器件领域的重要品牌,其产品以其优良的性能和广泛的应用范围而备受认可。在众多的三星贴片电容品牌中,要确定哪个品牌的比较好,需要从多个角度进行综合评估,包括产品质量、性能稳定性
    的头像 发表于 09-27 17:12 231次阅读
    三星贴片电容哪个品牌的<b class='flag-5'>比较好</b>?

    谷景科普共模电感怎么样效果比较好

    谷景揭秘共模电感怎么样效果比较好编辑:谷景电子共模电感作为一种在电子电路中广泛应用的电子元器件,它对电路的稳定性有着重要的影响。但要想共模电感充分发挥它的作用,选择什么样的共模电感就显得特别重要
    发表于 09-16 23:05 0次下载

    请问通用有源低通滤波器应该用什么芯片比较好呢?

    通用有源低通滤波器应该用什么芯片比较好呢?我用的OPA820的效果不太理想啊
    发表于 09-12 07:06

    高频放大电路的仿真软件用什么比较好

    请问,高频放大电路的仿真软件用什么比较好,还有Multisim10软件的Analog元件库器件很少,好多高频器件没有怎么办?
    发表于 09-04 06:08

    什么线性电压放大器比较好用?

    我想知道什么线性电压放大器比较好用么?我们是要把+-10V的正弦波(10kHz)放大到+-50V
    发表于 09-03 08:08

    共模电感怎么样效果比较好

    电子发烧友网站提供《共模电感怎么样效果比较好.docx》资料免费下载
    发表于 09-02 14:53 0次下载

    水冷的体积小、重量轻、能量密度大传热性能比较好、噪音也比较

    性能
    深圳崧皓电子
    发布于 :2024年09月02日 06:56:00

    一体成型功率电感怎么样效果比较好

    谷景科普一体成型功率电感怎么样效果比较好 编辑:谷景电子 一体成型功率电感作为一种在电子电路中普遍应用的电感元件,它对电路的稳定性有着重要的影响。但要想一体成型功率电感充分发挥它的作用,选择什么样
    的头像 发表于 08-20 20:41 492次阅读
    一体成型功率电感怎么样效果<b class='flag-5'>比较好</b>

    请问比较器不用的引脚如何处理比较好

    想请问一下,比较器不用的引脚如何处理比较好 前段时间看了一个国外比较老的板子,他将比较器不用引脚处理成如下, 总感觉有点怪怪的,请专家给点意见,如何处理
    发表于 08-12 07:40

    固定芯片用什么胶水比较好

    固定芯片用什么胶水比较好?芯片粘接固定胶在电子封装领域是比较常见的,芯片安装在基板上,点胶固定的工艺流程。固定芯片时,选择合适的胶水至关重要,以确保芯片能够稳定、可靠地固定在基板上。以下是一些常用
    的头像 发表于 05-10 10:08 1199次阅读
    固定芯片用什么胶水<b class='flag-5'>比较好</b>?

    stm8l不使用adc时,vref,vdda,vssa怎么处理比较好

    可以悬空呢,或者直接连接vdd,vss就可以,还是一定要接电容,怎么做比较好,考虑节电和稳定。 因为手头没有什么测量设备,所以先来请教一下大家。谢谢。
    发表于 04-30 08:30

    web前端开发和前端开发的区别

    、CSS和JavaScript等技术来构建用户界面,实现用户与应用程序的交互。Web前端开发包括网页设计、网页编码、前端框架使用以及优化页面性能
    的头像 发表于 01-18 09:54 3343次阅读

    ad8108每个供电管脚接多大电容比较好,0.01uF吗?

    1 ad8108DGND和AGND如何处理比较好,分开还是用一块完整的地平面,需不需要与其他地分隔开? 2 ad8108每个供电管脚接多大电容比较好,0.01uF吗?
    发表于 12-13 08:04

    请问大家怎样控制好放大器的噪声问题,有没有比较好的参考文档?

    请问大家怎样控制好放大器的噪声问题,有没有比较好的参考文档?
    发表于 11-27 07:20