网页优化

目录 网页优化 减少HTTP请求 缓存DNS HTML/CSS/JS优化 渲染优化 SEO优化 网页优化 上一章介绍了从输入地址到到显示网页...

网页优化

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

减少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
  • 发表于 2020-03-22 13:01
  • 阅读 ( 111 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除