前端优化与建议

前端优化与建议

要进行优化就要先了解浏览器渲染过程

1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一起生成渲染树
4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
5. 将渲染树每个节点绘制到屏幕。将渲染树每个节点绘制到屏幕。

具体内容可以到 https://segmentfault.com/a/1190000010298038#articleHeader0

一.尽量的减少HTTP的请求数

为什么: 每一次HTTP请求都会消耗一定的时间, 过多的HTTP请求会拖慢页面的加载速度.
什么是:从客户端到服务器端的请求消息.包括消息首行中,对资源的请求方法,资源的标识符以及使用的协议
方法:压缩,打包,控制HTTP请求在100次以内

二.使用CDN(内容分发网络)

什么是:内容分发网络,基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快,更稳定
设置节点, 根据网络情况,就近传输

三.添加Expire/Cache-Control头

什么是:expire的头内容是一个时间值,值就是资源在本地的过期时间,存在本地,在本地缓存阶段,找到一个本地的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求
Cache-Control是HTTP协议中常用的头部之一,顾名思义,它是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地.操作流程和expire相似,但也有不同的地方,Cache-Control有更多的选项和处理方式

四.启用Gzip压缩

什么是: 在服务器端用Gzip压缩,客户端再次用Gizp压缩至缓存
pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，gzip对其效果不大

五.将CSS放在页面最上面

为什么: 提高浏览器的渲染性能,避免浏览器出现空白和闪烁的问题

六.将JavaScript放在页面的最下面

避免js出错后页面不显示,加载效率高

七.避免在CSS中使用Expressions

在页面显示和缩放,页面滚动,移动鼠标时,CSS中的Expressions都会重新计算

八.将JavaScripg和CSS放到外部文件

九.减少DNS查询

方法:缓存
时间长时: 减少DNS的重复查找,节省时间
时间短时: 及时的检测网站服务器的变化,保证正确性

十.JavaScript和CSS压缩和模块打包

1.去除不必要的空白符,格式符,注释符
2.简写方法名,参数名,压缩JS脚本

十一.避免重定向

什么是: 原始请求被转向了其他页面
为什么: 查找原始页面和重定向到其他页面都要花费较长的时间
301: Moved Permanently
永久重定向
302:Found
临时重定向

十二.移除重复的脚本

十三.配置实体标签(ETag)

什么是:Entity Tag(实体标签) 属于HTTP协议,受WEB服务支持
优点:
使用特殊的字符串,来标识某个请求资源版本
如果客户端接收到的ETag与服务器的ETag一致,那么服务器会返回304
帮服务器减轻负担
缺点:
Etags的版本信息即使主流服务器也未能很好地支持跨服务器的判断，比如你从一个服务器集群中一台 到Etags，然后发送到了另一台那么校验很有可能会失败。

十四.使用AJAX缓存

十五.避免空的src和href

为什么: 当src和href为空的时候,浏览器在渲染过程中会把 src和href 属性中的空内容进行加载，直至加载失败，影响DOMContentLoaded 与 Loaded 事件之间的资源准备过程，拉长了首屏渲染所用的时间。

十六.减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别
document.getElementsByTagName("*").length 可以获取页面中有多少的元素

十七.根据域名划分内容

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以使浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询也是个问题。
一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。

十八.减少iframe数量
使用iframe要注意理解iframe的优缺点
优点:

1.可以用来加载速度较慢的内容，例如广告。
2.安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
3.脚本可以并行下载
4.相同的网页内容可避免代码重复

缺点:

1.即使iframe内容为空也消耗加载时间
2.会阻止页面加载
3.没有语义,不适合SEO优化

十九.避免404

404代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间就浪费掉了。
更糟糕的是网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析

二十. 减少Cookie大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度

1.去除没有必要的cookie，如果网页不需要cookie就完全禁掉
2.将cookie的大小减到最小
3.注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
4.设置合适的过期时间，比较长的过期时间可以提高响应速度。

二十一.减少DOM访问
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意:

1.缓存已经访问过的元素
2.Offline更新节点然后再加回DOM Tree
3.避免通过Javascript修复layout

二十二.优化图像
在上传图片之前对其做以下优化

1. 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
2. 尝试把GIF格式转换成PNG格式
3. 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具)
4. 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优 化和清除图片中的注释以及其它无用信息

二十三.优化CSS Sprite

1. Spirite中水平排列图片，垂直排列会增加文件大小
2. Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式
3. 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素

二十四.使用小且可缓存的favicon.ico

网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标
1.存在
2.文件尽量小，最好小于1k
3.设置一个长的过期时间

二十五.移动客户端图片保持单个内容小于25KB

这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用

二十六.打包组建成复合文档

把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。

二十七. 按需加载资源
资源（特别是图片）的按需加载或者说懒加载，可以有助于你的 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处：

1.减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）
2.减少浏览器的内存使用率（更少的图片，更少的内存）
3.减少服务器端的负载

二十八. 使用预加载
预加载可以,在真正需要之前,通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:

1.链接预先获取
2.DNS 预先获取
3.预先渲染
在你离开当前 web 页面之前，使用预先获取方式，对应每个链接的 URL 地址，CSS，图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。你只需在网站 HTML 中的链接属性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 标记

二十九. HTML文档结构层次尽量少，最好不深于六层

三十. 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回
流

三十一. 动画优化

1.减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画
2.动画尽量使用在绝对定位或固定定位的元素上
3.隐藏在屏幕外，或在页面滚动时，尽量停止动画