移动Web前端性能与图片优化的研究

发布时间：2024-01-12 08:13

　　近年来,随着智能移动设备的普及,移动互联网成为了互联网发展的新动力,同时也为移动学习的跨越式发展带来了新契机。移动设备间的差异和无线网络资源的稀缺决定在移动学习开发时必须关注应用的性能问题。在纷繁复杂的移动学习Web站点中,用户更倾向于使用可以迅速响应、完美交互的优秀产品。这就形成了对web站点进行优化的迫切需求。Web站点优化可分为后端优化和前端优化两部分。研究表明,用户响应时间中只有10%～20%是花在了下载HTML文档上,其余的时间则花在了下载页面中的所有组件上。也就是说,如果关注前端性能并将其响应时间减少一半,整体响应时间可减少40%～45%；加之国内在后端的优化技术已经比较成熟,所以本文专注于Web前端的性能优化。 本文首先介绍了移动Web前端优化的国内外研究现状,提出进行移动web前端性能优化的必要性。然后对Web的工作方式如HTTP协议、浏览器工作机制等和移动开发的特殊性进行介绍,web工作方式构成了在移动学习开发过程中进行性能优化的现实依据和理论基础。本文中间部分从html、CSS、JavaScript、图片和缓存五个方面,围绕内存和CPU两个核心主题,结合移动学习开发...

【文章页数】：56 页

【学位级别】：硕士

【文章目录】：
摘要
ABSTRACT
第一章 绪论
    1.1 课题背景
    1.2 国内外现状分析
        1.2.1 国内现状
        1.2.2 国外现状
    1.3 本文所做工作
    1.4 论文章节安排
第二章 WEB前端性能优化概述
    2.1 网站优化
        2.1.1 搜索引擎市场营销
        2.1.2 网站性能优化
    2.2 前端性能优化
        2.2.1 站点页面的组成
        2.2.2 客户端工作机制
        2.2.3 HTTP协议
    2.3 移动WEB开发的特殊性
        2.3.1 屏幕尺寸多样化
        2.3.2 设备性能
    2.4 本章小结
第三章 移动WEB前端性能优化的方案
    3.1 HTML的优化处理
        3.1.1 减少HTML的重新布局与重绘
        3.1.2 HTML的合法性测试
        3.1.3 HTML的压缩处理
    3.2 CSS的优化
        3.2.1 CSS文件放在文档顶部
        3.2.2 编写高校的CSS选择器
        3.2.3 利用CSS3的media query
        3.2.4 不要过分信任和滥用CSS3
    3.3 JAVASCRIPT的内存控制
        3.3.1 DOM事件处理
        3.3.2 数据访问
        3.3.3 算法优化和流程控制
        3.3.4 JavaScript的加载与执行
    3.4 图片的优化
        3.4.1 简单的优化处理
        3.4.2 具体的无损图像优化
        3.4.3 CSS Sprites及其优化
        3.4.4 移动设备对图片的特殊要求
    3.5 利用缓存技术
    3.6 本章小结
第四章 CSS SPRITES制作算法的提出与优化
    4.1 常规算法
        4.1.1 算法的平凡解
        4.1.2 常规算法
        4.1.3 不重叠地放置矩形
    4.2 算法改进
        4.2.1 减小闭合矩形的宽度时有效增加高度
        4.2.2 无法放置所有的矩形时有效增加闭合矩形的高度
        4.2.3 权衡外接矩形的大小与求解时间
    4.3 算法测试
        4.3.1 评测标准
        4.3.2 测试结果
    4.4 本章小结
第五章 总结与展望
    5.1 总结
    5.2 展望
参考文献
攻读硕士学位期间参与的项目
致谢



本文编号：3877859