html6sh@vip.163.com
QQ:3272893092
分享数：3
1，建一个快速打开的手机网站，就得砍掉非核心体验的过程，
减少依赖文件：更少的文件意味着更少的http请求与更快的加载时间。
降低图片大小：适应与调整高分辨率图片，在额外的下载时间中占居榜首，占用了宝贵的内存与处理资源。
减轻客户端负担：最佳实践是重新思考你的javascript，并使之降低到最小尺寸。
2，减少依赖文件
如果你想为移动端用户隐藏图片，display:none与visibility：hidden是不能阻止文件下载的，测试下面的代码：
<div>
<img src="https://www.fractal-technology.com/fxbk/logo-none.png" />
</div>
<div>
<img src="https://www.fractal-technology.com/fxbk/logo-hidden.png" />
</div>
另外替代方案是利用css加载背景图片，之后利用media query媒体查询来通过条件隐藏图片。
3，保持最小数量的外联样式表
不管怎么样 ，样式表都会被加载，你需要把这些文件合并在一个文件里，减少http请求。
另一种方法，你可以通过后端处理，通过判断设备来自动插入样式表 (这种方式在wordpress的响应式网站中使用过)。
另一种方案可以使用内部样式，亚马逊独立的移动产品页面有一个6KB大小的外部样式表，连同一些内部样式，这只需要通过一个额外的HTTP请求来下载所有的页面样式，亚马逊的桌面版本并不是很高效，带有9个外部样式表，总共40KB。
4，利用CSS3代替图片
圆角，阴影，渐变填充等，这些样式不需要使用图片，可以减少http请求，加快加载时间
CSS3可以减少http请求，但增加了处理负荷，我们创建了一系列的html文件，每个文件包含一个基本的css3特性，参考下面的图表，你可以发现css3带来的处理时间很小，但不能不考虑，特别注意box-shadow对处理时间的影响最大。
5，DATAURI来代替图片与WEB字体文件
Data uri方案可以不使用任何额外资源就可以向html及css中插入内容，这个技术可以在web页面中插入任何内容，通常被用于插入图片及web字体文件，这个技术最大的好处是可以减少http请求。
Data uri使用很简单，你可以按照下面的格式，使用base64编码过的数据直接插入html与css中代替图片文件。
6，字体图标
字体图标是利用字体文件来包含符号和图表(如Wingdings或Webdings 都是某种图标字体)，可以用来代替加载一个图像文件，
Wingdings和Webdings有点过气了，现在有其他更专业的Web字体可用的，可以通过font-face加载。
单独的Web字体，对于所有图标来讲，HTTP请求的数量可以减少到一个，如果Web字体使用数据URI(如上所述)嵌入页面，HTTP请求可以减少到零，这正是WordPress使用的技术，这是他们样式表中嵌入的web字体：
,WordPress访问所有这些图标，不会有任何额外的HTTP请求，因为图标通过数据URI，以Web字体的方式嵌入到WordPress的样式表中。
同时，字体图标可以使用CSS3关键帧动画(这很有用，比如“加载”图标(小菊花))，主要的缺点是，字体图标做成的CSS sprites只能是某个纯色，亚马逊的css雪碧图包括彩色图标，因此它不能使用这种技术。
7，避免内联 iframe：
每一个内联框架(iframe)都会生成一个 HTTP 请求，这是在 iframe 内没有另外依赖资源的情况下，这是我们做一个快速测试，比较一个 iframe 只含有文本。包含一个 iframe 增加了将近 0.2s 的加载时间，为了保证 web 站点加载迅速，最好不要使用 iframe。当然这个在移动端网站应该是非常少使用的，子凡经常见到的就是在 PC 端用这个的还挺多的。
8，减少客户端处理：Javascript 对加载时间的影响，在移动端较小的内存，cpu 及缓存下会表现得更明显，通常，我们要重新思考 javascript 的使用，并保持其在最小尺寸。
9，手机网站建设其他应该注意的地方等。
TAG标签耗时：0.00092697143554688 秒
如没特殊注明，文章均为江浙沪网络推广,转载请注明来自https://www.seokaowo.com/html/news/
返回列表
- 下一篇： 企业网站建设中图片的优化方法
- 上一篇： 大型网站建设应注意的问题
志强网络拥有资深设计师团队和自主系统开发技术团队，为客户专业定制企业品牌网站、响应式网站、商城系统、手机微信网站、外贸网站、营销型网站、旅游网站、微信小程序、APP等。欢迎广大客户咨询！
