`
shyboy0358
  • 浏览: 35757 次
文章分类
社区版块
存档分类
最新评论

前端优化方法

web 
阅读更多
1:拆分初始化负载

Ajax 和动态 HTML 的日益普及网页上面的 js 和 css 也变得非常庞大, web 程序也变得像桌面程序一样,很大一部分代码不会在启动时候使用,而是采取插件式架构,允许动态加载模块。在一个大型结构复杂的网页上面,为了不影响用户体验,可以把 js 分为两部分,一部分是渲染页面必须的,剩下是一部分。这样也在一定程度上面提高用户体验,给用户第一时间看到完整的页面。再寻找哪些 js 可以被拆分,可以通过一些辅助工具来判断, firebug 就是一个非常好的工具,可以通过查看哪些函数 onload 之前未被使用。通过判断可以把其中一部分拆分出来,但是有些不开始拆分,例如页面的错误处理和业务判断等 js 是不能拆分的,如果要拆分合理必将是一项严谨的工作。

2:优化图片
尽可能使用 png 格式图片

3:规范
1)把 CSS 样式放在页面的上方。
2)将脚本放在底部 ( 包括内联的 )
3)避免在 CSS 中使用 Expressions
4)将 javascript 和 css 独立成外部文件
5)缓存ajax请求(看个例子。一个web2.0邮件客户端可能使用Ajax来下载用户的地址簿来做自动完成使用。如果用户在上次使用这个产品之后一直没有修改过地址簿信息,那么地址簿响应数据可以在cache里面读取,前提是那个Ajax请求返回的时候加了将来时间的Expires和Cache-Control头。浏览器必须知道什么时候用以前的cache内容,什么时候得发起一个新的请求。怎么实现呢?可以将用户地址簿的最后修改时间戳加在请求的URL里面,例如,&t=1190241612这样。如果上一次加载时修改时间没有变化的话,再次发起的请求就会从浏览器的cache里面读取了,这样就消除了额外的HTTP折返请求。如果修改时间变了,那么请求的URL就是新的,在浏览器的cache里面找不到可用的数据,浏览器就重新发起请求,更新整个数据。)

4:减少http请求
将多次请求的内容合并成一次请求(css,js)
5: 反向代理服务器
分享到:
评论

相关推荐

    web前端优化方法

    Web前端优化是提升网站性能和用户体验的关键步骤,它涉及到页面加载速度、资源利用率以及页面的交互体验等多个方面。以下是对标题和描述中提及的优化方法的详细解释: 1. **避免坏的请求**:确保所有资源(如图片、...

    前端面试资料(包含web前端优化方法和js面试常见内容以及一些面试常见问题)

    #### 一、Web前端优化方法 1. **减少HTTP请求** 减少HTTP请求是提升Web性能的重要手段之一。可以通过合并文件、使用CSS Sprites技术等方式来实现。 2. **CSS Sprites** CSS Sprites是一种将多个小图标或背景...

    前端优化的几种方法

    本文将详细介绍几种主流的前端优化方法,包括但不限于优化图片资源、开启网络压缩、利用浏览器缓存、减少重定向请求、使用CDN存储静态资源、减少DNS查询次数以及压缩CSS和JS等内容。 #### 1. 优化图片资源的格式和...

    vue面试题+web前端笔试题面试题汇总+前端优化总结+《Vue-框架开发》真题

    在IT行业中,Web前端开发是不可或缺的一部分,而Vue.js作为一款轻量级的前端JavaScript框架,因其易学易用和强大的功能,深受开发者喜爱。...在实际工作中,不断研究前端优化方法,能有效提升项目的性能和用户体验。

    web前端性能优化

    前端优化的重要性、前端优化的主要方法、推荐前端优化工具

    Web 前端性能优化思路与学习方法

    本篇内容将深入探讨Web前端性能优化的思路与学习方法,结合WebQQ、QQ互联、QQ商家等大型项目研发中的实践经验,提供一套系统的优化框架。 首先,前端性能优化可以从以下几个层面展开: 1. 网络层面优化:优化网络...

    前端性能优化探索.pdf

    下面介绍一些常见的JavaScript性能优化方法: 1. 函数节流:函数节流是指在一定时间内只执行一次函数,比如鼠标滚动事件,如果没有限制,那么每次鼠标滚动都会触发大量事件,导致浏览器卡顿甚至崩溃,而通过函数...

    前端性能优化与实践.zip

    10. **浏览器运行机制**:"知己知彼——解锁浏览器背后的运行机制"可能是对浏览器渲染引擎、JavaScript引擎及工作原理的深入解析,这对于理解性能瓶颈和优化方法至关重要。 这些文档全面覆盖了前端性能优化的多个...

    网站Web前端优化(Html)

    网站Web前端优化主要关注提升网页加载速度、用户体验和性能效率,这一领域对于现代互联网产品至关重要。以下是关于Web前端优化的详细说明: 一、关于Web Web作为一种新媒体,它源自印刷业,但随着互联网的发展,Web...

    前端 - 郭碧青《Web 前端性能优化思路与学习方法》.pdf

    此外,郭碧青也谈到了前端优化在移动端的应用,特别是在手机QQ兴趣部落项目中的实践。因为移动端设备的资源和网络条件通常受限,所以对于性能优化的要求更高。他分享了使用了如React Native和Vue等现代前端框架的...

    web前端面试资料

    ### Web前端面试资料知识点概述 #### 一、前端优化的重要性及目标 前端优化是指通过一系列技术手段提升Web页面性能的过程,旨在改善用户...希望本文介绍的前端优化方法能够帮助开发者构建出更加高效、流畅的Web应用。

    前端性能优化原理与实践.zip

    在前端开发领域,性能...以上这些方法都是前端性能优化的关键点,通过综合运用这些策略,可以显著提升Web应用的性能,提供更优秀的用户体验。在实践中,开发者需要根据项目具体需求和用户行为数据进行有针对性的优化。

    前端性能优化方法与实战

    │ 05 指标采集:白屏、卡顿、网络环境指标采集方法.md │ 06 工具实践:性能 SDK 及上报策略设计.md │ 07 平台实践:如何从 0 到 1 搭建前端性能平台.md │ 08 诊断清单:如何实现监控预警并进行问题诊断.md │ 09...

    前端性能优化指南

    ### 前端性能优化指南 #### 概述 前端性能优化是指通过对网站或Web应用的前端部分进行改进,以提升用户体验的过程。优秀的前端性能优化能够显著提高网页加载速度、减少资源消耗、增强用户交互体验,进而提升整体的...

    前端性能优化——移动端浏览器优化策略

    摘要:前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...

    web前端-Web前端性能优化的研究与应用.pdf

    前端优化的技术方法包括优先级队列、缓存机制、页面压缩、图片优化、JavaScript 优化等。这些方法可以有效地提升 Web 站点的性能。 知识点六: Ajax 异步工作方式的影响 Ajax 异步工作方式使得浏览器的 2 连接请求...

    科技公司WEB前端开发工作述职报告PPT课件.pptx

    - **技术储备**:持续学习,比如掌握更多的前端优化方法,如组件化、模块化开发。 - **团队协作**:加强与运营、设计、后端等团队的沟通,提升项目协作效率。 - **用户体验**:注重细节,如按钮文案的优化,能够...

Global site tag (gtag.js) - Google Analytics