HTML结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的,当然,还有其他的一些,比如设置缓存等一些其他的信息。
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。
关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。另外, CSS、 Javascript、Image 都可以用相应的工具进行压缩,压缩后往往能省下不少空间。
JS、CSS、图片、HTML皆可压缩合并,如:
a.js → a.min.js
b.js → b.min.js
a.js + b.js → comm.min.js
图片的处理:
压缩单张图片,适配固定分辨率 合并细碎图片,使用CSS精灵渲染(就是把多个图片拼成一副图片,然后通过CSS 来控制在什么地方具体显示这整张图片的什么位置)
作用:减少http请求数,降低网络传输压力,提高页面加载速度
这个需要后台的支持,看适用场景决定需不需要啦。这个作用主要也是减少请求。例如:
静态资源批量请求:
Load[a.js]: code fragment for a
Load[b.js]: code fragment for b
Load[a.js + b.js]: code fragment for a code fragment for b
后端接口批量请求:
Ajax[API/A]: result for a Ajax[API/B]: result for b Ajax[API/A + API/B]: result for batch a:result for a b:result for b
压缩传输呢可以减小文件的大小,降低网络传输压力,提高页面响应速度。
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 Accept-Encoding:gzip, deflate, sdch, br Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Content-Encoding:gzip Content-Type:text/html;charset=utf-8 Transfer-Encoding:chunked
按需加载:
按功能拆分页面模块
按操作拆分页面模块
延迟加载:
图片延迟加载
信息延迟加载
例如日访问量很高的新浪微博,当滚动到页面底端的时候会自动加载新的页面,分段加载可减轻服务器的压力,边浏览边加载,节省线性时间减少等待。
当我们在浏览网页的时候,对浏览速度有一个重要的影响因素,就是浏览器的并发数量。并发数量简单通俗的讲就是,当浏览器网页的时候同时工作的进行数量。 如果同时只有2个并发连接数数量,那网页打开的时候只能依赖于这2条线程,前面如果有打开慢的内容,就会直接影响到后面的内容打开。这个常见的例子,就是百度图片啦。下面是一些浏览器的并发数量,仅供参考。
无刷新修改链接地址和浏览历史,在我们给用户展示一个页面时候,用户在页面进行其他的操作以后,页面内容已经改变,当然访问的地址也应该改变,这个需要我们去给他改变,不然用户要是分享该页面,分享地址就不对了。
页面跳转保存用户现场,保证用户跳到原来看过的页面,能大概转到用户之前所看到的当前页面的具体位置,拥有良好的用户体验。
初始页面的渲染,这个是看你想让用户先看到啥了,比如你想让用户首先看到的或者最主要看到的是第一屏,你可以把第一屏和其他页面的内容分开请求,不然等用户都要走了,你的页面还没有加载出来就不好了。
页面过期时间
Cookie存储(个数、大小)
本地存储(LocalStorage、SessionStorage)
主要是减少请求,合理利用缓存。
Queing – 排队 Stalled - 建立连接 Request sent – 发送请求 Waiting – 等待响应 Content Download – 下载响应内容 页面渲染Timeline http://www.ghugo.com/chrome-timeline/
这俩是可以看下我们请求的时间,js、css等各用了多久,具体分析具体优化。
以上的条条框框,不一定适合我们现在的开发环境,要看有没有需要了,好多自己的理解,开发中也好多没有用到的,有不对的请大家指点。