网页优化
程序员文章站
2022-06-19 10:45:43
网页优化 [Toc] 上一章介绍了 "从输入地址到到显示网页浏览器都干了什么" ,绝大部分的优化都在这个过程中 减少HTTP请求 减少HTTP请求是优化的重要手段 1. 减少图片使用 2. 对小图标这一类图片使用 合并, 或者使用 编码图片 1. 优点: 减少了请求 2. 缺点: 修改维护不方便, ......
网页优化
上一章介绍了,绝大部分的优化都在这个过程中
减少http请求
减少http请求是优化的重要手段
- 减少图片使用
- 对小图标这一类图片使用
css sprite
合并, 或者使用base64
编码图片- 优点: 减少了请求
- 缺点: 修改维护不方便, 只使用于较小图标
- 使用缓存存储页面信息, 用户刷新/再次打开直接读取缓存
- 对于有很多图片的页面,对图片做懒加载
- 对
js
,css
文件进行压缩,合并
缓存dns
dns缓存可以减少解析域名的时间
html/css/js优化
- 删除不必要的空格和注释
- 使用语义化更好的html标签
- 保持正确的嵌套,
p
标签中不要嵌套块级标签,a
标签不要嵌套a
标签,table
中不要嵌套table
- 尽量不要使用
iframe
(要用的话使用js
动态添加 src属性) - 将
css
,js
提取为外部文件,使用link
引入而不是@import
- link与@import区别
-
link
是html
标签,不存在兼容性问题,@import
是css2提出的,在很低版本浏览器可能不兼容 -
link
会并行下载(href
),@import
在页面被加载完成后再加载 -
link
引入权重高于@import
方式引入
-
- link与@import区别
-
css
放头部,js
放在尾部- js加载会阻塞页面的加载(页面只有等js执行完才会渲染)
- js在前面加载,如果要操作dom元素可能会报错(dom还未加载)
-
css
选择器不宜超过3个- 过多的选择器会导致 css树加载变慢
- 保持良好的css书写顺序
-
display/position/float
.. 等布局定位属性放在第一位 -
width/height/margin/paddin
g... 等自身属性放在第二位 -
text/color/font/
... 等文本属性放在第三位 - 渐变/阴影/... 等其他属性放最后
-
- 使用es6新规范来书写js代码
渲染优化
- 能用css实现就不用js
- 元素的位置移动不要用
left
,top
之类, 使用transform
属性(触发硬件加速) - 减少
dom
操作 - 需要改变的样式很多时候, 使用css和classname来添加类名而不是直接操作style属性
- 图片都要添加宽高,不要拉伸图片
- 在标签多的页面不要使用通配符
- 尽量少使用绝对定位
- 减少dom回流
- 引发dom回流的操作
- 添加或者删除可见dom元素
- 元素位置,尺寸,内容发生改变
- 浏览器尺寸发生改变
- 引发dom回流的操作
seo优化
提高网页在搜索引擎中的排名
- 合理的
title
,description
,keyword
- 语义化的html代码
- 重要内容放在前面,且不要用js输出
- 非装饰性图片都要加上 alt属性
- 合适的h1
- 良好的外部链接
- 少用iframe
上一篇: 青岛城市学院一年学费多少?附各专业收费标准2020年最新版
下一篇: JWT实现授权认证