性能优化 ,监控

最新推荐文章于 2025-06-16 23:50:27 发布

以南的地方是海

最新推荐文章于 2025-06-16 23:50:27 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lihuijuan_1/article/details/86666369

前端专栏收录该内容

13 篇文章

订阅专栏

本文探讨了前端性能优化的多种策略，包括规避JavaScript函数重名、降低页面加载时间、理解Web攻击技术如XSS和SQL注入，以及前端性能优化实践如DNS预解析、预加载、预渲染和懒加载。此外，还介绍了图像优化、webpack性能优化和前端监控的重要性。重点讲述了图片格式的选择、CSS精灵和CDN的使用，以及jQuery和Zepto的源码优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，规避js多人开发函数重名问题

1命名空间
2封闭空间
3js模块化MVC(数据层，表现层，控制层)
4seajs
5变量转为对象的属性
6对象化

2，降低页面加载时间的方法

1 ，压缩css,js文件
2，合并js,css文件，减少http请求
3，外部js,css文件放在最底下
4，减少DOM操作，尽可能用变量替代不必要的dom操作

3，你所了解到的web攻击技术

1xss（跨站脚本攻击）是一种在web应用中的计算机安全漏洞，它允许恶意用户将代码植入提供给其他用户使用的页面中。也就是说恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去，使别的用户访问都会执行相应的嵌入代码
危害：
* 1，窃取企业信息
* 2，网站挂马
* 3，非法转账
* 4，强制发送电子邮件
* 5，控制受害的机器向其他机器发送攻击
类型
* 1，存储式：先发送到服务器，不需要再次发送了，
* 2，反射式：恶意代码存在url中发送到服务器，服务器解析给浏览器，浏览器把恶意代码当成正常的解析，xss发生
* 3，DOM：不需要发送到服务器，在浏览器操作，
2，SQL注入攻击，是黑客对数据库进行攻击的常用手段之一，

4，web前端开发，如何提高页面性能优化

1 请求数量：减少http请求，合并样式和脚本，使用精灵图，初始的首屏之外的资源按需加载，静态资源延迟加载。外部js和css放地下
2请求宽带：压缩文件，开启GZIP,减少DOM数量
3 缓存利用，缓存ajax,使用CDN,使用外部js，css文件以便缓存，加载Expires,服务器配置Etag,减少DNS查找
4 代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
5 使用缓存mainfest

代码层面的优化

用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化js性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免css Expression
避免图片和iframe等的空src，空src会重新加载当前页面，影响速度和效率
高性能
1，DNS负载均衡；在DNS中为多个IP地址配置同一个域名：
2，
面向图片
1，优化图片
2，不要在html页面中使用缩放图片
3，使用恰当的图片格式,（小图使用base64格式）
* 对于能用webp格式显示的浏览器使用webp,能更好的压缩，图片体积更小，图像质量高,同时具有有损和无损压缩模式，透明度以及动画特性，缺点就是兼容性不好。
* 使用Apng
4，使用css sprites(css精灵)对图片进行优化
优点：
1，能够减少http请求
2，避免了网页设计师多张图片命名的困扰
3，字节也会减少，让3张图片放在一张上比3张独立的图片占用的字节数少
4，更换风格也方便，只需要在一张或者少量图片上更改颜色样式，整个网页的风格就会改变，维护起来比较方便
缺点：
* 1在图片合并的时候要有序的合理的合并成一张图片，要留好足够的空间，防止板块内出现不必要的背景。在宽屏，高分辨率的情况下，图片不够宽的时候会出现背景断裂。
* 2开发的时候比较麻烦，要使用Photoshop或其他工具测量每一单元的精确位置。
* 3如果页面有少许图片改动的话，可能会改变许多css
图片计算大小：
像素100100的图片，像素值用RGBA存储，即每个像素有4个通道，每个通道有一个字节。约39k(10010041/1024)
- 减少像素点
- 减少每个像素点显示的颜色
  图片加载优化
- 不用图片，用css代替
- 对于移动端来说，屏幕宽度就那么点，没必要加载原图浪费宽带，一般使用CDN加载，可以计算出适配屏幕的宽度，然后去请求相应的裁剪好的图片。

DNS预解析

<link rel='dns-prefetch' href=''>

预加载

预加载其实是声明式的fetch,强制浏览器请求资源，并且不会阻塞onload事件

 <link rel='preload' href='xxx'>

预渲染

将下载的文件先在后台渲染

<link rel='prerender' href='xxx'>

懒执行

将某些逻辑延迟到要使用的时候再计算，可用于首屏优化，对某些于费时且不需要在首屏使用的可以用懒执行，一般通过定时器或者事件触发。

懒加载

将不关键的资源延后加载。
懒加载的原理就是只加载在自定义区域（通常是可视区域）内需要加载的东西。对于图片来说，先设置图片的src属性占位，将真实的资源放在一个自定义属性中，当进入自定义区域时，将自定义属性替换src属性，

CDN

内容分发网络，去请求最近的服务器，可以将静态资源尽量使用CDN加载。因为浏览器对单个域名有并发请求上限，可以使用多个CDN域名。

5，前端开发中，如果优化图像，图像格式的区别

优化图像

1不用图片，用css3代替，比如圆角，透明
2使用矢量图svg代替位图
3使用恰当的图片格式，jpeg,png,gif

webpack性能优化

有哪些方式可以减少 Webpack 的打包时间

1，优化Loader
影响打包效率的最重要的是Babel。因为babel会将代码转为字符串生成AST,然后对AST继续进行转变最后生成新的代码，项目越大，转换的代码越多，效率越低。可以通过优化loader的搜索范围

module.exports={
 module:{
     rules:[
      {
        test:'/\.js/',  //js文件下才使用babel
        loader: 'babel-loader?cacheDirectory=true'  Babel编译过的文件缓存起来
        include:[resolve('src')],//只在src文件下查找
        exclude:/node_modules/
       }
     ]
 }
}

2,HappyPack
受限于node的单线程，webpack也是单线程的，
happyPack可以让loader的同步执行转换为并行的。

module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]