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,如需转载请自行联系原作者
相关文章
|
6月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
642 1
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
463 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
643 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
9月前
|
监控 测试技术 Android开发
App Trace技术解析:传参安装、一键拉起与快速安装
本文从开发者视角解析App Trace技术的关键功能与实现方法,涵盖传参安装、一键拉起和快速安装技术。详细介绍了Android和iOS平台的具体实现代码与配置要点,探讨了参数丢失、跨平台一致性及iOS限制等技术挑战的解决方案,并提供了测试策略、监控指标和性能优化的最佳实践建议,帮助开发者提升用户获取效率与体验。
|
9月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
294 1
|
10月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
389 7
|
10月前
|
前端开发 开发工具 Android开发
小红书APP的全新鸿蒙NEXT端性能优化技术实践
从 2023 年开始,鸿蒙的优势愈发明显,已经成为可与 iOS、安卓媲美的第三大移动操作系统。从一些抖音视频中也可以看出,鸿蒙在流畅性方面甚至在某些层面上超过了 iOS。本次分享的主题是小红书在鸿蒙平台上的工程实践,主要聚焦于性能优化和探索。
760 10
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
504 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
576 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合