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

前端优化方法

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前端优化的一些自己从网上参考的方法然后总结出的内容

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

    个人整理的前端面试资料,内含js常见面试内容和web性能优化方法以及一些其他的在面试过程中个人被问到过的问题。

    前端优化的几种方法

    前端优化的几种方法,里面包含了前端主流的几种优化方法

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

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

    web前端性能优化

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

    前端性能优化方法与实战

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

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

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

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

    郭碧青,就职于腾讯,现任WEB 高级前端工程师一职。作为行业享有盛名的大咖,郭碧青行事低调,对工作热情饱满,多次受邀作为嘉宾出席各类大会,并发表了精彩演讲。

    WEB应用前端优化技术与手段策略

    前端优化技术方法有很多,比如页面加载、缓存、图片压缩、减少HTTP请求、JavaScript 优化、CSS、搜索引擎优化、网站运营优化等等

    Web应用前端性能优化浅析

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

    一种优化Vue前端表格组件渲染性能的方法及系统.pdf_文档整理可打印.zip

    一种优化Vue前端表格组件渲染性能的方法及系统.pdf_文档整理可打印.zip

    高效前端:Web高效编程与优化实践_机械工业出版社; 第1版 (2018年1月1日) 完整版-未加密

    全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...

    CN110728245A用于VSLAM前端处理的优化方法装置电子设备及存储介质 .pdf

    CN110728245A用于VSLAM前端处理的优化方法装置电子设备及存储介质 .pdf

    前端性能优化

    当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象、类、字符串、数字和方法都需要分配和保留内存。语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节。 许多功能无需考虑内存管理即可实现,但却忽略...

    提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,...

    大巧不工Web前端设计修炼之道.pdf

    此外,《大巧不工:Web前端设计修炼之道》还讲解了前端性能的测试和度量方法,总结了大量前端性能优化技巧。 《大巧不工:Web前端设计修炼之道》适合于经验还不够丰富的前端工作者(前端设计师、前端开发工程师、前端...

    web前端性能优化进阶路

    本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结。希望对正在从事这个领域研究的前端同学能有所帮助。  简单的说,我们的性能优化实践分为三个...

    前端性能优化知识图谱指导

    优化JS性能的方法包括但不限于以下几个方面: 代码优化:通过减少不必要的计算、避免重复操作、合并代码等方式来简化和优化代码,减少不必要的性能消耗。 减少网络请求:通过合并和压缩JavaScript文件,减少网络请求...

    高效前端:Web高效编程与优化实践

    全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...

Global site tag (gtag.js) - Google Analytics