做成一件事并不难,难的是做好一件事。前端性能优化也是同样的道理,性能是前端编码规范、网络层面、辅助工具等相互作用的结果,这是一个兼顾广度和深度的问题,优化好了可以加快首屏加载速度提高用户留存率,节省服务器资源降低成本等,也是区分初高级前端工程师的重要标准。
这是平时工作注意好一些代码规范即可带来的性能优化,比如css放头部, js放在尾部等,是时间成本最低的性能优化方法。编码规范也涉及很多方面,html、css、js、Vue.js、React.js
还有ESLint
规范等,具体可查看:https://guide.aotu.io/index.html
Http/1.0每次请求都需要建立新的TCP连接,连接不能复用。Http/1.1新的请求可以在上次建立的tcp连接之上发送,连接可以复用,减少重复进行tcp三次握手,四次挥手的开销,提高效率。主要的思路是在发送http的请求头中设置Connection: keep-alive,当前的url与上一次下载的url之间进行对比,如果host相同的话,则用上一次的socket_id。否则关闭上一次的socket,重新连接服务器,获取新的socket。所以,url的文件,需要进行排序,将同一个站点的url放在一起即可。
JS、CSS 文件合并、服务器开启 gzip、雪碧图,通常需要借助一些工具,比如webpack
进行打包,以及在线雪碧图生成器
设置http
请求头Cache-Control、ETag、Expires、Last-Modified
等字段进行协商缓存、强制缓存等操作
CDN
:全称: Content Delivery Network
或Content Ddistribute Network
,即内容分发网络,能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。各个库比如Boostrap、Vue.js均有 CDN 链接
使浏览器试图在用户访问链接之前解析域名,在head
中添加对应属性即可,如下
将 HTML、API 接口,静态资源等部署在不同的域名
作用:二进制分帧、多路复用连接、服务端推送、头部压缩
这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发
定义时若变量是一个对象,循环时需要频繁使用其一个属性,可再定义一个局部变量存储
很多移动端的页面都会监听 touchstart 等 touch 事件,由于 touchstart 事件对象的 cancelable 属性为 true,也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止,那它的默认行为是什么呢,通常来说就是滚动当前页面(还可能是缩放页面),如果它的默认行为被阻止了,页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault(),它能做的只有等监听器执行完后再去执行默认行为,而监听器执行是要耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。视频里也说了,即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。有 80% 的滚动事件监听器是不会阻止默认行为的,也就是说大部分情况下,浏览器是白等了。所以,passive 监听器诞生了,passive 的意思是“顺从的”,表示它不会对事件的默认行为说 no,浏览器知道了一个监听器是 passive 的,它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。passive
设置为true
可以大幅提高移动端的滑动流畅度
document.addEventListener(type, listener, {
capture: false, // 等价于以前的 useCapture 参数
passive: false, // Firefox 和 Chrome 已经实现
once: false // 表明该监听器是一次性的,执行一次后就被自动 removeEventListener 掉,还没有浏览器实现它
})
使用Web Worker
为JS
创造多线程环境,主线程创建Worker
线程,将一些计算密集型或高延迟的任务分配给后者运行
Web Assembly特别适合那些需要非常高性能的Web产品,提供了一种转换机制,把高级语言(C、C++、Go)编译为Web Assembly字节码,以便在浏览器中运行,能够大幅提高运行效率。 使用WebAssembly对浏览器API进行任何调用时,目前还需要JS进行交互,用JS作为入口。未来WebAssembly可能被浏览器内置支持,并使其能够直接调用DOM,Web Workers或其他浏览器API等
注意事项:同源限制、DOM 限制、不能读取本地文件、使用消息通信、不能使用alert、confirm、prompt
设置了Access-Control-Allow-Origin后,简单请求可以一次完成,复杂请求会多一次OPTIONS操作 1、人为设置了对CORS 安全的首部字段集合之外的其他首部字段。该集合为: –Accept –Accept-Language –Content-Language –Content-Type –DPR –Downlink –Save-Data –Viewport-Width –Width 2、请求头Content-Type 的值不属于下列之一: –application/x-www-form-urlencoded –multipart/form-data –text/plain
注意优先级,慎用!important
,样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。
写法注意点:
特别是
for
循环中js编写html代码时直接定义样式类名到所需要作用的元素,之后尽量用一个选择器写样式,可以大幅提高渲染效率
CSS3一些新特性能带来酷炫的视觉效果,但对设备性能有一定要求
Performance API用于精确度量浏览器的性能表现,它能提供微秒级的时间。
计算setTimeout
设置1s
延迟执行的实际时间
Progressive Web App,由Google 在2016年提出。PWA并不是单指某一项技术,可以把它理解成是一种思想和概念,目的就是对标原生app,将Web应用通过一系列的技术去优化它,提升其安全,性能,流畅性,用户体验等各方面指标,最后达到像在用app一样的感觉。