网页优化

上一章介绍了从输入地址到到显示网页浏览器都干了什么,绝大部分的优化都在这个过程中

减少HTTP请求

减少HTTP请求是优化的重要手段

1. 减少图片使用
2. 对小图标这一类图片使用 CSS Sprite合并, 或者使用base64编码图片
   1. 优点: 减少了请求
   2. 缺点: 修改维护不方便, 只使用于较小图标
3. 使用缓存存储页面信息, 用户刷新/再次打开直接读取缓存
4. 对于有很多图片的页面,对图片做懒加载
5. 对JS,CSS文件进行压缩,合并

缓存DNS

DNS缓存可以减少解析域名的时间

HTML/CSS/JS优化

1. 删除不必要的空格和注释
2. 使用语义化更好的HTML标签
3. 保持正确的嵌套, p标签中不要嵌套块级标签, a标签不要嵌套a标签, table中不要嵌套table
4. 尽量不要使用 iframe (要用的话使用 JS 动态添加 src属性)
5. 将css,JS提取为外部文件,使用link引入而不是@import
   1. link与@import区别
      • link是HTML标签,不存在兼容性问题,@import是css2提出的,在很低版本浏览器可能不兼容
      • link会并行下载(href), @import在页面被加载完成后再加载
      • link引入权重高于@import方式引入
6. css放头部, js放在尾部
   1. js加载会阻塞页面的加载(页面只有等js执行完才会渲染)
   2. js在前面加载,如果要操作DOM元素可能会报错(DOM还未加载)
7. css 选择器不宜超过3个
   1. 过多的选择器会导致 css树加载变慢
8. 保持良好的css书写顺序
   1. display/position/float.. 等布局定位属性放在第一位
   2. width/height/margin/padding... 等自身属性放在第二位
   3. text/color/font/... 等文本属性放在第三位
   4. 渐变/阴影/... 等其他属性放最后
9. 使用ES6新规范来书写JS代码

渲染优化

1. 能用CSS实现就不用JS
2. 元素的位置移动不要用left,top之类, 使用transform属性(触发硬件加速)
3. 减少DOM操作
4. 需要改变的样式很多时候, 使用css和className来添加类名而不是直接操作style属性
5. 图片都要添加宽高,不要拉伸图片
6. 在标签多的页面不要使用通配符
7. 尽量少使用绝对定位
8. 减少DOM回流
   1. 引发DOM回流的操作
      • 添加或者删除可见DOM元素
      • 元素位置,尺寸,内容发生改变
      • 浏览器尺寸发生改变

SEO优化

提高网页在搜索引擎中的排名

1. 合理的title,description,keyword
2. 语义化的HTML代码
3. 重要内容放在前面,且不要用JS输出
4. 非装饰性图片都要加上 alt属性
5. 合适的H1
6. 良好的外部链接
7. 少用iframe