不知不觉已经到了最后一部分2其实，如果你认真看完我写的并跟着做，你应该能找到一些Less的收获。最近比较流行一些跨平台技术，比如React-native、flutter。不过，我还是不打算包括它们，因为它是为做应用而生的，我想包括Electron，一种桌面端的跨平台技术。是什么原因？这是第一部分和第二部分。如果你是第一次阅读本系列文章，欢迎从头学起：前端20道灵魂拷问彻底看懂你是中级前端工程师【上篇】前端20道灵魂拷问充分了解你是一名中级前端工程师【Part2】和一些好文章：WritingaReactframeworkfromscratch为什么我们需要熟悉这些通信协议？版本】不完全性能优化手册Electron跨平台入门系列以上文章，gitHub都有对应的源码。言归正传，一千个人眼中有一千个哈姆雷特。我们不可能完美。每个人的判断标准都不一样。只有我们有能力碾压这个水平，才能阻止质疑者。当然，我们不做技术杠杆，技术本身没有好坏之分。如果您不喜欢，请忽略最后一个问题。我准备准备以下内容：前端性能优化的方向从传输层面的优化方向。预先解析地址。如果第一次请求解析地址没有缓存，可能会消耗60-120ms。不完整的性能优化手册就介绍到这里。Preload预请求必要的内容，prefetch预请求可能需要的内容。这种请求方式不会阻塞浏览器的解析，并且可以缓存预先请求的资源，并且可以设置crossorgin来缓存跨域资源，不会耽误首屏渲染时间，也会加快后面的加载时间，因为资源后面需要的会直接从缓存中读取，而不是通过网络请求。在使用preload之前，遇到资源依赖时加载：使用preload之后，无论资源是否被使用，都会提前加载：可以看到，preload的资源加载顺序会提前：使用preload之后，Chrome会有警告：preload如果和prefetch混合使用，资源不会被重用，而是会被重复加载。如果不确定资源一定会加载，不要误用preload，以免本末倒置，给页面带来更重的负担。preload加载页面需要的资源，比如CDN上的字体文件，prefetch预测加载下一屏数据，可能是一个很好的组合。preload和prefetch详解这篇文章写的不错。感谢作者减少传输次数，将部分图片用base64处理，再使用Sprite图片。将多张图片组合成一个传输。当然，base64要慎用。在实际开发中，降低传输量的效果并不好。比如后台返回的数据：“该用户没有权限”可以改成：0。约定的思想比配置的好必须要使用probbuffer协议ProtoBuffer是一个对象的开源工具由谷歌开发的序列化和反序列化。它的本质是将一段数据序列化，转换成二进制形式进行传输，在另一台服务器或客户端接收后反序列化，转换成相应的数据格式（json），好像有些人没有听说过这种传输协议。实际上，它的传输过程是以二进制流的形式进行的。每个IM应用程序既是服务器又是客户端。对于这种频繁的数据传输，可以使用protobuffer传输协议protobuffer下载protobuffer。有几个优点：1.平台无关，语言无关，可扩展；2.提供友好的动态库，简单易用；3、解析速度快，比对应的XML快20-100倍左右；4、序列化后的数据非常简洁紧凑。与XML相比，序列化后的数据量大约是XML的1/3到1/10。protobuffer.js-我们可以使用这个库来解析protobuf.js提供了几种处理proto的方法。直接解析，比如protobuf.load("awesome.proto",function(err,root){...})转成json或者js，比如protobuf.load("awesome.json",function(err,root))){...})当然我们一般用vue转成.js后使用protobuffer。对象key-value形式封装如果需要遍历对象，其实有很多种方式。使用对象的好处是数据量增加了，但是需要查找的时候会非常快，避免写耗时的同步代码。不管前端怎么发展，jsmaster线程是单线程和GUI渲染线程互斥还是什么都没变？因为js可以进行dom操作，以防止在渲染过程中由于dom操作造成不可预见的后果，现代框架的底层其实就是dom操作，直接dom操作比数据驱动要快很多！例如：for(leti=0;i<100000;i++){console.log(i)}console.log(1)for循环其实很快，但是需要时间完成100000次循环直到打印出来out1，可能会超过100ms，那么如果打印输出1是用户交互操作，就会导致用户体验到延迟和滞后。互斥造成的错觉。（大部分是这样，有的配置特别低）如果非要同步代码怎么办？那么我建议ES6的异步方案，或者换个实现方案，因为大部分性能方案优化都卡在了这个点上。手机白屏、持久化存储等解决网络传输慢等解决方案淘宝及其他task-slice解决方案taobaotask-slice解决方案这篇文章最后的效果先不说，但是这个思路可以用在大量的前端。Go语言中有一个切片渲染任务，打开性能调试面板后可以看到渲染了一点点，也算是加快了首屏的渲染速度！切片队列核心代码：function*sliceQueue({sliceList,callback}){letlistOrNum=(isNum(sliceList)&&sliceList)||(isArray(sliceList)&&sliceList.length);for(leti=0;i
