以图明志

Web设计理念

WebKit内核加载渲染网页的过程

WebKit引擎快速的原因
在WebKit渲染网页之前,它需要将页面和所有引用的资源加载完毕。其中会涉及到不同层面的工作。在本文中,我将重点关注WebCore(WebKit中主要渲染组件)是如何在加载过程中发挥作用的。WebKit包含两条加载流水线,其中一条负责将文档加载到frames当中,另一条负责加载其他资源(比如图片、脚本一类)。

Web设计理念

图片的预加载的一些潜在问题

你真的了解图片的预加载吗?
相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏。(这种模式的内存泄漏只存在低版本的ie6中,打过补丁的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题)。

JQuery

提取JQuery的ready()方法来单独使用

如何实现加载DOM时执行js代码
有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了。大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。

Web设计理念

各浏览器加载资源的方式区别

各浏览器是如何下载资源来打开页面的
这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发。本篇文章就使用几种流行的浏览器,针对同一个页面的外部资源加载过程进行分析,推测各浏览器加载外部资源的策略、特征,并最后给予一定的比较和总结。

JavaScript

如何加快JavaScript的加载与执行

高性能网站建设进阶指南
JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。浏览器在碰到一个引入外部JS 文件的script标签时会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,为了避免页面加载时的停顿甚至空白页的出现,JS 脚本应尽量放置在页面底部。

JavaScript

JavaScript的lazyload延迟加载是如何实现的

简单介绍下懒加载的实现
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。

PHP服务器脚本

PHP自动加载__autoload的工作机制

PHP的懒加载lazy loading
但随着项目规模的不断扩大,使用包含文件的方式会带来一些隐含的问题:如果一个PHP文件需要使用很多其它类,那么就需要很多的require/include语句,这样有可能会造成遗漏或者包含进不必要的类文件。如果大量的文件都需要使用其它的类,那么要保证每个文件都包含正确的类文件肯定是一个噩梦。

JavaScript

如何按需动态加载js文件

动态加载JavaScript
JavaScript无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大。这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js。代码还是很简便的。首先判断文件load完成。加载状态ie为onreadystatechange,其他为onload、onerror。

JQuery

JQuery仿淘宝滚动加载图片

减少页面第一次显示的流量
用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示的流量,加快页面第一屏显示的速度。通过 setInterval 定时事件,检测滚动条的位置,再进行 ajax 请求服务端数据,加载图片到页面上。

JavaScript

如何通过JavaScript动态加载js

动态加载js
在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该script标签加载。于是,我们有了通过js动态加载js文件的需求。下面提供一种方案。方法比较简单,具体实例详见代码。运行结果是在test.html中可以通过test.js中的loadDemo()函数动态加载demo.js文件中的js函数。

Web设计理念

Javascript图片的懒加载与预加载

用户体验与服务器压力之间的平衡
缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。一般实现预载的工具类,都实现一个Array来存需要预载的URL,然后实现Finish、Error、SizeChange等常用事件,可以由用户选择是顺序预载或假并发预载。
1 / 1 首页 < Prev 1 Next > 尾页 页码: