vue核心之虚拟DOM(vdom)
浏览器画一页，要先有真实 DOM，再算样式、布局、绘制。用 JS 频繁改这些节点代价很高：每次改都可能让引擎把流程再走一遍。虚拟 DOM（vdom）用 JS 对象先在内存里描述界面，批量算出差异再一次性贴回真实 DOM。 它不是「从此不用操作 DOM」，而是把多次真实 DOM 更新收成一次；真正让 …
浏览器画一页，要先有真实 DOM，再算样式、布局、绘制。用 JS 频繁改这些节点代价很高：每次改都可能让引擎把流程再走一遍。虚拟 DOM（vdom）用 JS 对象先在内存里描述界面，批量算出差异再一次性贴回真实 DOM。 它不是「从此不用操作 DOM」，而是把多次真实 DOM 更新收成一次；真正让 …
今天的兼容性问题主要发生在“前端三毒”身上：IE 6、IE 7、IE 8。 下文按宽度计算、浮动、双边距等问题逐条给出案例代码、截图对比和解决办法，原图一张不落。 今天的兼容性问题主要发生在“前端三毒”身上，它们分别是： IE 6 IE 7 IE 8 2.问题一：宽度计算问题 案例代码： <!…
浏览器渲染一页有两条工作：跑 JS、算 CSS。它们是互斥的。面试里「回流 / 重绘」问的就是：改样式时，浏览器要不要重算几何，要不要重画像素。 回流（reflow）：render tree 一部分或全部因为宽高、布局、显示隐藏、或内部文字结构变了，需要重新构建页面。重绘（repaint）：宽高、布…
回流和重绘是每个 Web 开发者都会听到的词，但具体两步各自做什么，很多人并不清楚。下面从浏览器渲染过程讲到如何减少它们，并配上可点的 demo。 渲染过程来自 MDN：解析 HTML/CSS → 生成渲染树 → Layout（回流，算几何）→ Painting（重绘，算像素）→ 交给 GPU 显示…
前后端分离做成 SPA 后，首页文件常常超过 1MB，首屏就会慢。常见思路有：UI 组件按需加载、路由懒加载、处理组件重复打包、以及 gzip。前两者要看项目条件，UI 按需和 gzip 则几乎总能做。 本文先聊 ElementUI 按需引入和 gzip。按需能拆掉巨大的 element-ui.co…
这是一份 2019 年前端面试题整理，覆盖 CSS3、HTML5、JavaScript / jQuery、Ajax、跨域、闭包和性能优化，题目都附了答案。 题号、解答、代码示例和公式图全部保留。技术在变，但盒子模型、选择器、语义化、this、原型链这些题现在仍常问。 专题 典型题 CSS3 盒子模型…
这份 CSS 编码规范 同时覆盖手写 CSS 和预编译器（Less / Sass / Stylus）：能套用的约定尽量一起遵守。 下面按代码风格、通用选择器与属性、值与单位、文本编排、变换动画、响应式和兼容性展开，强制项与建议项都保留原文示例。 章节 抓住什么 代码风格 UTF-8 无 BOM、2 …
性能优化是双刃剑：能加快站点，也带来配置成本和一堆规则。有些建议并不适合所有场景，请带着 批判性 阅读。每条后附参考资料。 2020 年这 24 条 从减少 HTTP 请求、HTTP2、SSR、CDN，讲到重绘重排、Web Workers 和 CSS 选择器复杂度，示意图和代码示例全部保留。 小文件…
浏览器兼容性问题，指不同浏览器对同一段代码解析不一致，页面显示效果不统一。多数产品要求：用户用什么浏览器看，都该是同一套效果。所以兼容是前端必须面对的事。 前端大致能分成两类。第一类按设计图精确到 1px，很少踩兼容坑，踩到的多半是浏览器 bug，页面后期好维护。第二类间距、行高、图片位置常差几像素…
Angular 团队发布了 8.0.0 稳定版。NgConf 2019 上已经提到从工具到差分加载的许多内容。下面按新功能做一份速览，方便对照升级。 这一版里更值得先记住的是：差分加载（减小包体积）、loadChildren 改成动态 import、ViewChild / ContentChild …
