前端优化详解

最新推荐文章于 2022-08-03 11:24:11 发布
最新推荐文章于 2022-08-03 11:24:11 发布
阅读量118 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coca_cola_1105/article/details/120325829
版权

工作日常中经常会接手烂代码或者不巧自己就是写烂代码的人（笑死）。面对项目中的烂代码，不能做彻彻底底的清道夫也要泥石流中的一股清流。要保证自己接手过的代码要比原来要好，自己能接受。面对烂代码万能法则第一条：自己不写烂代码！！！

个人对于优化觉得可以分为：

  • 代码可读性
  • 性能

可读性优化：

  •  命名
  • 组件化
  • 模块化

代码具体优化参考

性能优化：

  • 降低请求数量：合并资源，减少HTTP请求
  • 加快请求速度：预解析DNS，减少域名数，并行加载，CSDN分发
  • 缓存
  • 渲染：JS、CSS优化，加载速度       
  • 图片懒加载，路由懒加载
  • 减少页面引起的重绘和重排
尤雨珂
关注
前端优化图片加载速度的技术详解
为了WLB努力
05-18 1407
随着现代网页内容越来越丰富，图片成为了不可或缺的一部分。然而，大量或高分辨率图片的加载常常会导致网页性能下降，用户体验变差。本文将详细介绍几种前端优化图片加载速度的技术，并提供相应的代码示例。
web前端工程师面试题更新了，找工作必背的面试题 一
IT教育任姐姐的博客
09-17 404
1、用纯CSS创建一个三角形的原理是什么？ 答案：首先，需要把元素的宽度、高度设为0。然后设置边框样式。 width: 0;height: 0; border-top: 40px solid transparent;border-left: 40px solid transparent; border-right: 40px solid transparent;border-b...
对于前端性能优化的理解与实践
mus-z的博客
04-01 507
先从一道题目说起 从输入 URL 到页面加载完成，发生了什么？ 站在性能优化的角度；我们可以分为5个过程； DNS 解析 TCP 连接 HTTP 请求抛出 服务端处理请求，HTTP 响应返回 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户 我们从这五个过程个个击破； dns解析花时间，tcp连接慢；这些需要我们的服务端解决； 那么我们的前端工程师在HTTP请求或者浏览器端能做一些...
前端性能优化认知
乐夫天命兮的博客
08-03 2645
通常来讲，前端性能优化是指：从用户开始访问网站到整个页面完整地展现出来的过程中，通过各种优化策略和优化方法，让页面加载得更快，让用户的操作相应更及时，给用户更好的使用体验。优化是在做什么：客户端和服务器端建立连接、加载资源、解析资源并渲染。[译]JavaScript 的时间消耗。...
浅谈前端性能优化
weixin_44063225的博客
03-10 519
什么是前端性能 它是一个跨功能需求，优化的方式有很多种，可以将其总结分为俩大类，第一类是运行环境的优化，如【网络、服务器资源】等，第二类为代码级别的优化，例如js中DOM操作优化，css选择器优化，图片优化以及HTML结构优化等等。 理解影响性能的关键因素 延迟 带宽(流量、流量控制) DNS解析 TCP/TLS（安全传输层协议） 静态资源 ...
详解Web前端性能优化详解之资源合并与压缩
09-22
Web前端性能优化是确保网站快速加载和用户体验流畅的关键措施，而资源合并与压缩是其中的核心技术。首先，资源合并旨在减少HTTP请求的数量，因为每个请求都会带来一定的延迟，合并资源后，就可以减少这种延迟。其次...
大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 带书签完整版
03-18
### 大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 #### 一、基于用户体验的性能优化要素 在现代互联网应用中，用户体验是衡量一个网站成功与否的重要标准之一。良好的用户体验不仅仅体现在美观的...
前端项目性能优化
yiyueqinghui的博客
09-21 3683
1、HTML性能优化 把js移到HTML后加载，因为JS会阻塞后面的页面的显示。 减少iframe的使用，因为iframe会增加一条http请求。 清除代码之间空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，这样不利于web页面的传输。 减少不必要的嵌套，避免代码纵深层次过深，尽量扁平化，因为当浏览器遇到一个开始标签时就会寻找它的结束标签，直到匹配上才会显示它的内容，所以当嵌套很多时打开页面就会特别慢。 减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜
前端项目性能优化（全面解析）
qq_52151772的博客
06-19 3150
Amazon 发现每100ms延迟导致1%的销量损失
前端项目性能优化方案有哪些
m0_51060602的博客
03-07 4万+
前端项目性能优化方案汇总
前端性能优化方法和详解
fdbyd的博客
08-16 1836
一、为什么要优化前端的性能 优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。 前端优化的方法有很多种，可以将其分为两大类，第一类是页面级别的优化如http请求数，内联脚本的位置优化等，第二类为代码级别的优化，例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。 什么是前端性能优化（what）？ 从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，..
前端系列主题：从宏观到细节为前端性能优化全方位讲解！
Larry的博客
10-14 1781
本文转自：全栈成长之路 目录 前言 一、资源的合并和压缩 1.html压缩 2.css代码压缩 3.js压缩与混乱（丑化） 4.文件合并 二、图片相关的优化 1.图片压缩 2.css雪碧图 3.网页内联图片（Image inline） 4.矢量图SVG与iconfont 5.webp 三、浏览器渲染引擎与阻塞 1.渲染的主要模块 2.渲染过程 3.css阻塞 4.js阻塞 5.总结 四、懒加载和预加载 1.懒加载 2.预加载 五、重绘与回流 1.CSS图层
前端性能优化方法总结
热门推荐
夜阑吹雨的博客
03-20 7万+
前端性能优化（一） 前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小
我所理解的前端性能优化
cherry_zhang18的博客
08-23 1788
前端优化的目的是提升访问速度、改善用户体验。前端页面主要包括html、css、js，而作为web前端工程师，可以控制的正好是这三部分以及相应的背景图片，所以，我们可以从三个方面来优化前端性能。        1、html部分                a、要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。        b、尽量不要使用h5摒弃的iframe标签，因
java web 性能优化----浏览器优化
Java菜鸟
03-05 996
一、浏览器端，关于浏览器端优化，分很多个方面 1、压缩源码和图片 JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。 2、选择合适的图片格式 如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能
对web前端性能优化的理解
Ann1223的博客
11-09 599
web前端的性能优化性能优化为什么要做前端优化页面级别优化1. 减少 HTTP请求数2.资源合并与压缩3.合并 CSS，JS4.CSS sprite(雪碧图)5.图片懒加载6.将 CSS放在 head中，js放在尾部代码级别优化1.对dom的操作2.慎用 with3.减少作用域链查找4.字符串拼接5.按需引入 性能优化 为什么要做前端优化 先明确一下前端优化的目的是什么 ? 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 从服务商角度而言，优化能够
web前端性能优化总结
HOKING的专栏
05-21 7万+
转自：http://www.2cto.com/kf/201604/498725.html          网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。         而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们
Web前端优化技术详解
1. **前端优化机制** - **减少HTTP请求**：这是提升网页加载速度的关键。可以通过合并CSS和JavaScript文件、使用CSS Sprites技术、创建图像地图、内联小图象（使用data:URL scheme）来实现。 - **减少DNS查找**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值