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,如需转载请自行联系原作者
相关文章
|
5天前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
25 7
|
7天前
|
开发框架 中间件 API
揭秘!Tornado技术如何颠覆传统,解锁Web开发速度极限?你的高效Web应用就差这一步!
【8月更文挑战第31天】Tornado 是 Python 生态中的一款高性能 Web 开发框架,以其非阻塞 I/O 模型和高并发处理能力著称。它采用协程和异步 I/O 实现了高效的并行处理,使服务器能同时处理大量连接。
16 1
|
7天前
|
测试技术 开发者 Python
Bottle技术:如何用Python打造小巧而强大的Web应用,让你一鸣惊人?
【8月更文挑战第31天】本文介绍了Bottle——一种轻量级Web框架,以其简洁的语法和强大功能受到开发者喜爱。文章涵盖Bottle的核心概念(路由、模板、请求对象),并展示了其简单易用的特性及快速开发能力。通过遵循最佳实践,开发者能够高效地利用Bottle创建高质量Web应用,迎接未来Web开发的挑战。
|
7天前
|
测试技术 Python
Bottle技术:如何用Python打造小巧而强大的Web开发利器?
【8月更文挑战第31天】Bottle是一个用Python编写的轻量级Web框架,设计简洁、快速且小巧,适用于快速开发Web应用程序。其主要特点包括简单易学、快速开发、小巧轻量及强大的功能,如路由、模板和表单验证等。Bottle的核心概念包括路由、模板和请求对象,可通过示例了解其基本用法。此外,合理使用路由、编写测试和利用Bottle扩展等最佳实践有助于更高效地进行Web开发。随着Bottle生态的不断发展,它将在未来Web开发中扮演更重要的角色。
14 1
|
9天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
33 3
|
10天前
|
负载均衡 算法 应用服务中间件
负载均衡技术在Web服务器集群中的应用
【8月更文第28天】随着互联网的发展和用户对Web服务需求的增长,单台服务器很难满足大规模访问的需求。为了提高系统的稳定性和扩展性,通常会采用Web服务器集群的方式。在这种架构中,负载均衡器扮演着至关重要的角色,它能够合理地分配客户端请求到不同的后端服务器上,从而实现资源的最优利用。
30 2
|
12天前
|
前端开发 JavaScript 开发者
震惊!Web 前端 href 与 src 竟有如此差异,快来一探究竟,掌握热门技术核心要点
【8月更文挑战第26天】在Web前端开发中,`href`与`src`是两个常用属性,但其差异常被忽视。`href`(超文本引用)用于创建文档间的链接关系,如链接至外部网页或引入CSS文件;`src`(来源)则用于在文档内嵌入资源,如图片或JavaScript文件。两者在使用场景及加载机制上有所不同:`href`支持并行下载且不阻塞渲染,适合非关键资源加载;而`src`加载时会暂停页面渲染直至资源加载完成,适用于如图片和脚本这类对页面显示至关重要的资源。因此,正确理解并运用这两个属性对于保障网页性能和用户体验至关重要。
36 3
|
12天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
29 2
|
1天前
|
关系型数据库 Java MySQL
"解锁Java Web传奇之旅:从JDK1.8到Tomcat,再到MariaDB,一场跨越数据库的冒险安装盛宴,挑战你的技术极限!"
【9月更文挑战第6天】在Linux环境下安装JDK 1.8、Tomcat和MariaDB是搭建Java Web应用的关键步骤。本文详细介绍了使用apt-get安装OpenJDK 1.8、下载并配置Tomcat,以及安装和安全设置MariaDB(MySQL的开源分支)的方法。通过这些步骤,您可以快速构建一个稳定、高效的开发和部署环境,并验证各组件是否正确安装和运行。这为您的Java Web应用提供了一个坚实的基础。
9 0
|
7天前
|
Java Maven Apache
Struts 2 配置不再难!跟着这篇详解从零搭建开发环境
【8月更文挑战第31天】要搭建Struts 2开发环境,需先安装JDK,然后下载并解压Struts 2二进制包,将其核心库`struts2-core`添加到项目类路径中。使用Maven或Gradle时,可在配置文件中添加依赖。接着,在`web.xml`中配置Struts 2过滤器及其映射。`struts.xml`通常位于`src/main/resources`目录下,用于定义动作映射和拦截器等核心配置。最后,通过配置类路径下的`log4j.properties`文件,可以设置Struts 2的日志记录级别及输出方式。完成以上步骤后,即可开始基于Struts 2框架进行Web应用开发。
23 0
下一篇
DDNS