【前端进阶-性能-性能优化检查点】

前端主要性能优化点

Accept-Encoding:gzip 进行资源压缩

gzip压缩方式浏览器支持情况:

  • Netscape 6+ (Netscape 4-5 does, but with some bugs).
  • Internet Explorer 5.5+ (July 2000) and IE 4 if set to HTTP/1.1.
  • Opera 5+ (June 2000)
  • Lynx 2.6+ (some time before 1999)
  • Firefox 0.9.5+ (October 2001)
  • Chrome since forever
  • Safari since forever (as far as I can tell)

缺点:后台服务器压缩时占用CPU资源。

减少HTTP请求数

减少DNS查询

使用CDN

避免重定向

图片懒加载

减少DOM元素数量

减少DOM操作

使用外部Javascript和CSS

压缩JavaScript、css、子图、图片等

优化CSS sprite

使用iconfont

字体裁剪

多域名分发划分内容到不同域名

尽量减少iframe使用

避免图片src为空

把样式表放在中

把脚本放在页面底部 欢迎补充...

原文地址:https://www.cnblogs.com/wanxiong/p/frontend-performance-checklist.html

时间: 2024-11-09 03:06:35

【前端进阶-性能-性能优化检查点】的相关文章

前端工程与性能优化

每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义. 然而,对于构建大型 web 应用的团队来说,要坚持贯彻这些优化原则并不是一件十分容易的事.因为优化原则中很多要求与工程管理

web前端9大性能优化方案汇总

网页的性能问题是产品开发过程中的一个重要的环节,在产品成功地把功能实现后,性能能好与坏就直接影响了用户体验,以至于影响了产品的成败! 作为web前端开发者,对前端部分进行性能上的优化,是责无旁贷,刻不容缓的工作.下面简介一下9种性能优化方案. 一.罪魁祸首是http请求 一般网页,80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等).减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较

前端积累-----网页性能优化

写在前面:文章转自网络 英文原版链接 ,若是觉得本文哪里不好还请指出,以便及时修改 目录(分7类,共35条): [内容]尽量减少HTTP请求数 [服务器]使用CDN(Content Delivery Network) [服务器]添上Expires或者Cache-Control HTTP头 [服务器]Gzip组件 [css]把样式表放在顶部 [js]把脚本放在底部 [css]避免使用CSS表达式 [js, css]把JavaScript和CSS放到外面 [内容]减少DNS查找 [js, css]压

stb前端开发js性能优化总结

js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使用e

前端性能如何优化

Hello,大家好,今天给大家分享下前端性能优化的方法,总共有以下几点. 减少 HTTP 请求数量 在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化. CSS Sprites 俗称CSS精灵,这是将多张图片合并成一张图片达到减

【前端工程师】 性能和效率 优化的问题

性能和效率 一. 你平时如何评测你写的前端代码的性能和效率. ChromeDevTools的Timeline:是用来排查应用性能瓶颈的最佳工具. ChromeDevTools的Audits:对页面性能进行检测,根据测试的结果进行优化. 第三方工具Yslow. 详细参见: http://www.cnblogs.com/—simon/p/5883336.html http://blog.csdn.net/ivan0609/artide/details/45508365 http://www.wtou

前端常见的性能优化

前端常见的性能优化 1.减少HTTP请求次数和请求的大小 雪碧图(图片精灵) 图片base64 (webpack中可以配置) 尽量使用字体图标或者SVG等矢量图 减少HTTP请求次数或者减少请求内容的大小 渲染更快:因为它们是基于代码渲染的,而对于位图(png/jpg/gif)是需要先把图片编码再渲染 不容易失真变形 图片懒加载(延迟加载) 音频取消预加载 preload = ' none' 这样可以增加第一次渲染页面的速度,当需要播放的时候在加载 再客户端和服务器进行信息交互的时候,对于多项数

论前端设计中性能的重要性

前端性能的重要性 在我的web开发生涯里,大部分时候我都是作为一个后台工程师.这样一来,我投入了非常多的精力去研究.练习如何通过后台优化来提升项目产品的性能,诸如编译器选项,数据库索引,内存管理等.很多书都花大量篇幅来讲述如何在这些方面提高性能,很多人也进而在这方面的优化花了大量时间.说实话,很多WEB网页,真正花费在web服务器到终端用户的时间其实往往不超过整个响应时间的一两成.如果你真的想极大幅度地减少web页面的响应时间,你应该把注意力放在真正影响终端用户体验的另外八九成的内容上.那这80

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设

android入门开发教程之网络性能的优化

我在麦子学院上android开发的时候,麦子学院android开发老师讲到Android开发过程中经常会涉及到性能优化的问题,应该从基础.网络.测试等各个层面进行整合优化.现在咱们聊聊Android开发之网络性能的优化. 1)避免频繁网络请求 访问server端时,建立连接本身比传输需要跟多的时间,如非必要,不要将一交互可以做的事情分成多次交互(这需要与Server端协调好).有效管理Service 后台服务就相当于一个持续运行的Acitivity,如果开发的程序后台都会一个service不停的