当前位置： 移动技术网 > IT编程>网页制作>CSS > 网页优化

网页优化

2020年03月21日  | 移动技术网IT编程  | 我要评论

月高高歌词,热夜性派对,网人

目录

网页优化

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

减少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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网