浅谈前端优化技巧

1.书写html的时候做到结构语义化

    HTML结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body中的标签，但是我在这里还是简单的说一下head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，比如设置缓存等一些其他的信息。

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

    同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

2.合并压缩静态资源

    关于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请求数，降低网络传输压力，提高页面加载速度

3.批量请求资源

    这个需要后台的支持，看适用场景决定需不需要啦。这个作用主要也是减少请求。例如：

静态资源批量请求：

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

4.压缩传输

    压缩传输呢可以减小文件的大小，降低网络传输压力，提高页面响应速度。

Request Header（请求头）

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

Response Header（响应头）

Content-Encoding:gzip Content-Type:text/html;charset=utf-8 Transfer-Encoding:chunked

5.按需延迟加载

按需加载：

按功能拆分页面模块

按操作拆分页面模块

延迟加载：

图片延迟加载

信息延迟加载

    例如日访问量很高的新浪微博，当滚动到页面底端的时候会自动加载新的页面，分段加载可减轻服务器的压力，边浏览边加载，节省线性时间减少等待。

6.独立资源域名

    当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。 如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。这个常见的例子，就是百度图片啦。下面是一些浏览器的并发数量，仅供参考。

7.单页面应用性能与体验

    无刷新修改链接地址和浏览历史，在我们给用户展示一个页面时候，用户在页面进行其他的操作以后，页面内容已经改变，当然访问的地址也应该改变，这个需要我们去给他改变，不然用户要是分享该页面，分享地址就不对了。

    页面跳转保存用户现场，保证用户跳到原来看过的页面，能大概转到用户之前所看到的当前页面的具体位置，拥有良好的用户体验。

    初始页面的渲染，这个是看你想让用户先看到啥了，比如你想让用户首先看到的或者最主要看到的是第一屏，你可以把第一屏和其他页面的内容分开请求，不然等用户都要走了，你的页面还没有加载出来就不好了。

8.灵活使用浏览器缓存

页面过期时间

Cookie存储（个数、大小）

本地存储（LocalStorage、SessionStorage）

主要是减少请求，合理利用缓存。

9.浏览器调试工具

网络加载Timing

Queing – 排队 Stalled - 建立连接 Request sent – 发送请求 Waiting – 等待响应 Content Download – 下载响应内容 页面渲染Timeline http://www.ghugo.com/chrome-timeline/

这俩是可以看下我们请求的时间，js、css等各用了多久，具体分析具体优化。

10.总结

    以上的条条框框，不一定适合我们现在的开发环境，要看有没有需要了，好多自己的理解，开发中也好多没有用到的，有不对的请大家指点。