好多前端工程师觉得网站建设仅是达成设计稿罢了 ，可是 ，在有着实际项目的普陀区此地 ，前端工作对政府网站的服务成效以及市民具备的体验起到了决定性作用 。

前端性能优化策略

我们有所察觉，在普陀区规划局官网建设的那段时间里，可以察觉到，页面加载速度一旦超过3秒，就会导致40%的用户选择离开。之后，借助实行图片懒加载技术，将首屏图片从原来的2MB，压缩到200KB以内，并且运用Webpack针对CSS和JavaScript文件进行树摇优化，把未运用的代码块舍弃。最终，页面加载时间历经改变，从4秒，缩减到了1.5秒。

先构建了静态资源缓存机制，通过配置nginx服务器去设置Expires头，让CSS文件在用户浏览器缓存30天，让JS文件在用户浏览器缓存30天，当用户再次访问网页的时候，这些资源直接从其本地加载，以此来减少HTTP请求次数，经实测数据显示，利用这种方案能够使重复访问的页面加载速度提升60%以上。

多设备兼容性解决方案

对网站而言，普陀区官网要兼容自Windows7起直至macOS的各异操作系统，还得兼容从360浏览器到Chrome的主流浏览器 。我们秉持这样的开发理念号外资源网，先保证在老旧浏览器如IE11上网站基础功能正常，此后为现代浏览器增添动画特效等增强功能，这是渐进增强的开发理念 。

我们针对移动设备，采用Flexbox布局，还采用Grid布局，用Grid布局替换往昔的float布局，配合viewport元标签设置，网站鉴于iPhoneSE直至iPadPro等各类尺寸屏幕，皆可达成完美的显示效果，经过两个月的测试调整，最终实现网站于15种不同设备上的显示保持一致。

前端安全防护实践

在用户数据保护方面，对于所有表单提交情形，我们都实施CSRF令牌验证举措，通过这样的方式来防范跨站请求伪造情况发生，特别是在规划许可证申请页面这个特定场景下，除了具备基础的HTTPS加密手段之外，还额外增加了输入内容过滤环节，以此来防止XSS攻击导致用户会话信息被窃取。

运用安全扫描工具 ，按照固定周期 ，对前端依赖包有漏洞检测 ，去年 ，共对12个有安全风险的npm包做了更新且修复 ，严格限定第三方统计代码加载步骤 ，防止因第三方脚本致使用户访问行为数据泄露 ，进而保证符合《网络安全法》要求 。

用户体验设计方法

先对依据用户行为数据展开的情况做了分析，之后，我们将“规划公示”模块置于最常被访问位置，也就是首页首屏那儿，还把“业务办理”模块放在最常被访问位置，这位置是首页首屏之处，此外，开展了明显可见的视觉引导设计，给每个服务入口配备图标，给每个服务入口配备附带简短文字说明，借助如此配备方案，能让处于不同年龄阶段的用户迅速明白对应的功能用途。

针对表单设计方面过去要花20分钟去填写的许可证申请流程，我们进行了拆分，把它拆分成5个步骤，而且实时显示进度条，每一个步骤只要求填写必要的信息，还配合适当的提示文字，最终表单提交的成功率从55%提升到了85%。

前端开发流程规范

我们的团队 ，利用Git来展开代码版本管理方面的工作 ，定下了每个功能都要创建单独分支这一规定 ，在经过代码审查以及自动化测试之后 ，才会将其合并到主分支 ，每周星期四召开代码评审会议 ，分享最佳实践还有改进方案从而能持续提高代码质量 。

有封装，它涉及按钮、导航栏、表单等常用界面元素，要将其变成可复用组件，这是建立组件库的又一要点，这样做既能保持设计一致性，又能提升开发效率，现在构建一个常规页面花费的时间，从原来的3天，如今已缩短至1天 。

持续优化机制

我们于网站部署了用户行为分析工具，针对各页面停留时间，进行实时监控，又对点击热力图实施实时监控，数据呈现，“规划方案公示”页面，存在退出率偏高的情况，借助增加相关规划解读，以及增加示意图的方式，该页面平均停留时间，由30秒，延伸至90秒。

每季度，我们都会展开针对位于普陀区的居民的邀请行动，促使他们参与用户体验测试，深入观察他们处理进行网站使用行为时的流程，而此流程需完成特定任务。基于测试所反馈回来的情况，我们开展重新设计方面的相关工作，针对搜索功能进行专门的重新设计操作，增添设定了智能提示以及对应的筛选条件，由此使得信息查找效率得到提高，令提高幅度达到了50% 。

在普陀区官方网站前端优化的整个过程当中，您觉得，对用户体验造成影响的元素，到底是页面加载的速度那方面呢，还是信息架构的设计这一块呢，又或者是交互细节的处理这一情况呢？欢迎去评论区分享您个人自己的看法，要是您认为这些经验是有一定作用的，那么请点赞给予支持，并且把它分享给更多的前端开发者 。