欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

网页优化

程序员文章站 2022-06-19 10:45:43
网页优化 [Toc] 上一章介绍了 "从输入地址到到显示网页浏览器都干了什么" ,绝大部分的优化都在这个过程中 减少HTTP请求 减少HTTP请求是优化的重要手段 1. 减少图片使用 2. 对小图标这一类图片使用 合并, 或者使用 编码图片 1. 优点: 减少了请求 2. 缺点: 修改维护不方便, ......

网页优化

上一章介绍了,绝大部分的优化都在这个过程中

减少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区别
      • linkhtml标签,不存在兼容性问题,@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