随笔分类 - web性能优化
摘要：浏览器渲染流程： 1、浏览器开始解析目标HTML文件，执行流的顺序为自上而下。 2、HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。 3、CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。
阅读全文
摘要：网页中引用的外部文件： JavaScritp、CSS 等常常会阻塞浏览器渲染页面。假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载，那么浏览器渲染页面的过程就会被阻塞2秒，直到该JS文件下载并执行完后才继续。 前端性能调优时必须排除任何潜在的渲染阻塞点，让浏
阅读全文
摘要：一、减少渲染阻塞时间 今天许多 Web 应用必须满足许多形式因素，包括 PC、平板电脑和移动手机等。为了实现这种响应式特性，我们必须根据媒介大小编写新的样式。在页面渲染时，直到 CSS 对象模型（CSS Object Model，CSSOM）准备就绪，它才开始渲染阶段。 根据你的 Web 应用，你可
阅读全文
摘要：Javascript中的作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下。 1、全局导入 我们在编码过程中多多少少会使用到一些全局变量（window、document、自定义全局变量等等），了解javascript作用域链的人都知道
阅读全文
摘要：我们知道，DOM是用于操作XML和HTML文档的应用程序接口，用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和Javascript（这里指ECMscript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAscript每次访问DOM，都要途径这座桥，并交纳“过桥费”，访问DOM的次数
阅读全文
摘要：DOM编程可能最耗时的地方，重排和重绘。 1、什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。 DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在
阅读全文
摘要：在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示
阅读全文
摘要：一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。鉴于想让自己有一个提升，进入一个更加广阔的天地，总得找一个
阅读全文
摘要：在编写网站的时候，或多或少都会用到一些网络上的字体，CSS3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过
阅读全文
摘要：构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。 你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？ 一、什么是资产优先级？ 现代浏览器用流式解析器来解析 HTML —— 在完全下载之前，就可
阅读全文
摘要：一、普通 script 1、文档解析的过程中，如果遇到script脚本，停止页面的解析渲染，下载script脚本 2、如果是多个script脚本, 近似于同时并行下载script脚本 注意：虽然说是遇到script脚本, 就停止后面标签的解析渲染; 但chrome做了优化, 遇到script脚本,
阅读全文
