Tips for Authoring Fast-loading HTML Pages
iTechTag实在很慢,人家财帮子就快多了,所以希望和你一起学习下Mozilla这篇如何加快页面加载速度的文章
1,页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥
2,减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript functions和Prototype.js合并到一个base.js文件里去了
3,减少域名查询
DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
4,缓存重用数据
使用缓存吧
5,优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6,减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容
7,使用现代CSS和合法的标签
使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥
8,Chunk your content
不要使用嵌套tables
<table>
<table>
<table>
..
<table>
<table>
<table>
而使用非嵌套tables或者divs
<table>...</table>
<table>...</table>
<table>...</table>
将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容
9,指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
10,根据用户浏览器明智的选择策略
IE、Firefox、Safari等等等等
11,页面结构的例子
· HTML
· HEAD
· LINK ...
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
· SCRIPT ...
JavaScript files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
· BODY
· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
· SCRIPT ...
Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
If any images are used for rollover effects, you should preload them here after the page content has downloaded.
分享到:
相关推荐
0.0.0 VScode插件platformIO开发环境的安装[esp32、8266]_̌萌新历险记的博客-CSDN博客.mhtml
五一数学建模
人工智能大模型体验报告3.0 目录 大模型产品测评综述 大模型产品现状与进程 3 .0版本大模型测评规则 大模型厂商整体测评 3.0版本大模型综合指数 3.0版本 测评细分维度指数及评述 测评题目展示 厂商最佳实践案例 厂商优秀案例展示 人工 智能大模型体验报告3.0.pdf (1.39 MB, 需要: RMB 9 元)
使用opencv进行人脸识别和对比-python源码.zip
触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板
基于matlab实现的GST模型的红外弱小目标检测代码.rar
LMDI(对数平均迪氏指数法)目前在能源消耗、碳排放等领域应用很多,总体来说并不 是一个很难的方法,但是相应的资料、步骤还是比较少。本人在写论文的时候,通过搜集资 料、研究,找到了stata的实现方法,来自于 Kerry Du老师写的一个模块l dmi,网址为: LMDI: Stata module to compute L ogarithmic Mean Divisia Index (LMDI) Dec omposition (repec.org) 大家可以自己去研究一下。对应的参考 文献就是Ang, B.W., 2005. The LMDI approach t odecomposition analysis: a practical gui de. Energy Policy 33, 867–871. 目前LMDI分解基 本都以这篇文献为参考,论坛里也有,大家可以下载去深入研究一下,总体并不难。 但是 对于LMDI方法的解读以及stata实现的步骤、过程,目前基本没有具体的中文资料 。 本文在写论文的过程中,进行了总结,现上传上来供大家参考,里面包括stata的 程序文件(ado
IEC 60695-11-2-2017 第11-2部分:试验火焰——1kW标称预混合火焰——装置、验证试验安排和指南.pdf
基于matlab实现的拉普拉斯金字塔分解 做毕业设计的可以参考,小波变换以及MGA的初级参考.rar
本文档是课题研究的研究报告内含调研以及源码设计以及结果分析
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
制造企业数字化转型ERP与CRM系统集成定位及场景构建方案.pptx
触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板
【课程设计全套资料】基于JAVA的管理系统
IEC 60730-2-13-2017.pdf
机械设计谷物洗涤机sw12非常好的设计图纸100%好用.zip
2000—2022年东中西分区域空间权重矩阵,省级层面,具体包括01矩阵,经济矩 阵,地理矩阵,经济地理矩阵以及经济地理嵌套矩阵,包含原始数据和计算过程,经济地理 权重矩阵采用2000-2022年数据,可以更改研究期间,里面有计算过程,地理距离 是用的欧式距离,如有疑问可与我私聊哈,大家放心下载。
TMCM-0930-TMCL 硬件手册
软件说明:先将要合并的.PDF类型文件放到一个文件夹里,然后点击”选择文件夹“选择它,再点击合并,确定存放位置确定后即可成功合并一个PDF类型的文件。在 Python 中,可以使用 PyPDF2 库来合并 PDF 文件。用 pip install PyPDF2 命令来安装这个库。
一、最短路径的概念及应用 在介绍最短路径之前我们首先要明白两个概念:什么是源点,什么是终点?在一条路径中,起始的第 一个节点叫做源点;终点:在一条路径中,最后一个的节点叫做终点;注意!源点和终点都只是相对 于一条路径而言,每一条路径都会有相同或者不相同的源点和终点。 而最短路径这个词不用过多解释,就是其字面意思: 在图中,对于非带权无向图而言, 从源点到终点 边最少的路径(也就是 BFS 广度优先的方法); 而对于带权图而言, 从源点到终点权值之和最少的 路径叫最短路径; 最短路径应用:道路规划; 我们最关心的就是如何用代码去实现寻找最短路径, 通过实现最短路径有两种算法:Dijkstra 迪杰斯 特拉算法和 Floyd 弗洛伊德算法, 接下来我会详细讲解 Dijkstra 迪杰斯特拉算法;