需求： 开发设备使用 AP模式的配网页； 要求页面小，美观，有简单动效，性能高。
配网页表单就三个字段 ，非常小的页面。在网上找到一款模块与产品调性还蛮相符。且动效可以，基本可以拿来就用；不足的是页面用的 jQuery 还有好多JS包，页面大小超过几百KB了。要做的就是检查删除CSS，JS文件后，页面功能的影响。
分享一个抽取使用到的font icon文件的库： font-spider 这个库非常棒，可以检测页面用到的font-awsome的内容，按需引入。我的页面就用了两个图标，一下子少了几百k。
如果希望页面能优化到极致，工程化是最佳选择，不管是否一个小页面，还是多个页面。因为工程化后，可以使用构建工具带来的好处，灵活度非常大。如css有很多去无用css的工具、JS 有 tree shake、图片压缩、转base64、部分定制化脚本等。且管理方便。写好发布脚本，一键打包，各种优化一一执行，效率高，性能好。
前提：多页面vite项目给native提供h5页面，设置离线缓存优化体验 实现service worker离线缓存...
现在H5和原生的交互在日常开发中经常用的，很多APP为了优化APP，更加便捷灵活的更新页面，有很多页面交给了H5来...
小程序跳转到 H5 页面 H5 页面跳回小程序 在 h5 页面的任何点击事件中： 在H5页面引入 https://...
移动Web优化专场主要讲在移动设备上如何优化H5，使得Web运行的性能能够尽可能的接近Natvie。 QQ移动页面...
1.优化性能（将UIWebView替换为WKWebView） 由于h5在UIWebView中的性能真的不行，页面跳...
HTML5页面 H是第五代HTML，也是H5语言制作的一切数字化产品 为什么做H5页面 移动优化、产品社会化、交互...
H5页面跳转原生页面，原生页面使用通知Notifacation通知H5页面某个动作完成，然后pop回H5页面，在H...
一、H5页面简介 1. H5页面元素定位引入 在混合开发的APP中常有内嵌的H5页面，对于H5页面元素定位，其前所...
一、H5页面简介 1. H5页面元素定位引入 在混合开发的APP中常有内嵌的H5页面，对于H5页面元素定位，其前所...
H5一般分为单页应用和多页面应用 H5单页面 在H5单页面中注入JSContext可在UIWebViewDeleg...
本文标题：H5页面优化
本文链接：https://www.haomeiwen.com/subject/vgjtsktx.html
网友评论