切换主题
字数
538 字
阅读时间
3 分钟
1.window.onload , DOMContentLoaded的区别
window.onload 页面要全部加载完毕后才执行，包括图片，视频等 DOMContentLoaded 只要DOM元素加载完毕后就执行，此时图片和视频可能还没有加载完
2.url到显示整个页面的过程
加载资源的形式 HTML 媒体文件：视频，图片，音频等 js， css
加载过程 DNS解析ip地址 通过ip地址向服务器发送http请求 服务器处理http请求，并返回给浏览器
渲染过程1 根据和HTML生成DOM Tree 根据CSS代码生成 CSSOM 将DOM和CSSOM整合形成render Tree
渲染过程2 根据Render Tree 渲染页面 如果遇到<script> 暂停渲染页面，优先加载并执行js代码，完成再继续（因为js可能改变Dom结构）
3.前端性能优化有哪些
性能优化的原则 多使用内存，缓存或其他方法 减少cpu 计算量，减少网络加载耗时 空间换时间
从何入手 让加载更快 让渲染更快
让加载更快 减少资源体积：压缩代码 减少访问次数：合并代码，SSR 服务器端渲染，缓存
让渲染更快 把css放在head，js放在body末尾 尽早开始执行js，用DOMContentLoaded触发 懒加载（图片懒加载，上滑加载更多） 对DOM查询进行缓存 频繁DOM操作，合并到一起插入DOM结构 节流throttle，防抖debounce
缓存 静态资源加hash后缀，根据文件内容计算hash值 文件内容不变，则hash不变，则url不变 url和文件不变，则会自动触发http缓存机制，返回304
ssr 服务器端渲染：将网页和数据一起加载，一起渲染 对比 非ssr（前后端分离）：先加载网页，再通过Ajax之类的东西加载数据，再渲染数据 早先的 ASP JSP PHP ，现在的vue react ssr
贡献者
sunchengzhi