优化页面加载 20常规提示和技巧

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

你是否担心页面的加载速度? 以下列出了如何加快页面速度的20个常规提示:

使用代码

1.使用浏览器缓存

浏览器首次访问时,浏览器必须下载所有资源,但第二次访问,为什么浏览器不能从缓存服务器中获取资源。 for Images/CSS/JavaScripts, 你需要配置网络服务器

2.调用 css/javascript文件'style_ v1.0.1. css''script_ v1.0.1.js

当你更改页面的现有 css/javascript文件时,担心浏览器可以使用这些文件的旧版本,只需更改它们的名称即可。

3 位外部文件中的css和 javascript

外部文件将'帮助'浏览器缓存为下一次使用,并适合多次访问

4.避免使用 <表>

表加载比其他内容慢- 首先要计算它的结构,然后确定它的内容。 因此,作为表的替代,可以使用css进行布局。

5.可以在可能的情况下使用图像。

如果需要显示一些文本,而不是使用该文本创建图像,请添加适合于css格式的文本。

6.减少 <--。 ! -->',','</>'

增加一个字符会增加页面的大小。 页面大小越大,加载速度就越慢。 减小页面大小减少注释和空白间距。

7.减小Cookie大小

很 重要 保持 cookie 的 大小 以 尽量 减低 对 用户 的 响应 时间 的 影响 尽可能 低.

8.在每个 href ( 如果有可能)的结尾放置'/'。

href="http://www.aspnetsource.com/".。

当你添加'/'时,url是一个目录的服务器'知道',并且不花任何时间来处理它。

9.编写 compact css

示例





border: 1px black solid;




要优于:





border-width: 1px;



border-color: black;



border-style: solid; 



10.减少 <。 class="class_name"。>

示例


<div>



<p class="class_name">.. . </p>



<p class="class_name">.. . </p>



<p class="class_name">.. . </p>



</div> 







.class_name { color: #ff0000; }







can be optimized to:




<div class="class_name">



<p>.. . </p>



<p>.. . </p>



<p>.. . </p>



</div>







.class_name p { color: #ff0000; }



11.避免'动画'gif和 Flash

动态gif和 Flash 有很大的大小,这会降低页面加载的速度。

12.选择适当的图像格式

选择图像的格式时,请小心: gif最适合实体颜色和尖锐的边缘转换,jpeg最适合连续的颜色或者灰色调。

13.放置 css inside head

当放置 css inside head时,浏览器将在开始所有内容之前,在开始时对如何样式和显示内容进行'知道'。

14.将javascript放在页面( 如果有可能)的底部

将javascript放在页面底部,因为浏览器可以在下载期间进行 block 呈现,becausedocument.write() 可能会引发 HTML。

15.避免在图像url中使用查询参数等。

默认情况下浏览器拒绝缓存包含问号的任何 URL。

16.使用短样式名称

如果使用短样式名称,可以节省空间,尤其是在引用多种样式时。

为 <> 指定高度和宽度属性

当为 <img> 指定heigth和width属性时,但它允许浏览器在加载图像时映射页面的布局。

18.选择 @import 上的<链接>

在 IE @import 中,在页面底部使用 <链接> 是一样的,所以最好不要使用它。

19.使 favicon.ico 小型可以缓存

如果你不关心它,浏览器仍将请求它,因这里最好不要在没有找到 404的情况下响应。

20.最小化DOM访问

使用JavaScript访问DOM元素很慢

Points of Interest

我希望这篇文章对某人有用。 如果你喜欢我的文章,请访问我的博客。


相关文章