一：优化1
页面优化是对网页中的HTML代码进行必要的调整，可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性，当然也可以更好的突出页面的主题，提高页面的相关性。下面是我总结出来的编写html代码时需要注意的，仅供参考。
1、HTML标签有始终。 减少浏览器的判断时间
2、把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。
3、减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间
4、id和class，在能看明白的基础上，简化命名，在含有关键字的连接词中连接符号用'-'，不要用'_'
5、保持统一大小写，统一大小写有利于浏览器缓存，虽然浏览器不区分大小写，但是w3c标准为小写
6、清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格
7、减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。
8、减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索
9、使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
10、代码要结构化、语义化
11、css和javascript尽量全部分离到单独的文件中
12、除去无用的标签和空标签
13、尽量少使用废弃的标签，如b、i等，尽管高版本浏览器是向后兼容的
二：优化2
1.服务器响应时间
即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。当涉及到提高网站的速度，服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的小贴士。
- 有独立的服务器，而不是选择共享/托管服务器。
- 提高Web服务器的质量。
- 移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。
2.浏览器缓存
浏览器缓存可以减少HTTP请求，从而反过来提高网站的加载速度。下面就是如何利用浏览器缓存的代码示
Nginx可配置
注意：如果过期时间与文件挂钩，而此时文件中的内容需要更改的话，那必须先重命名文件，以便浏览器可以获取新添加的代码。
3.gzip压缩
gzip压缩是一个压缩实用程序，我们可以用它来快速加载网站。它的工作原理是在发送HTML和CSS文件到互联网浏览器之前，先压缩文件大小。允许mod_defalte模块启用Gzip压缩，下面是如何使用它的代码示
4.异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本，网站访问者也不再需要不得不按捺下性子，等待所有的脚本加载完之后才能呈现页面。在异步模式中，脚本是在后台下载的。通常，我们会将第三方脚本作为异步脚本，因为下载这些脚本时常会让网站速度变得非常慢。
5.内容分发网络（CDN）
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。要是有网站访问者请求文件和网页时，就可以直接从就近的网站服务器发送过来（也可以是从负载最小的服务器）。
6.优化JavaScript、HTML和CSS
优化JavaScript和CSS也可以提高一个网站的网页速度，而且这个方法非常简单。优化JavaScript、HTML和CSS就是删除所有不必要的空格和注释，从而减小文件大小。下面是一些最小化JavaScript和CSS的流行工具，非常有用。
7.置于顶部的样式表和底部的脚本
将样式表放在顶部有助网站的迅速加载，因为这样可以使得网页渐进式呈现。一般地，所有的互联网浏览器都支持在给定时间内并行下载两个组件（图像、样式和脚本）。但是通常而言，霸道的脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。
8.避免阻塞型的JavaScript和CSS
在浏览器呈现网页之前，它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中，如果遇到了脚本，此过程就会中止，转而先执行脚本，完了才会继续原先的活动。因此建议避免阻塞型的JavaScript，尤其是外部脚本。
阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript，或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上，同时需要确保CSS的优化。
9.JavaScript的延迟解析
为了加载网页，浏览器必须解析所有的<script>标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。
10.启用Keep Alive
当用户通过浏览器请求网页时，浏览器首先需要访问HTML文件。然后它才能读取这些文件，并请求与其他资料相关联（此处的资料可以是CSS，JavaScript，也可以是任何相关的图像）。
如果“Keep Alive”选项被禁止，那么下载网站的进程通常就会增加，从而拖累了网站速度。启用KeepAlive的另一个好处是，它可以减少CPU的使用。
引用
语法: KeepAlive On
11.图像和文件格式
图像对于任何网站都非常有价值，因为它能传达一些强有力的信息给网站的访问者。最常见的图像格式是GIF、JPEG、PNG等。每种格式都有其长处和局限。建议使用JPEG格式，而不是GIF和PNG图像，除非图像包含Alpha因子或者是透明的。
12.优化代码：不使用内联CSS
内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作，给网站管理员带来各种不便，还会进一步增加网页的大小。
13.文件分离
网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是，这么做可以提高服务器的稳定性，特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件，这样可以增加并行下载的数量。
14.尽量减少HTTP请求
还有一种简单的优化网页速度的方法是，减少HTTP请求。当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤。
- 减少网站上的对象数量；
- 最小化网站上的重定向数量；
- 使用CSS Sprites技术（只要你需要的那部分图片内容）；
- 结合JavaScripts和CSS。
三：优化3(PCweb也适用)
概述
1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点，首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
6. 基于第五点，要合理处理代码减少渲染损耗
7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能
优化指南
[加载优化]
加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点
· 减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片，使用雪碧图
· 缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
a) 缓存一切可缓存的资源
b) 使用长Cache（使用时间戳更新Cache）
c) 使用外联式引用CSS、JavaScript
· 压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip
a) 压缩（例如，多余的空格、换行符和缩进）
b) 启用GZip
· 无阻塞
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾
部或使用异步方式加载
· 使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化
· 按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量
PS：按需加载会导致大量重绘，影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载
· 预加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失
对用户行为分析，可以在当前页加载下一页资源，提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading（如提前加载下一页）
· 压缩图片
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示
PS：过度压缩图片大小影响图片显示效果
a) 使用智图（ http://zhitu.tencent.com/ ）
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））
· 减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie
· 避免重定向
重定向会影响加载速度，所以在服务器正确设置避免重定向
· 异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源
[脚本执行优化]
脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意
· CSS写在头部，JavaScript写在尾部或异步
· 避免图片和iFrame等的空Src
空Src会重新加载当前页面，影响速度和效率
· 尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
· 图片尽量避免使用DataURL
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长
[CSS优化]
· 尽量避免写在HTML标签中写Style属性
· 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式
· 移除空的CSS规则
空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则
· 正确使用Display的属性
Display属性会影响页面的渲染，因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float
· 不滥用Float
Float在渲染时计算量比较大，尽量减少使用
· 不滥用Web字体
Web字体需要下载，解析，重绘当前页面，尽量减少使用
· 不声明过多的Font-size
过多的Font-size引发CSS树的效率
· 值为0时不需要任何单位
为了浏览器的兼容性和性能，值为0时不要带单位
· 标准化各种浏览器前缀
a) 无前缀应放在最后
b) CSS动画只用 （-webkit- 无前缀）两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）
· 避免让选择符看起来像正则表达式
高级选择器执行耗时长且不易读懂，避免使用
[JavaScript执行优化]
· 减少重绘和回流
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 减少drawImage
· 缓存Dom选择与计算
每次Dom选择都要计算，缓存他
· 缓存列表.length
每次.length都要计算，用一个变量保存这个值
· 尽量使用事件代理，避免批量绑定事件
· 尽量使用ID选择器
ID选择器是最快的
· TOUCH事件优化
使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
[渲染优化]
· HTML使用Viewport
Viewport可以加速页面的渲染，请使用以下代码
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
· 减少Dom节点
Dom节点太多影响页面的渲染，应尽量减少Dom节点
· 动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
· 高频事件优化
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
b) 增加响应变化的时间间隔，减少重绘次数
· GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
PS：过渡使用会引发手机过耗电增加
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
