网站响应式好吗,景德镇建站公司,公司核名查询官网,手游推广渠道1.如何优化首屏加载速度#xff1f; 关键css内联#xff1a;将首屏相关的css内联到html中#xff0c;避免css渲染阻塞图片懒加载#xff1a;非首屏的相关图片配置懒加载#xff0c;当需要时再加载#xff0c;减少性能合并压缩文件#xff1a;通过构建工具合并js 和css文…1.如何优化首屏加载速度 关键css内联将首屏相关的css内联到html中避免css渲染阻塞图片懒加载非首屏的相关图片配置懒加载当需要时再加载减少性能合并压缩文件通过构建工具合并js 和css文件减小打包体积通过代码分割,按需加载可以提高加载速度包括 路由分割-路由懒加载通过配置动态语句import 实现路由懒加载当跳转页面时再加载组件组件分割vue2通过import 动态引入组件vue3通过defineAsyncComponent第三方库分割在config.js中配置 使用ssR服务端渲染在服务端生成首屏HTML内容减少客户端渲染的时间开启Gzip压缩-服务器配置 2.如何利用浏览器缓存优化性能 首先浏览器缓存机制包括了强缓存和协商缓存都是通过配置HTTP缓存头控制的 强缓存是通过ceche-control设置的 协商缓存当强缓存失效时浏览器携带缓存标识想服务器发送请求验证资源是否过期 优化策略静态资源通过设置强缓存一年并配置文件名哈希自动更新缓存实现HTML文件配置no-cache,每次都要验证更新避免用户看到旧页面 service-worker:通过前端配置js实现离线缓存 3.如何优化SPA应用的首屏加载速度 主要是通过代码分割 按需加载组件分割、路由分割 异步加载组件 在vue2中通过import 语法vue3中通过defineasyncComponents异步加载组件路由懒加载也是通过import动态引入预加载关键字体关键css内联HTML 非关键css异步加载对图片进行压缩处理、懒加载图片可以通过服务端渲染SSR 首屏HTML 提高加载速度骨架屏提升用户的页面等待体验利用浏览器缓存对静态资源设置长缓存 使用webpack 压缩js 和css,减小打包体积 4.如何进行性能监控 进行性能监控的目的是为了识别解决性能瓶颈提高用户体验性能监控分为了2种环境 实验室监控在预发布环境下通过lighthouse\webpageTest对应用进行全面的性能分析后者可以实现可视化瀑布图 真实用户监控在生产环境下通过web vitalssentry 或者 chorme analytycs等工具采集真实用户的性能数据还可以通过performance API获取性能数据 进行性能监控流程首先是 制定并确认核心性能的指标包括 LCP最大内容渲染的时长FID首次输入的延迟CLS累计布局的偏移FIN交互的延迟等。 在预发布环境下通过lighthouse 进行性能测试发现并处理性能问题验证处理后的性能效果部署到生产环境下采集真实用户的性能数据发现性能问题收集问题在预发布环境复现并开始重复以上流程步骤 性能监控是一个持续化的过程要及时发现和解决不断的改进和优化 5.什么是reflow 重排和repaint 重绘如何避免 重绘当元素的外观、样式改变但不影响布局时浏览器会重新绘制元素叫重绘 重排元素的尺寸、布局隐藏等改变需要重新构建的过程叫重排重排需要更新整个渲染树性能成本很高 常见的导致重排的操作有 动态添加、删除、修改DOM节点改变元素的位置、尺寸、字体大小改变窗口大小激活伪类等等。。 避免、优化的方法 批量修改dom使用documentfragment 避免逐条修改样式使用class 代替style ,直接修改类选择器的样式一次性修改多个样式 避免在频繁读取布局属性 使用transform和opcity 进行动画不会触发重绘 6、如何优化渲染性能 减少重绘和重排 避免多次修改DOM使用DocumentFragment批量修改dom避免交替读写布局属性offsetwidth使用transform,opcity做动画触发GPU加速 优化JS的执行 避免长任务的执行使用settimeout 分片或者 requestIdleCallback使用节流和防抖 虚拟化长列表针对大的数据只渲染可视化区域避免一次加载大量DOM优化CSS 避免选择器嵌套过深图片进行压缩处理使用图片懒加载关键资源内联HTML路由懒加载按需加载组件、UI库等减少HTTP请求 使用webpack 合并js 和css文件对于静态资源可以使用长缓存策略 高频面试题
浏览器缓存机制的区别
虚拟dom为什么快
