性能优化 ,监控

本文探讨了前端性能优化的多种策略,包括规避JavaScript函数重名、降低页面加载时间、理解Web攻击技术如XSS和SQL注入,以及前端性能优化实践如DNS预解析、预加载、预渲染和懒加载。此外,还介绍了图像优化、webpack性能优化和前端监控的重要性。重点讲述了图片格式的选择、CSS精灵和CDN的使用,以及jQuery和Zepto的源码优点。
摘要由CSDN通过智能技术生成
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格式显示的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值