The website uses cookies. By using this site, you agree to our use of cookies as described in the Privacy Policy.
I Agree
rainkii cyu
12 articles
My Web Markups - rainkii cyu
9 annotations
  • 无论是UI层“用户”发出的信号,还是沙箱中“开发者”发出的信号,该信号都应该发送到Master层,由Master层统一控制路由。
  • Master层控制iframe时底层可以使用postMessageAPI。
  • 创建一个新的iframe盖在前一个页面的上面,并初始化新页面的生命周期
  • 通过这样的方案达到了让逻辑线程尽可能的 “轻” (只是执行开发者提供的函数而已),且 减少 逻辑线程与UI线程的通信 频率 (只在初始化及状态数据发生变化时产生通信)目的。
  • 执行用户的函数(生命周期、方法等) 收发状态数据
  • 多个UI线程
  • 安全,指的是小程序的安全性,由于小程序提供给开发者更高的权限,小程序开发者拥有很多OS能力的API,如果开发者利用这些API做些恶意的事情,那么对用户来说将是一场灾难(随便打开一个小程序,结果被黑客攻击了)。 稳定,指的是小程序的稳定性,某个小程序崩溃或者卡死,不应该影响宿主APP及其他小程序。手机上的小程序大部分只能同时打开一个小程序,所以读者可能无法理解什么是稳定性。PC上可以同时打开很多个小程序,根据产品形态不同,有的产品形态的小程序可能在一个网页里面运行(多个小程序同时在同一个网页里运行),这时候某个小程序卡死(例如写一个死循环),它不应该导致其他的小程序和宿主环境也跟着卡死。 性能,要保证小程序的执行、渲染等效率要足够高效。 简单,小程序对于开发者要足够简单,最好无需学习直接上手。
  • 安全、稳定、性能、简单
8 annotations
  • Google Chrome developers are exploring ways to reduce the overhead of CPU-to-GPU data transfers, including use of special shared memory with zero copy overhead
  • Safari is already able to delegate the drawing of simple elements (such as an empty DOM element with a background-color) to the GPU, instead of creating an image of it on the CPU
  • when a very large texture consumes much more memory than a few small layers
  • The size of compositing layers is likely be more important than the number of layers
  • Watch out for the number and size of composite layers
  • negotiate with the client and designer
  • this solution has a significant flaw: The animation now works on the CPU and can be blocked by heavy JavaScript calculations
  • A rectangle made by a DOM element will be rendered as a texture for the GPU, not the PNG image
  • We’ve made it easier on ourselves to rotate the entire sun container. So, this container was promoted to a compositing layer and painted into a single large texture image, which was then sent to the GPU
  • It works entirely on the GPU
  • JavaScript animation happens when each step is manually calculated in a requestAnimationFrame callback.
  • opacity first in order to ensure that the element gets its own compositing layer.
  • Yet memory consumption can be reduced greatly in this case.
  • it could cause implicit compositing and require additional memory.
  • The transform and opacity properties are guaranteed to neither affect nor be affected by the normal flow or DOM environment
  • s
  • You can give browser a hint that you’re going to use compositing with the will-change CSS property
  • Try to keep animated objects as high as possible in the z-index
  • end the updated texture to the GPU.
  • remove the reason for compositing from A element
  • the texture’s size and the complexity of content, repainting and data transferring could take a significant amount of time to perform
  • Promotion to a compositing layer always causes a repaint
  • all non-compositing DOM elements above one with an explicit compositing reason
  • Optimization Tips
  • Additional repainting is required to promote an element to a composite layer. Sometimes this is very slow (i.e. when we get a full-layer repaint, instead of an incremental one).Painted layers have to be transferred to the GPU. Depending on the number and size of these layers, the transfer can be very slow, too. This could lead to an element flickering on low-end and mid-market devices.Every composite layer consumes additional memory. Memory is a precious resource on mobile devices. Excessive memory use could crash the browser.If you don’t consider implicit compositing, then the chances of slow repainting, extra memory usage and browser crashes are very high.We get visual artifacts, such as with text rendering in Safari, and page content will disappear or get distorted in some case
  • The animation is fast and smooth, at 60 frames per second.A properly crafted animation works in a separate thread and is not blocked by heavy JavaScript calculations.3D transforms are “cheap.”
  • does not affect the document’s flow,does not depend on the document’s flow,does not cause a repaint.
  • It’s able to compose images very quickly with subpixel precision, which adds a sexy smoothness to animations
  • composing the images of cached elements would be faster
  • render the image of the page’s new state (i.e. repaint) and then send it again to the GPU to display on screen
30 annotations