当前位置:首页 » 网页前端 » 如何优化前端性能
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

如何优化前端性能

发布时间: 2022-06-15 21:01:11

前端工程师怎样提高开发效率

前端工程师其实是一个工作很杂的职位,除了要负责切图、写html/css/js外,还要处理一系列的浏览器兼容性问题、优化网页性能等,所以提高前端工程师的开发效率是势在必行的,也是前端共工程化的体现。那么如何提高便可以按照前端工程师涉及的工作点来进行划分。下面我就介绍下平时我在工作中使用的一些提高开发效率的方法。



当然除了以上5点,对于前端来说需要提高开发效率的地方还有很多,可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。

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

1,css精灵!
2,代码压缩
3,高质量的JS代码肯定能省很多事!封装JS,重复调用方法!这样会减少很多操作
4,请减少对DOM的操作
5,使用JSON格式来进行数据交换
6,高效使用HTML标签和CSS样式
7,使用CDN加速(内容分发网络)
8,精简CSS和JS文件
9,注意控制Cookie大小和污染

Ⅲ 你有用过哪些前端性能优化的方法

这个是面试常问的问题了。

我来简单说下几个方面:

1.减少http请求:在YUI35规则中也有提到,主要是优化js、css和图片资源三个方面,因为html是没有办法避免的。因此,我们可以做一下的几项操作:

  • 合并js文件

  • 合并css文件

  • 雪碧图的使用(css sprite)

  • 使用base64表示简单的图片

2.减少资源体积

  • 压缩css

  • 压缩js

  • 压缩图片

3.图片加载处理:

  • 图片预加载

  • 图片懒加载

  • 首屏加载时进度条的显示

就简单说这些,特别详细的可以网上看下。

Ⅳ 前端性能优化的具体方法有哪些

解决办法一:

减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
当需要设置的样式很多时设置className而不是直接操作style。
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
解决办法二:

减少HTTP请求次数
使用CDN:CDN在前端开发的作用
避免空的src和href
为文件头指定Expires
使用gzip压缩内容
把CSS放到顶部
把JS放到底部
避 免使用CSS表达式
将CSS和JS放到外部文件中
避免跳转
可缓存的AJAX
使用GET来完成AJAX请求

Ⅳ 简单谈谈前端性能优化

这个话题,贼大。

个人认为:核心在于,HTTP 请求的减少和请求包大小的减少再加上对代码的重构。

  1. HTTP 请求的减少,瞧瞧现在的前端工程化,工程化的作用之一正是将那些散乱的 js 、css 库全部都集成起来,压缩成一个文件,这么多文件压缩成一个,这请求不就减少了么~还有一个就是”精灵图技术“也是优化的体现,就不展开了。

  2. 请求包大小的减少,这个简直是能减就减啊,比如以前的时候,我们需要将图片直接发送到浏览器上是吧,现在可以不用!如果只是发生一段代码到客户的浏览器上,然后客户用自己的机器生成图片,这得有多快啊,毕竟一段代码大还是一张图片大还是很容易分清的,特别的是 GIF 图!这时候用上 svg 或是 canvas 技术,就不需要发送巨大的 GIF 图片了,只需要调用浏览器的资源生成图像即可。

  3. 重构,反正不满意重构就是了,满意了加功能然后继续重构就是了。

但这都是还只是皮毛啊这是,如果用到框架,那还要讲到框架的优化,因为前端框架的优化同样是性能优化,那都能写几十页了都......

如果再深入讲到浏览器自身......啊,要死了死了,技术是无穷的,命是有限的!

Ⅵ 常用的前端性能优化方法有哪些

1、减少http请求,合理设置HTTP缓存

2、使用浏览器缓存

3、启用压缩

4、CSS Sprites,合并 CSS图片,减少请求数

5、CSS放在页面最上部,javascript放在页面最下面

Ⅶ 如何做好网站前端优化

一. 清理 HTML 文档
二. 优化 CSS 性能
三.减少外部HTTP请求
四. 压缩 CSS, JS 和 HTML
五. 使用预先获取
六. 使用 CDN 和缓存提高速度
七. 压缩文件
八. 优化你的图片
九. 使用轻量级框架
十.前端优化 – 总结
进行前端优化似乎需要花费很大的精力,相信这篇应用指南中的一些小技巧能帮你极大改善网站加载速度。网站加载地越快,则用户体验越佳。因此, 对前端进行优化能使给你和你的用户都带来益处。如果你有任何其他好的优化方法,请在评论区留下您的宝贵建议。

Ⅷ 你有用过哪些前端性能优化的方法,有好的推荐吗

前端性能优化的方法,精简版:
1、 JavaScript 压缩
2、 加载资源(何时、什么顺序、要不要现在加载)
3、 缓存
4、 应用性能分析
5、 使用负载均衡方案
6、 为了更快的启动时间考虑一下同构
7、 使用索引加速数据库查询
8、 使用更快的转译方案
9、 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
10、图片编码
希望以上的回答能够为你提供帮助。

Ⅸ 前端性能优化有哪些方法

图片雪花、懒加载、减少iframe的使用、js文件尽量放到最后加载

Ⅹ 如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发,最常遇见的前端优化问题。前端性能进行优化规则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

  1. 减少HTTP请求次数

    尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发,包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。

12. 避免跳转

有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问http:// .com时,实际上返回的是一个包含301代码的跳转,它指向的是http:// .com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转, 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。

13. 删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西,因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片,影响加载

23. 缩小favicon.ico并缓存