好程序员分享Web前端性能优化

烬余实例
• 阅读 193

  好程序员分享Web前端性能优化,Web前端性能优化的结果直接影响到用户体验,而用户体验则与网站的满意度息息相关,所以,Web前端的优化非常重要。虽然Web前端工程师也把这项工作当做重中之重,但是令他们感到棘手的是不知道从哪些方面去着手优化。其实Web前端优化并不难,只需要掌握一些实用的技巧,就可以轻松应对。接下来,为大家提供一些优化的方法。

  一、减少HTTP请求数

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

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

  二、图片懒加载

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

  三、代码的优化

  (1)页面的结构:CSS放在HTML内容上部,JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的,因此放置资源的位置会影响网站的访问速度。比如,如果将script标签放在HTML内容的前边,浏览器就会先调用JavaScript解释器对JS进行解析,完成之后才会渲染其余的HTML内容。对用户而言,能看到的是HTML的内容,所以这么做会导致页面可用性的延迟。

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

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

其实更多情况下,Web前端优化的难易程度取决于你的熟练程度以及实操经验。

点赞
收藏
评论区
推荐文章
爱丽丝13 爱丽丝13
4年前
聊聊前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<fontcolor00FF7Fsize5face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<fontcolor00FF00size5face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界:1.Javase练气筑基2.数据库结丹3.web前端元婴4.Jav
巴拉米 巴拉米
4年前
前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
Souleigh ✨ Souleigh ✨
4年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Wesley13 Wesley13
3年前
Java Web 前端高性能优化(二)
一.上文回顾上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见JavaWeb前端高性能优化(一)(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fclub.oneapm.com%2Ft%2Fjavaweb%2F399))本次我们主要从图像BASE64
Stella981 Stella981
3年前
JavaScript 性能优化技巧分享
JavaScript作为当前最为常见的直译式脚本语言,已经广泛应用于Web应用开发中。为了提高Web应用的性能,从JavaScript的性能优化方向入手,会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解JavaScript的性能优化技巧,以便让更多的前端开发人员掌握这方面知识。什么是高性能的JavaScr
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
实践指南-前端性能提升 270% | 京东云技术团队
本文详细介绍了一个前端项目优化的详细过程,从优化前的问题分析,到具体的优化措施,最终实现了前端性能提升了近3倍。同时也将性能指标落到监控平台,实现可视化的监控前端性能指标。
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(