`

前端性能优化常见方法

 
阅读更多

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。

  • 内容优化

    (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页面嵌入图像数据 ),合理设置HTTP缓存等。
    (2)减少DNS查找
    (3)避免重定向
    (4)使用Ajax缓存
    (5)延迟加载组件,预加载组件
    (6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
    (7)最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
    (8)避免404:HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。
  • 服务器优化

    (1)使用内容分发网络(CDN):把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
    (2)GZIP压缩
    (3)设置ETag:ETags(Entity tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
    (4)提前刷新缓冲区
    (5)对Ajax请求使用GET方法
    (6)避免空的图像src
  • Cookie优化

    (1)减小Cookie大小
    (2)针对Web组件使用域名无关的Cookie
  • CSS优化

    (1)将CSS代码放在HTML页面的顶部
    (2)避免使用CSS表达式
    (3)使用<link>来代替@import
    (4)避免使用Filters
  • javascript优化

    (1)将JavaScript脚本放在页面的底部。
    (2)将JavaScript和CSS作为外部文件来引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。
    (3)缩小JavaScript和CSS
    (4)删除重复的脚本
    (5)最小化DOM的访问:使用JavaScript访问DOM元素比较慢。
    (6)开发智能的事件处理程序
    (7)javascript代码注意:谨慎使用with,避免使用eval Function函数,减少作用域链查找。
  • 图像优化

    (1)优化图片大小
    (2)通过CSS Sprites优化图片
    (3)不要在HTML中使用缩放图片
    (4)favicon.ico要小而且可缓存
    

    本文仅用来记录自己在学习中的总结和思考。参考:http://developer.yahoo.com/pe...

分享到:
评论

相关推荐

    前端性能优化探索.pdf

    前端性能优化探索 前端性能优化是当前互联网开发中的一个重要话题。随着互联网技术的快速发展,Web前端技术也逐渐成为了互联网开发的重要一环。然而,在如今这个追求极致体验的时代,我们不仅要实现业务需求,更...

    前端性能优化与实践.zip

    "前端性能优化与实践.zip"这个压缩包包含了一系列关于前端性能优化的深度文章和教程,涵盖了浏览器缓存机制、首屏加载优化、服务端渲染、事件处理策略、图片优化、性能监测工具以及CDN的工作原理等多个方面。...

    web前端性能优化

    针对web前端性能低下的问题,王成、李少元、郑黎晓、缑锦、曾梅琴、刘慧敏等...随着技术的不断进步,前端性能优化的方法和工具也在不断演进,Web开发者需要持续关注新技术,不断学习和实践,才能跟上行业发展的步伐。

    前端性能优化:掌握解决方案.zip

    本资源"前端性能优化:掌握解决方案.zip"提供了一种系统性学习和实践前端性能优化的方法。下面,我们将详细探讨这个主题,涵盖多个关键知识点。 首先,前端性能优化的基础在于理解网页加载流程。当用户访问一个页面...

    前端性能优化.pptx

    根据给定的文件信息,我们可以将前端性能优化的相关知识点总结如下: ### 一、概述 前端性能优化是指通过各种技术和策略提高网站或Web应用的加载速度、响应速度以及整体用户体验的过程。良好的前端性能不仅能够...

    web前端性能优化.docx

    Web 前端性能优化技术指南 Web 前端性能优化是指通过各种技术手段来提高 Web 应用程序的加载速度和响应速度,以提高用户体验。下面是 Web 前端性能优化的几个关键技术点: 一、加载优化 加载优化是指通过减少加载...

    Web应用前端性能优化浅析

    对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。...本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S系统前端性能优化的常见规则和有效方法。

    大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 带书签完整版

    以下是一些常见的前端性能优化策略: **2.1 延迟渲染** - **2.1.1 挑战和困难**:某些情况下,由于页面内容过多或资源过大,页面加载速度变慢。 - **2.1.2 解决方案**:通过将非关键资源延迟加载来加快页面的初次...

    大型网站性能优化实战

    具体内容包括:基于用户体验的性能优化要素、前端性能优化实战、网站性能分析、服务端性能优化、TCP优化、DNS优化、CDN优化、大型网站性能监控体系、大型网站容量评估、高性能系统架构模式、大促保障体系、数据分析...

    vue前端性能优化02

    "vue前端性能优化02"这个主题可能涵盖了多个方面的优化策略,我们将会深入探讨这些关键点。 首先,我们要理解Vue.js的核心原理,它采用数据绑定和组件化思想,通过Virtual DOM实现高效的页面更新。然而,随着应用...

    _大前端进阶之道:前端性能优化,前端经典面试题,node面试题,webpack性能优化.zip

    在IT行业中,前端开发是至关重要的领域,而前端性能优化、面试准备以及工具的高效使用则是提升开发者技能的关键。这个压缩包 "_大前端进阶之道:前端性能优化,前端经典面试题,node面试题,webpack性能优化.zip" ...

    前端性能优化与Web安全

    在现代Web开发中,前端性能优化与Web安全是两个至关重要的主题。性能优化关乎用户体验,而Web安全则关乎用户的数据安全。以下将详细介绍这两个领域的关键知识点。 **性能优化** 1. **UI篇**: - 图像处理:根据...

    web前端性能测试

    常用的前端性能测试工具 - **YSlow/PageSpeed**:通过对网页中的JS、CSS、Image等元素进行静态分析,提供详尽的优化建议。 - **DynaTrace**:提供动态分析能力,不仅记录请求和文件传输时间,还监测浏览器渲染、...

    最新大厂前端面试题-面试性能优化篇.docx

    前端性能优化面试指南 性能优化是前端开发中非常重要的一个方面,在大厂面试中也是常见的问题。本文将从多方面角度讨论性能优化问题,为读者提供一个系统的性能优化指南。 一、性能优化的重要性 性能优化是前端...

    前端工程与性能优化[归纳].pdf

    前端性能优化不仅仅局限于资源优化,还包括页面结构的优化,如将样式表放在头部以阻塞渲染,将脚本放在底部以避免阻塞DOM解析,以及尽早刷新文档的输出,确保用户能够尽早看到页面内容。 在前端工业化和工程化的...

    前端资源优化优化优化解析

    ### 前端资源优化解析 在现代互联网应用开发中,前端资源优化是提升用户体验、提高...总之,前端资源优化是一项持续的工作,需要开发者不断地学习新技术、新方法,并将其应用于实际项目中,以实现最佳的性能优化效果。

    性能优化分享

    以上内容涵盖了从理论到实践的性能优化全过程,旨在帮助开发者全面了解性能优化的重要性和实施方法。通过合理的工具选择和有效的代码优化技巧,可以显著提升软件的整体性能,为用户提供更佳的服务体验。

    大规模网站性能优化方法-高性能网站性能优化

    本篇文章将详细探讨大规模网站性能优化的方法,旨在提高网站的高性能表现。 一、前端优化 1. **压缩与合并资源**:通过合并CSS和JavaScript文件,减少HTTP请求的数量,同时对代码进行Gzip压缩,可以显著减少页面...

    网站性能优化1

    综上所述,网站性能优化是一个系统工程,涉及前端、后端和网络层面的多个环节。通过综合运用这些技术,我们可以显著提升网站的加载速度和用户体验。"高性能网站建设指南(上1).pdf"中应该会详细解析这些概念,并给出...

    网站前端性能优化之javascript和css篇

    网站前端性能优化是提升用户体验和网站加载速度的关键环节,尤其在JavaScript和CSS方面,有很多策略可以采用。首先,关于CSS的优化, Yahoo团队提出的第一点是将样式表置于文档的`&lt;head&gt;`区域。这样做可以使得页面...

Global site tag (gtag.js) - Google Analytics