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…

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

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

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

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

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

一.箭头函数 箭头函数(Arrow Function)是ES6提供的一个很实用的新功能,与普通函数相比,不但在语法上更为简洁,而且在使用时也有更多注意点,下面列出了其中的三点: (1)由于不能作为构造函数,因此也就没有元属性(new.target)和原型(prototype属性). (2)函数体内不存在arguments.super和this,即没有为它们绑定值. (3)当需要包含多个参数时,它们的名称不可重复. 1)语法 箭头函数由三部分组成:箭头(=>).参数和函数体,省略了名称和funct…

公司目前的业务会接触比较多的音视频,所以有必要了解一些基本概念. 文章涉及的一些源码已上传至 Github,可随意下载. 一.基础概念 本节音视频的基础概念摘自书籍<FFmpeg入门详解 音视频原理及应用>. 1)音频 声音的三要素为频率.振幅和波形,即声音的音调.声波的响度和声音的音色. 音频是一种利用数字化手段对声音进行录制.存放.编辑.压缩和播放的技术,相关概念包括采样.量化.编码.采样率.声道数和比特率等. 采样是指只在时间轴上对信号进行数字化. 量化是指在幅度轴上对信号进行数字化.…