CSS算是前端开发中最简单的一块内容，说起来简单，可能要真正做好也并非一件容易的事。能做很容易，做好却很难，如果仅仅是实现页面的布局，样式，确实很容易，但是如果考虑到每一行代码的执行效率，对浏览器造成的压力，对用户体验造成的影响，可能就不是一件容易的事情了。 一个良好的CSS书写习惯，以及一个好的CSS规范，会提升网页的渲染速度，让你的页面更快的加载，提升用户体验，今天我就为大家总结一下这个最简单但是却又...
前端时间用react写网站，但是一直都是采用前端渲染的方式。最近两天有时间，研究一下怎么实现react的后端渲染。 一、环境 Webpack React NodeJS 二、思路 前端构建工具采用了Webpack，React组件使用ES6语法编写。由于Webpack支持像引入普通JS模块一样引入图片、样式等资源文件，所以React组建内的图片和样式都是通过import方式引入的。因此，要实现服务端渲染，要做三件事情。 编写后端渲染所...
SeimiAgent SeimiAgent是基于QtWebkit开发的可在服务器端后台运行的一个webkit服务，可以通过SeimiAgent提供的http接口向SeimiAgent发送一个load请求（需求加载的URL以及对这个页面接受的渲染时间或是使用什么代理等参数），通过SeimiAgent去加载并渲染想要处理的动态页面，然后将渲染好的页面直接返给调用方进行后续处理。SeimiAgent的加载渲染环境都是通用浏览器级的，所以不用担心他对动态页面的处理能力。目前SeimiAgent只支...
承接上一篇：【CSS3进阶】酷炫的3D旋转透视 。 最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开） 本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。 嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会） CSS3 3D 行星运转效果图 随机再截屏了一张： ...
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，是我自己学习记录的一个过程，如果上面列出的知识点都了然于胸了，就可以不必往下看了。 滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事...
该文章于三天前发表在 github，若有问题可提至 github . 这篇文章主要关注的是资源加载之后的性能，因为大多数用户关注的不是应用如何加载而是具体的使用。所以要快速响应用户，尤其是无线端，我们有必要了解浏览器渲染性能。 RAIL 性能模型 首先一个需要思考的问题，怎样的网站是顺畅的？我们可能可以给一个大概的感觉，如：秒级响应等。其实，也可以给出一个很讨巧的答案：用户觉得顺畅的网站它就是顺畅的。因为几...
假设我的SVG中有一个标签是 如何能够让浏览器将其渲染成一个图形，比如是两个矩形拼接成的一个小形状？ 回复讨论(解决方案) 个人考虑用js在加载时进行重绘，不止是否有人有更好的解决方案。
1. 问题由来 在移动互联网电商领域，运营每天需要搭建多个促销页面来吸引用户去点击去购买，一开始程序员临时写个新页面去实现，可这些页面可以用几次就不用了，每次创建新页面去实现费时费力，而且，电商的运营需求是快速迭代的，每次去页面代码里去改，然后上线也太不方便了。所以产品提出了Diy 页面----配置web组件去搭建页面，事先定好页面可能到用到哪些的组件，然后运营在后台选好页面由哪些组件组成，然后分别去配置对应...
在iOS实际的开发中，使用UIWebView来加载数据使用的场景特别多。很多时候我们会动态的从服务器获取一段HTML的内容，然后App这边动态的处理这段HTML内容用于展示在UIWebView上。使用到的API接口为： - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL; 传统的方法 由于HTML内容通常是变化的，所以我们需要动态生成HTML代码。通常我们从服务器端获取到标题、时间、作者和对应的内容，然后我们需...
在app的内容页（详情页）中，富文本的显示一直是经常需要处理的问题，而通常在后端的富文本编辑中，Html应用比较普遍，所以其实需要处理的Html富文本显示的问题，以下这三种方式肯定不是最优的显示Html富文本的方式，只是相对简单的解决方案，对前后端的转换要求少，可以快速集成。 以下对这3种方式进行内存的测试对比，毕竟详情页是相对比较大，而且打开频率高的页面，所以内存占用是必须要考虑的问题。 基本环境： ...
SeimiAgent SeimiAgent是基于QtWebkit开发的可在服务器端后台运行的一个webkit服务，可以通过SeimiAgent提供的http接口向SeimiAgent发送一个load请求（需求加载的URL以及对这个页面接受的渲染时间或是使用什么代理等参数），通过SeimiAgent去加载并渲染想要处理的动态页面，然后将渲染好的页面直接返给调用方进行后续处理。SeimiAgent的加载渲染环境都是通用浏览器级的，所以不用担心他对动态页面的处理能力。目前SeimiAgent只...
浏览器是如何渲染网页的？ 我们从浏览器渲染一个页面的行为说起： 从服务器端获取的HTML文档中构建出DOM树（文档对象模型）； 样式被加载和分析，构建CSSOM（CSS对象模型）； 以DOM和CSSOM为基础，文档树被构建，一系列对象被渲染（Webkit称每一个为‘renderer’或’render 对象（render object）‘，Gecko中称为‘frame’）.渲染树反应了除不可见元素（ , display:none）之外的DOM结构中一切可见元素...
渲染应该从最开始当页面布局被定义时就进行优化，样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免一些性能问题。 这篇文章不会深入研究浏览器的技术细节，而是提供一些通用的原则。不同浏览器引擎工作原理不同，这就使特定浏览器的学习更加复杂。 浏览器是怎样渲染一个页面的？ 我们从浏览器渲染页面的大概过程开始说起：由从服务器接收到的 HTML 形成 DOM（文档对象模型）。 样式被加载和解析，形成 CSS...
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看...
昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能有点乱，希望大家理解。 测试浏览器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。 在WebKit内核中，网页在显示的时候会有一个解析器（Parser）去解析html文档，然后去生成渲染树（Render Tree），最终渲...