一.用户体验 用户体验(UE/UX)是指一个人使用一个特定产品.系统或服务时的行为.情绪与态度,还包含用户对于系统的功能.易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法. 用户体验是动态的,由于不断变化的使用情况.不停变化的各个系统,以及变化发生背后的情境与脉络,因此它是随着时间而不断地变化着. 1)Loading动画 有一份调查指出,用户能够忍受加载的最长时间在:6到8秒.8秒是一个临界值,如果加载时间在8秒以上,大部分访问者最终会选择放弃,除非他一定要打开那…

Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.<高效前端>.<高性能JavaScript>.<CSS重构>等书籍,以及<2020前端性能优化清单>等网络资源. CSS优化包括减少样式量.合理使用CSS3特性.对样式分类.采用预处理器等. 一.CSS选择器 1)匹配优化 由于CSS选择器是从右往左进行匹配,因此…

一.语言 1)慎用全局变量 当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢. 并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误. 0 == '' //true 0 == '0' //false 3)简写 简写的方式很多,此处只会列举其中的几种,例如用三目运算替代if-else语句,或用&&或||符号替代条件语句. if (count > 1) { ++a; } else { --a; } // 简写 count > 1 ? (++a)…

一.图像 1)响应式图像 浏览器根据屏幕大小.设备像素比.横竖屏自动加载合适的图像. 响应式的功能可以通过srcset和sizes两个新属性实现. 前者可指定选择的图像以及其大小,后者会定义一组媒体条件并声明填充的宽度. 在下面的示例中(在线查看效果),浏览器会先查看设备宽度,然后检查sizes列表中哪个媒体条件第一个为真,再查看该媒体查询的填充宽度,最后从加载的srcset列表中引用宽度最接近的图像. <img srcset="elva-fairy-320w.jpg 320w, elva…

最近阅读了很多优秀的网站性能优化的文章,所以自己也想总结一些最近优化的手段和方法. 个人感觉性能优化的核心是:减少延迟,加速展现. 本文主要从产品设计.前端.后端和网络四个方面来诉说优化过程. 一.产品设计 在网上看到一句话:好的性能是设计出来的,而不是优化出来的. 感觉好有道理,如果将性能瓶颈扼杀在摇篮里,那么后期的维护成本将变得非常低,并且在避免改造后,都不需要浪费资源了. 1)聊天改版 最近公司有个聊天活动做改版,改版上线后惊喜的发现,监控数据居然减少了将近20W. 更深一步的探究,才知道…

在遇到一个页面性能问题时,我理解的优化闭环是:分析.策略.验证和沉淀. 分析需要有分析数据,因此得有一个性能监控管理. 策略就是制订针对性的优化方案,解决当前遇到的问题. 验证的对象上述策略,判断方案是否有效,同样需要数据支撑. 沉淀就是将解决过程文档化.通用化,能够总结成一套实际方案.优化规则等. 这其中非常关键的一步是需要采集到性能数据,并且得有个可视化后台查看数据变化. 在之前已经自制了一个性能优化平台,采集前端性能参数的 SDK 叫 shin.js. 一.优化的三部分 在文章开头,我想先…

古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理.为此,开辟了<ES6躬行记>系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友. 在ES6之前的版本中,用于声明变量的关键字只有var,并且没有块级作用域,只有函数作用域和全局作用域,但在ES6中已改变…

ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向…

在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端应用中,每个HTML页面都会对应一条URL地址,当访问某个页面时,会先请求服务器,然后服务器根据发送过来的URL做出处理,再把响应内容回传给浏览器,最终渲染整个页面.这是典型的多页面应用的访问过程,由服务器控制页面的路由,而其中最令人诟病的是整页刷新,不仅存在着资源的浪费(像导航栏.侧边栏等通用部分…

低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台.让具有不同经验水平的开发人员可以通过图形化的用户界面,通过拖拽组件和模型驱动的逻辑来创建网页和移动应用程序. 低代码的核心是呈现.交互和扩展,其中呈现和交互需要借助自行研发的渲染引擎实现.而此处的扩展特指物料库,也就是各类自定义的业务组件,有了物料库后才能满足更多的场景. 在 4 个月前研发过一套可视化搭建系统,当时采用的是生成代码的方式渲染页面.而本次研发采用的则是运行时渲染,功能比较基础,基于Rea…