浏览器有一个重要的对象性能，很多与时间节点相关的数据都可以从这个对象中获取。渲染优化布局和绘制动画可以在不触发回流和回流绘图的情况下进行复合过程；composition是关键渲染路径中的最后一个环节，主要作用是将页面拆解成不同的层；使用transform和opacity将涉及到的元素提取到一个layer中，那么这些元素的视觉变化时只会触发composite，不会触发layout和redraw。滚动等高频事件防抖，这类事件会在一帧内触发多次，我们只关心滚动到哪里，解决页面卡顿的利器).代码优化js同时优化一个100kb的文件。js和图片的加载时间是一样的，但是js之后还需要编译、解析、执行等，比较耗时。这个过程虽然和浏览器处理引擎有关，但如果在代码层面进行协调，其实优化这个过程有两种选择：代码拆分、按需加载、treeshaking（代码减重）；另外，从解析和执行的角度，减少主线程的工作量，长任务，超过1kb的脚本，使用raf进行时间调度html优化，减少iframe的使用；避免节点的深度嵌套；避免表格布局，这是非常昂贵的；cssjs尽量优化压缩合并外链资源，减少http请求次数，减小请求资源大小线程压缩代码，也就是说需要压缩多个js文件，需要一个一个压缩。所以在正式环境下打包压缩代码非常慢。webpack-parallel-uglify-plugin:w4terser-webpack-plugin:w4并行处理TerserPlugin:w5预计算:constday=7-5;网上的话直接变成constday=2;先在编译器中计算一些可以计算结果的代码，这样就不会在运行时进行计算了（terse会自动帮你）。图片优化选择合适的图片格式JPEG/JPG：首屏轮播png：制作小图标或者logowebp：不标准的google小图标可以用iconfont处理，字体文件很小合适的图片大小图片资源优先：重要图片（第一屏图片）先加载lazyloading构建优化webpack优化ConfigureTree-shaking（前提是模块化）在w4中设置mode：production会开启tersePlugin。它的简单工作原理就是找到入口文件，相当于树的根节点，看入口文件指的是什么。它将进一步分析这些应用程序的包或模块中引用了哪些模块。经过不断的分析，把需要的东西都保留下来，把引入但没有用到的东西摇一摇，最后打包生成只包含运行时真正需要的代码的bundle，但有时会涉及到全局范围内的添加。或者修改属性，export不反映，会抖动，把不需要抖动的文件全部放在sideEffect数组里webpack依赖优化首先是使用noParse参数提高构建速度。noParse表示不解析，直接指示webpack忽略较大的库。第二种方式是使用DllPlugin插件，避免打包时重复构建没有变化的库，提高构建速度。比如项目中引入的react和react-domwebpack的codesplitting，如果全部打包在一起，对于大型web应用来说效率很低，无法接受。捆绑包需要分成几个小的捆绑包/块。将大文件拆分为较小的文件并分别加载。先加载更重要的文件，缩短首屏加载时间，提升用户体验。第一种方式是在条目中添加其他条目，这样项目就会被拆分成多个不同的bundle。这种方法比较简单，但需要手动添加和维护。第二种方式使用splitChunks插件提取公共代码，拆分业务代码和第三方库。React相关的单独提取；cra的分包策略是先把webpack运行时（runtimeChunks）的东西抽出来，第二步把所有react相关的东西分开。里面有一个chunk写成allyes什么意思：initialChunkasyncChunk（异步导入的那些，懒加载的那些）webpackpersistentcachew5:cache,w4:cache-loadertransmissionloadingoptimizationEnableGzipGzip用于压缩网络资源和减少网络传输中资源文件的大小技术插曲：不要使用Compression-webpack-plugin。前端不需要做gzip。如果前端做gzip，服务端也会打开gzip。他会和浏览器讨论，浏览器会在请求头中带上。Accept-Encoding是一个参数，用来说明你支持哪些内容编码方式。服务器返回的ResponseHeaders中有一个Content-Encoding，用来说明数据的压缩方式。问浏览器是否支持gzip，浏览器说我不支持。,那么代码就不能使用了；所以前端不需要做gzip，只需要将没有做gzip的代码发送给服务器或者代理，然后代理会和浏览器进行协商。gzip部分应该去nginx做，或者在cdn或者oss端做。如果前端协商失败，启用KeepAlive以多路复用TCP连接。该参数为http资源缓存index.html，从http1.1开始默认开启。现在流行强缓存的方法是文件哈希+强缓存的方案。例如hash+缓存控制：max-age=1年。cssjs文件强缓存或协商缓存http1.0没有实现Cache-Control，需要写pragma服务端高级渲染：在服务端完成页面插值/数据组装，直接返回包含数据的页面给客户端rendering：client端分别请求页面静态资源和接口数据，然后操作DOM给页面赋值。.net和jsp不分离前后端，直到ajax出现，客户端渲染开始https://zhuanlan.zhihu.com/p/...SSR：优点：1.优秀的SEO2。首屏加载快缺点：1.负载大：由于渲染任务全部交给服务器，在高并发的情况下，服务器负载压力大。2.多路复用性能差：因为返回的是整个页面，每次路由都要刷新页面，对多路复用性能不友好。3、前后端耦合严重，前端开发依赖后端，开发形式不友好。传统CSR：优点：1.节省服务器性能。2.局部刷新，无需每次都请求整页，体验更好。3.前后端分离开发。缺点：1.由于页面展示过程需要拉取JS文件和执行React代码，所以首屏加载时间会比较慢。2、对于SEO（SearchEngineOptimazition，即搜索引擎优化）来说，是完全无能为力的，因为搜索引擎爬虫只知道html结构的内容，而不知道JS代码的内容。同构渲染：优点：兼顾了前端渲染的大部分优点和后端渲染SEO、首屏加载的优点缺点：1、需要额外的开发建设成本2、对上有一定的负载服务器
