Web优化

Nie_XiaoGang

已于 2024-08-08 23:19:08 修改

阅读量865

点赞数

分类专栏：笔记文章标签： web安全安全网络

于 2022-07-21 23:45:30 首次发布

本文链接：https://blog.csdn.net/Nie_XiaoGang/article/details/125922863

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Web优化

在这里插入图片描述

页面加载优化

页面加载顺序
1、解析HTML，构建DOM树
2、解析CSS，构建CSSOM树
3、合并DOM和CSSOM,构建渲染树(Render Tree)
4、计算布局,计算元素位置和大小信息
5、加载图片及外部内容,如果此时dom元素的集合属性发生变化，则会发生回流，重新执行以上几步
6、网页加载完毕
页面加载主要耗时
Waiting（TTFB）耗时：指用户打开页面到服务器返回第一个字节之间的等待时间，一般在500ms以内。主要受用户网速与站点服务器响应速度影响
Dom Completed耗时：完成页面加载的时间。

请求优化

浏览器的缓存策略

强缓存：直接使用浏览器缓存中的内容，不向服务器发送请求，在响应头配置Cache-Control
no-cache 是指先要和服务器确认是否有资源更新，在进行判断。也就是说没有强缓存，但是会有协商缓存；
no-store 是指不存储缓存，也就没有缓存可使用，每次请求都直接从服务器获取资源。
max-age=3：3s内再次发起相同请求不会去服务器重新请求，使用缓存数据
协商缓存（Etag）：请求的资源通过资源标识与服务器协商比对，协商成功，服务器返回304状态码，浏览器从本地加载。协商缓存需要用到 Etag 字段与 if-none-match，Etag 是 HTTP响应头中的字段，Etag 的值是根据资源内容编码生成的一段字符串（资源标识），内容不同就会生成不同的Etag。
再次发起请求时，请求头会带有if-none-match字段，值为上一次响应的 Etag（没有则不会携带）。
静态的html页面设置http缓存
通过HTTP的META设置cache-control

 <meta http-equiv="Cache-Control" content="no-cache" />

如果不想命中协商缓存与强缓存，win系统可以直接 ctrl + f5

cookie优化

少使用Cookie，发送请求时，浏览器会自动带上cookie，cookie内容越多请求越慢

代码层面的优化

seo搜索引擎优化

<!-- 1. TDK标题编写：-->
<title>网站标题</title>
<meta name="keywords" content="北京餐饮物联网，北京餐饮物联网平台，餐饮物联网，餐饮">
<meta name="description" content="北京餐饮物联网平台是一个提供美食餐饮相关咨询的网站">

1.语义化标签，结构与样式分离
H5新增的语义化标签，以及strong，h等含有语义的标签利于浏览器爬取，排除死链接
图片需要加上alt，title属性,以及label的运用,增加用户体验

html优化

1.减少不必要的元素嵌套，尽量扁平化，浏览器编译更快
2.采用div+css布局，避免使用table布局，table要等其中的内容完全下载后才会显示出来，显示比div+css慢
3.少写行内样式，做到结构与样式分离
4.script标签写到html末尾，防止js阻塞页面解析
5.多使用语义化标签，利于浏览器爬取，也利于开发人员维护

css优化

提升css实现性能的方式可以从选择器嵌套、属性特性、减少http请求这三面考虑，同时还要注意css代码的加载顺序

少写内联样式

内联样式不易阅读、维护，特别是内联样式优先级较高的问题
影响打包效率

合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

先找到h3标签元素
然后去除祖先不是.content的元素
最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高
所以我们在编写选择器的时候，可以遵循以下规则：

不要嵌套使用过多复杂选择器，最好不要三层以上
使用id选择器就没必要再进行嵌套
通配符和属性选择器效率最低，避免使用

不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import
@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
而且多个@import可能会导致下载顺序紊乱

比如一个css文件index.css包含了以下内容：@import url("reset.css")
那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

资源加载

icon图标使用字体图标
使用压缩工具压缩图片体积

资源压缩

利用webpack、gulp/grunt、rollup等打包工具，将css文件进行压缩，使文件变小，大大降低了浏览器的加载时间

javascript优化

减少对dom操作，减少重绘和重排，销毁或重建元素，修改元素几何属性会引发重排
可以适当使用innerHTML代替dom操作，减少dom操作次数，优化性能
适当使用事件委托，减少注册监听事件
内存问题，少用全局变量，慎用闭包，避免造成内存泄漏
封装可复用的函数
防抖函数和节流函数的使用，避免短时间内多次执行回调，造成资源的浪费
switch语句替代if ... else...

Vue项目中的优化

v-if和v-show的使用，需要频繁切换时使用v-show。因为v-if是通过销毁重建dom实现的，性能消耗较大；v-show是通过修改display属性来实现显示隐藏
v-for遍历时要指定非下标的唯一key值，提高虚拟dom对比效率。
v-for不要和v-if一起使用，v-for的优先级高于v-if，每次遍历后都要计算v-if，浪费性能
组件销毁时及时清除addEventListener绑定的事件和定时器等，可在beforeDestory钩子中清除
路由和组件使用懒加载：const Home = () => import(@/views/Home)
图片懒加载：vue-lazyload