css优化 | 易学教程

css 优化

阅读更多关于 css 优化

// 注: 以下内容大量借阅自<<Webkit技术内幕>>--朱永盛(14年出版的) , 很多内容可能早已更新。部分摘录内容有删减 , 目录为了编辑方便作了些改动。读者可自行下载原文档阅读。 1. Webkit 的网页渲染过程 1.1.1 加载和渲染: 　　浏览器的主要作用就是将用户输入的 URL 转变成可视化的图像。按照某些文档的分析, 这其中包含两个过程。其一是网页加载过程，就是从"URL"到构建DOM树, 其二是网页渲染过程，从DOM树到生成可视化图像。这两个过程也会交叉。　　网页渲染还有一个特性, 那就是网页通常比我们的屏幕可视面积要大(在移动设备上尤其明显), 而当前可见的区域, 我们称为视图(viewport)。　　因为网页比可视区域大, 所以浏览器在渲染网页的时候, 一般会加入滚动条以帮助翻滚网页。 1.1.2 Webkit 的渲染过程　　数据和模块　　数据包括网页内容 , DOM, 内部表示和图像　　模块包括 HTML解释器, CSS解释器, JavaScript引擎以及布局和绘图模块。　　　　根据数据的流向, 可以将渲染过程分成三个阶段, 第一个阶段是从网页的URL到构建完 DOM树, 第二个阶段是从 DOM树到构建完 Webkit的绘图上下文, 第三个阶段是从绘图上下文到生成最终的图像。　　第一个阶段　　从网页 URL 到构建完

CSS品控与流程

阅读更多关于 CSS品控与流程

精通CSS意味着不仅能写出可用的标记和样式，还能让代码好阅读、方便移植、易维护。 1.外部代码质量：调试CSS 外部代理质量就是用户能体验到的最终结果。主要体现在几个方面。正确性。 CSS属性名都写对了吗？浏览器能否支持？健壮性。声明两套属性，其中一套用作旧版浏览器的后备。性能。页面加载快不快？动画和滚动是否平滑？我们要善于利用浏览器的开发者工具。 1.1 浏览器如何解析CSS 浏览器在加载一个网站时，首先会收到网址对应的一个HTML文件。然后浏览器把这个HTML文件解析为一个对象（节点）树。这就是文档对象模型（DOM，document object model）。 <html lang="en"> <head> <meta charset="utf-8"> <title>Test Document</title> </head> <body> <h1>This is a test.</h1> <p>This is a paragraph.</p> <p>This is anothr paragraph.</p> </body> </html> 浏览器在碰到HTML中指向CSS文件的链接时，会获取并解析CSS文件。类似于把HTML转换成DOM，CSS文件会被浏览器转换为 CSS对象模型（CSSOM，CSS object model）。不仅是外部CSS，

web前端性能优化指南

阅读更多关于 web前端性能优化指南

web前端性能优化指南 web前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB 5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 6. 基于第五点，要合理处理代码减少渲染损耗 7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置 8. 加载完成后用户交互使用时也需注意性能优化指南 [加载优化] 加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点 · 减少HTTP请求因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个 a) 合并CSS、JavaScript b) 合并小图片，使用雪碧图 · 缓存使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a) 缓存一切可缓存的资源 b) 使用长Cache（使用时间戳更新Cache） c) 使用外联式引用CSS、JavaScript · 压缩HTML、CSS

前端优化（原创）

阅读更多关于前端优化（原创）

前端优化只要在两方面进行，一是加载速度优化，二是渲染速度优化。在进行优化前，先掌握好2个基本理论知识理论知识（一）：浏览器的完整加载渲染过程 ①输入url，发送请求 ②加载(即下载)整个.html文件 ③加载完后解析(即运行)html，并在解析的过程中构建DOM树 ·JavaScript是单线程的。浏览器是多线程的：有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面。 ·浏览器按从上之下(深度遍历)的原则解析各个html标签 ·解析标签的过程就是构建DOM树的过程 ·解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script加载时不影响其他资源加载，但由于不知道js中的执行内容，所以需要等JS加载并执行完后才会继续解析和渲染。 script的执行会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 ④当css解析为CSSOM后，html解析为DOM后，两者将会结合在一起生成Render Tree(渲染树)。 ⑤Layout

H5前端性能测试快速入门

阅读更多关于 H5前端性能测试快速入门

说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相应的优化规则。一、浏览器渲染引擎浏览器是Html解析和页面最终展示的工具，所以测试H5前理解浏览器的工作原理是必不可少的，具体可参考《浏览器工作原理》。浏览器的主要功能浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。在浏览器组成部分中，渲染引擎是用户直接相关，呈现用户所需页面的部分。所以从渲染引擎入手，了解HTML解析与页面展示。渲染引擎工作流 dom树构建：从html标签的解析开始，将各种标签解析为dom树中的各个节点，标签和dom树的中的节点是一一对应关系。渲染树构建：将CSS和style标签中的样式信息解析为渲染树，渲染树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。渲染树布局和绘制：渲染树确定各个dom节点在屏幕中单确切位置，根据渲染树中的颜色等信息绘制出网页。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上

Web前端知识体系精简

阅读更多关于 Web前端知识体系精简

Web前端技术由 html、css和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明普通变量、静态变量、模块和类。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等，另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

移动端h5优化

阅读更多关于移动端h5优化

借鉴优化文章概述 PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点，首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB Mobile侧因手机配置原因，除加载外渲染速度也是优化重点基于第五点，要合理处理代码减少渲染损耗基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置加载完成后用户交互使用时也需注意性能加载优化加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点减少HTTP请求因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。 a）合并CSS、JavaScript b）合并小图片，使用雪碧图缓存使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a）缓存一切可缓存的资源 b）使用长Cache（使用时间戳更新Cache） c）使用外联式引用CSS、JavaScript 压缩HTML、CSS、JavaScript 减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩

网站测试性能工具

阅读更多关于网站测试性能工具

嗨，各位，又到了周末总结时间！得益于大量的 Grunt 和 Gulp 插件，我们可以轻松实现网站数据的可视化，虽然深入理解这些工具还比较困难，但分门别类的将它们列出来，也是很有帮助的。内容分发网络（CDN） CDN 可以帮你把网站的资源分发到世界各地，有助于提高网站的响应速度，当然，这对于那些特殊地区的用户是收效甚微的。 CloudFlare CloudFlare 的强大之处在于它可以成为你的 DNS 服务器（CDN 只是它所有服务的一个组成部分），这样对你的网站发起的所有请求都会经过它。 CloudFlare 的 CDN 在过去十五年的设计和发展中，并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步，包括并不限于硬件、web 服务器和网络路由。换言之，我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉，其性能也一定比你使用过的任何传统 CDN 都要优秀。 MaxCDN CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源，所以我们无需做什么特别处理，即可将资源移入 CDN，并能保证链接的准确性。对于一个博客来说，考虑到其中的大文件主要是 JavaScript、CSS 和图片，而不是视频等类型，这贷款占用的可真多。我们的 CDN

前端性能优化和测试工具

阅读更多关于前端性能优化和测试工具

昨天参加37互娱的笔试时有个这样的问题：说说你所知道的提高前端开发效率的工具或方法？说实话，确实知道的不多，于是从网上搜了下，挺不错，故转载之： http://www.jianshu.com/p/cdf777f13ff6 内容分发网络（CDN） CDN 可以帮你把网站的资源分发到世界各地，有助于提高网站的响应速度，当然，这对于那些特殊地区的用户是收效甚微的。 CloudFlare CloudFlare 的强大之处在于它可以成为你的 DNS 服务器（CDN 只是它所有服务的一个组成部分），这样对你的网站发起的所有请求都会经过它。 CloudFlare 的 CDN 在过去十五年的设计和发展中，并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步，包括并不限于硬件、web 服务器和网络路由。换言之，我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉，其性能也一定比你使用过的任何传统 CDN 都要优秀。 MaxCDN CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源，所以我们无需做什么特别处理，即可将资源移入 CDN，并能保证链接的准确性。对于一个博客来说，考虑到其中的大文件主要是 JavaScript、CSS 和图片，而不是视频等类型，这带宽占用的可真多。我们的

关于浏览器css选择器性能优化

阅读更多关于关于浏览器css选择器性能优化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 作为一个前端开发，我觉得很有必要了解浏览器对css选择器的解析，因为这个关系到页面的渲染，高效的方式、避开开销大的方式这些无疑为网站加载缩短了时间。最近在新的项目中陷入了一个误区，也是出于对jquery使用的了解，于是把jquery中选择器的优化放到了写css上面，但是发现其实这两者是不一样的，浏览器解析css是本身默认的规则，而jquery是模拟出来的规则为了用户更好的使用。后面去查找这方面的资料，于是发现自己的错误是那么的可笑。找到了阿里前端的一篇文章 http://www.aliued.cn/2013/01/24/ 网站css选择器性能讨论.html ，当然也找了其他的一些文章，不过都有说到了safari和webkit的架构师David Hyatt的两段话：样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。因为我项目的原因

订阅 css优化