web app 的技术参考 -- 来自 【百度移动建站指南】

简介:

优化页面性能


  考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率, 降低页面加载时间
 下面的内容来自百度,然后我自己做了笔记。另外可参考 这个系列的文章

减少访问请求数

  • 从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等。
这个好理解,二进制数据太占流量。

 

  • 资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。
资源合并,只用一次请求,解决问题。 压缩,是将文件大小降低,比如css,js去空白。
至于压缩,涉及到的内容较为复杂一些:参考《 用 HTTP 压缩加快 Web 数据的发送》《 配置Tomcat,Apache的gzip压缩(HTTP压缩)来提高浏览网站速度》《 【HTTP】Fiddler(一) - Fiddler简介

 

  • 静态资源(Css、Js、Image)懒加载

参考一下这篇文章《让我们再聊聊浏览器资源加载优化

 

  • 异步执行inline脚本

不懂,网上东西也不多,后续跟进。

  • 避免重复的资源请求

最常见的就是,jQuery引用了好几次。

  • 缩小cooike

为什么呢?宽带占得过多,还是很消耗资源?

  • 设置连接方式为keep-alive

谈HTTP的KeepAlive

  • 减少DNS查询

优化网站设计(九):减少DNS查找的次数

  • 移动端可见区域是有限的,采用延迟加载方式

和上面“静态资源(Css、Js、Image)懒加载”有什么区别

  • 开启服务器压缩(gzip方式)
上面已经说过,有点多余了
 
 
 

优化图片处理

  1. 图片走CDN
  2. 少用动态gif图
  3. 图片不适宜过多及过大
  4. 零碎图片使用css Sprite技术一次性下载
  5. 避免使用bmp图片
  6. 图片压缩
1. 要钱。 2.3.5.6 可以在后台用插件控制图片上传的规格
 
 

优化HTML

  1. 减少HTML标签,减少不必要的嵌套
  2. 废弃table标签
  3. 减少DOM深度
  4. 压缩HTML,去掉注释,空格换行等信息
  想起了阮老师的《 也许,DOM 不是答案
 
 

优化JS

  1. 使用临时变量或者数组存储document.images及document.forms等集合数据
  2. 慎用with语法
  3. 使用AJAX缓存
  4. 避免eval及Function语法
  5. 避免使用inlineScript
  6. 异步、底部加载js
  7. 合并压缩js
  8. 字符串连接使用数组的join方式

本文转自二郎三郎博客园博客,原文链接:http://www.cnblogs.com/haore147/p/5489802.html,如需转载请自行联系原作者
相关文章
|
4月前
|
存储 安全 关系型数据库
后端技术:构建高效稳定的现代Web应用
【10月更文挑战第5天】后端技术:构建高效稳定的现代Web应用
111 1
|
3月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
59 6
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
78 3
|
3月前
|
机器学习/深度学习 监控 安全
量化合约对冲策略交易app系统开发技术规则
量化合约对冲策略交易APP系统开发技术规则涵盖系统架构设计、量化策略实现、交易管理、风险管理、用户界面设计及性能优化等方面。通过模块化设计、分布式架构、数据持久化、策略开发、算法交易、回测优化、订单管理、持仓监控、资金安全、风险控制、实时监控、安全审计、界面设计、反馈机制、多语言支持、响应速度、资源优化和兼容性等措施,确保系统的稳定、安全、高效和易用。
|
3月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
107 1
|
3月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
3月前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
163 2
|
3月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
4月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
105 0
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 5
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 6
    电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
  • 7
    【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
  • 8
    微信小程序 app.json 配置文件解析与应用
  • 9
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 10
    轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地