一、先来看一个例子 下面这个例子来自某外文，我这里简单转述下。 视差滚动现在不是挺流行的嘛，然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候，发现，页面的绘制性能掉到了每秒30帧，这种帧频人眼已经可以感觉到一定的顿挫感了。 后来，参考一些其他同事还是同行的建议，做了一番优化，然后，页面的渲染性能—— 这优化之前完全就是便秘，屎拉不出来的感...
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结构中一切可见元素...
承接上一篇：【CSS3进阶】酷炫的3D旋转透视 。 最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开） 本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。 嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会） CSS3 3D 行星运转效果图随机再截屏了一张：强烈建议你点进 Demo 页感...
这篇文章主要介绍了关于CSS3中transform变换模型渲染的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下transform通过一组函数实现了对盒子大小、位置、角度的2D或者3D变换,这里我们主要来深入解读CSS3中transform变换模型的渲染,尤其是关注web端3D渲染动画的朋友千万不要错过介绍transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。w3里的解释是，transform基于可视化格式模...