浏览器性能优化与视差滚动
干活儿做网站，不只是看起来美美的就行，还得注意性能！比如那个视差滚动网站，在设计的时候可得看看浏览器是怎么运转的。说实话，你滑网页的时候，浏览器会根据你的速度改变新内容出现的地方。可是，普通网站只需要换几个元素就搞定了，浏览器能轻松应对；但视差网站元素变化多，浏览器必须重新画页面，这对性能有影响。
挑战与解决之道
看这种慢到受不了的视差滚动网站，真的让人火冒三丈！两招解决：要不破财重绘，不然找别的法子提速。你看过开发者工具没？页面一拉，有时屏幕会突然一片空白，那就是“全屏绘制”。之前那种版本，没动一下滑动条就要刷一遍，这样浏览器可要疯掉了。所以，我们现在是每周处理一次滚动事件，记好上次滑动的地方，等requestAnimationFrame回调过来，用这个地方启动，速度就能提高。
3D转换与性能改善
直接用3D转换功能来修照片，就能让你的电脑瞬间加速，比2D转换还好用！省去了好多麻烦事，速度也快多了~
玩Canvas画布时记得找个固定的位置放这样办事速度才会快哟。搞手动图层时就用Canvas元素拉起来还有复杂效果不用怕，借助WebGL跟显卡就能轻松搞定并且呈现出来~
老旧浏览器兼容与最佳实践
要提升速度吗？别忘瞅瞅那些破旧浏览器它们可能有些功能不太灵光所以说，就算不是最新的浏览器，咱们也得保证API正常运作。尤其是那些年久失修的浏览器，咱就少用点炫酷的立体效果呗当然，要是你懂得运用像Three.js这样的神器，换个绘图引擎也是个好办法哦
总结与展望
/**
* Updates and draws in the underlying visual elements to the canvas.
*/
function updateElements () {
var relativeY = lastScrollY / h;
// Fill the canvas up
context.fillStyle = "#1e2124";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw the background
context.drawImage(bg, 0, pos(0, -3600, relativeY, 0));
// Draw each of the blobs in turn
context.drawImage(blob1, 484, pos(254, -4400, relativeY, 0));
context.drawImage(blob2, 84, pos(954, -5400, relativeY, 0));
context.drawImage(blob3, 584, pos(1054, -3900, relativeY, 0));
context.drawImage(blob4, 44, pos(1400, -6900, relativeY, 0));
context.drawImage(blob5, -40, pos(1730, -5900, relativeY, 0));
context.drawImage(blob6, 325, pos(2860, -7900, relativeY, 0));
context.drawImage(blob7, 725, pos(2550, -4900, relativeY, 0));
context.drawImage(blob8, 570, pos(2300, -3700, relativeY, 0));
context.drawImage(blob9, 640, pos(3700, -9000, relativeY, 0));
// Allow another rAF call to be scheduled
ticking = false;
}
/**
* Calculates a relative disposition given the page’s scroll
* range normalized from 0 to 1
* @param {number} base The starting value.
* @param {number} range The amount of pixels it can move.
* @param {number} relY The normalized scroll value.
* @param {number} offset A base normalized value from which to start the scroll behavior.
* @returns {number} The updated position value.
*/
function pos(base, range, relY, offset) {
return base + limit(0, 1, relY - offset) * range;
}
/**
* Clamps a number to a range.
* @param {number} min The minimum value.
* @param {number} max The maximum value.
* @param {number} value The value to limit.
* @returns {number} The clamped value.
*/
function limit(min, max, value) {
return Math.max(min, Math.min(max, value));
}
哈喽！跟你们分享个超级爽的网页设计技能，那就是运用HTML5来制作网页。我会分享给大家让浏览器运行更加流畅的方法，带你感受下3D效果的炫酷玩法，还有如何巧妙运用Canvas。学会这些，你的网页设计能力会提高不少但是记住，制作出完美的网页，除了要好看还要快，路还很长，挑战也很多！
// check for WebGL support, otherwise switch to canvas
if (Modernizr.webgl) {
renderer = new THREE.WebGLRenderer();
} else if (Modernizr.canvas) {
renderer = new THREE.CanvasRenderer();
}
。
评论0