品牌网站开发策划书,wordpress页面如何设置新窗口,推广平台赚钱,如何把字体安装在wordpress1.性能优化包含的方面
优化性能概念宽泛#xff0c;可以从信号、系统、计算机原理、操作系统、网络通信、DNS解析、负载均衡、页面渲染。只要结合一个实际例子讲述清楚即可。
2.什么是性能#xff1f;
Web 性能是客观的衡量标准#xff0c;是用户对加载时间和运行时的直观…1.性能优化包含的方面
优化性能概念宽泛可以从信号、系统、计算机原理、操作系统、网络通信、DNS解析、负载均衡、页面渲染。只要结合一个实际例子讲述清楚即可。
2.什么是性能
Web 性能是客观的衡量标准是用户对加载时间和运行时的直观体验。
Web 性能指页面加载到可交互和可响应所消耗的时间以及页面在交互时的流畅度——滚动是否顺滑按钮能否点击弹窗能否快速打开动画是否平滑
Web 性能既包括客观的度量如加载时间每秒帧数和到页面可交互的时间
也包括用户的对页面内容加载时间的主观感觉。
3.如何进行Web性能优化?
1. 首先需要了解性能指标 - 多块才算快---》如从请求到页面渲染完毕从多少时间减少到了多少时间
2. 使用专业的工具可量化的评估出网站或应用的性能表现第三方插件
3. 从网站页面响应的生命周期分析出造成较差性能表现的原因
4. 进行技术改造可行性分析等具体的优化实施---》如大数据量加载资源文件进行CDN缓存等
5. 迭代优化---》一个模块一个模块不断优化
4.web性能报告——lighthouse
Lighthouse分析web应用程序和web页面收集关于开发人员最佳实践的现代性能指标和见解让开发人员根据生成的评估页面来进行网站优化和完善提高用户体验。
5.Lighthouse的使用方式
1. 使用google浏览器自带工具Lighthouse
2. 在google应用商店下载扩展程序
Lighthouse会从5个维度给出打分检测得分 性能指标 优化建议 诊断结果及已通过的性能
经过检测Lighthouse会对上述5个维度给出0~100的评估得分得分能到达90分以上则说明网站应用在该方面的评估表现符合最佳实践如下图所示 整个评测结果会给出优化建议将从下面几点说明
1. **移除阻塞渲染的资源**
部分javascript脚本文件和样式表文件可能会阻塞系统通对网站页面的首次渲染建议可将其以内嵌的方式引用并考虑延迟加载。报告中会将涉及需要优化的资料文件排列在下面每个文件还包括尺寸大小信息和优化后预计提升首屏渲染时间的效果据此可安排资源文件优化的优先级
如elementui很多资源都是放在CDN里面当使用elementui时就很可能遇到CDN服务器挂掉的时候就可以将elementui资源通过内嵌script方式进行引入当然elementui资源很多实际开发中不可能直接引入就可以通过npm下载包的形式引入
2. **预连接所需要请求的源**
提前建立与所要访资源之间的网络连接有两种方式。第一种是设置link relpreconnect的预连接另一种是设置link reldns-prefetch的DNS预解析。
3. **降低服务端的响应时间**
资源请求时浏览器会发出get请求
图片资源收到同源策略影响但是是运用了资源嵌入式请求所以不会有跨域问题
网络查看里面如果区分ajax请求和fetch请求network里面的type形式ajax的type是xhr
服务器本身限制带宽浏览器和服务器之间传输速度内核服务器性能响应快慢内存超过内存就会变慢
高并发一般在后端前端比如秒杀活动太多人点击按钮
4. **适当调整图片大小**
除此之外报告还给出诊断结果同理以下几个维度来说明 1. **对静态资源文件使用高效的缓存策略**
比如对图片cssjs文件的缓存。如使用浏览器缓存使用CDN静态资源缓存
2. **减少主线程的工作** 浏览器在渲染主进程时需要处理大量工作比如解析HTML构建DOM解析css样式表文件和执行javascript文件。所以渲染进程的主线程繁忙会导致用户响应延迟的不良体验在Lighthouse中会提供主线程对各个任务的执行耗时让开发者可以针对异常处理过程进行有目标的优化
3. **减少http请求数**
如10张图片请求十次和将10张图做成一张图成一张图
针对图片
对于小型的图片比如不超过10kb的转化为base64再通过background-image进行引入
大型图片适当范围内进行压缩产品接受范围内
小型icon图标传统模式使用精灵图字体图标形式图标矢量库放大缩小不会失真
5.浏览器缓存策略 强缓存 - 不会向服务器发送请求直接从缓存中读取资源在chrome控制台的Network选项中可以看到该请求返回200的状态码并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现Expires 和 Cache-Control。 - Cache-Control - public 表示响应可以被客户端和代理服务器缓存 - private 表示响应只可以被客户端缓存 - max-age30 缓存30秒后过期需要重新请求 - s-maxage30 覆盖max-age作用一样只在代理服务器中生效 - no-store 不缓存任何响应 - no-cache 资源被缓存但是立即失效下次会发起请求验证资源是否过期 - max-stale30 30秒内即使缓存过期也使用该缓存 - min-fresh30 希望在30秒内获取最新的响应 - Expires - 缓存过期时间用来指定资源到期的时间是服务器端的具体的时间点。也就是说Expiresmax-age 请求时间需要和Last-modified结合使用。Expires是Web服务器响应消息头字段在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据而无需再次请求。 **缺点**受限于本地时间如果修改了本地时间可能会造成缓存失效
- 强缓存的两个状态network中的size属性中进行查看页面首次打开从服务器获取刷新后会从memory cache中读取如果这个页面不关闭然后重新打开一个窗口访问刚才的同一个地址会从disk cache中读取都读取不到就会去服务器读取 - from memory cache - 不访问服务器一般已经加载过该资源且缓存在了内存当中直接从内存中读取缓存。浏览器关闭后数据将不存在资源被释放掉了再次打开相同的页面时不会出现from memory cache。 - from disk cache - 不访问服务器已经在之前的某个时间加载过该资源直接从硬盘中读取缓存关闭浏览器后数据依然存在此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。
协商缓存 - 协商缓存就是强制缓存失效后浏览器携带缓存标识向服务器发起请求由服务器根据缓存标识决定是否使用缓存主要有以下两种情况 - 协商缓存生效返回304和Not Modified比强缓存会慢一些 - 协商缓存失效返回200和请求结果
6.精炼js代码
- 代码复用
- 减少业务复杂度
- 算法上优化网站——力扣 - 一般情况下算法中基本操作重复执行的次数是问题规模n的某个函数用T(n)表示若有某个辅助函数f(n),使得当n趋近于无穷大时T(n)/f(n)的极限值为不等于零的常数则称f(n)是T(n)的同数量级函数。记作T(n)O(f(n)),称O(f(n)) 为算法的渐进时间复杂度简称时间复杂度。
- 动态规划
动态规划常常适用于有重叠子问题和最优子结构性质的问题动态规划方法所耗时间往往远少于朴素解法。
动态规划背后的基本思想非常简单。大致上若要解一个给定问题我们需要解其不同部分即子问题再根据子问题的解以得出原问题的解。
- 适用情况 - 最优子结构 最优子结构性质。如果问题的最优解所包含的子问题的解也是最优的我们就称该问题具有最优子结构性质即满足最优化原理。最优子结构性质为动态规划算法解决问题提供了重要线索。 - 无后效性。 即子问题的解一旦确定就不再改变不受在这之后、包含它的更大的问题的求解决策影响 - 子问题重叠 子问题重叠性质。子问题重叠性质是指在用递归算法自顶向下对问题进行求解时每次产生的子问题并不总是新问题有些子问题会被重复计算多次。动态规划算法正是利用了这种子问题的重叠性质对每一个子问题只计算一次然后将其计算结果保存在一个表格中当再次需要计算已经计算过的子问题时只是在表格中简单地查看一下结果从而获得较高的效率。
6. 一道面试题:从浏览器地址栏输入URL后到页面渲染出来整个过程都发生了什么
1、首先浏览器在输入URL之后会先解析URL判断是否合法
2、合法的话会查看浏览器缓存判断是否有缓存如果有缓存则显示
3、如果没有缓存浏览器会向服务器发送HTTP协议会进行DNS解析获取IP地址
4、浏览器和服务器进行TCP连接进行三次握手
5、握手成功之后浏览器会向服务器发送http请求请求数据包
6、服务器处理请求将数据返回给浏览器
7、浏览器收到HTTP响应后会解析它
8、浏览器发送异步请求然后渲染页面
可以做到性能优化的点
发出请求之前对页面事件滚动等进行优化获取到数据后部分分页渲染资源文件缓存代码优化等
