网站被跳转公告怎么写,土特产网站建设状况,如何自己做众筹网站,网站域名申请了该怎么做「面试专栏」前端面试之性能优化篇#x1f4ac;序言#x1f4af;思维导图抢先看#x1f441;️#x1f5e8;️一、html、css、js、jq优化1、针对HTML#xff0c;如何优化性能#xff1f;2、针对CSS#xff0c;如何优化性能#xff1f;3、哪些方法能提升移动端CSS3动画… 「面试专栏」前端面试之性能优化篇序言思维导图抢先看️️一、html、css、js、jq优化1、针对HTML如何优化性能2、针对CSS如何优化性能3、哪些方法能提升移动端CSS3动画体验4、针对 JavaScript如何优化性能5、jQuery性能优化如何做️二、网站端、移动端优化1、谈谈你对重构的理解。2、列举你知道的Web性能优化方法。3、移动端性能如何优化4、哪些方法可以提升网站前端性能5、谈谈性能优化问题。6、如果一个页面上有大量的图片大型电商网站网页加载很慢可以用哪些方法优化这些图片的加载从而提升用户体验7、如何对网站的文件进行优化8、请说出几种缩短页面加载时间的方法。9、你知道哪些优化性能的方法10、你知道哪些SEO搜索引擎优化的方法️三、代码、服务器端优化1、平时你是如何对代码进行性能优化的2、如何优化服务器端3、如何优化服务器端的接口4、如何优化脚本的执行5、页面渲染有哪些优化方式6、如何设置DNS缓存7、什么时候会出现资源访问失败8、为什么利用多个域名来存储网站资源会更有效9、有一个页面他必须实时展示最新的数据你有哪些方案四、性能优化文章补充五、结束语彩蛋 One More Thing️参考资料️pdf内容获取️番外篇序言
平常我们在加载网页的时候首先需要先加载网页代码之后渲染出页面在这个期间会执行若干个 JS 。那么如果想要让网页呈现速度和渲染速度快我们就得保证我们的代码在浏览器这个运行环境当中稳定且高效。这就谈到一个前端性能优化的问题。
以下这篇文章将讲解一些关于性能优化的常考题欢迎大家查阅~
思维导图抢先看
我们先用一张思维导图来梳理一遍知识点。详情见下图
思维导图收进囊中了。现在我们一起来看常见的面试题解答~
️️一、html、css、js、jq优化
1、针对HTML如何优化性能
具体方法如下
1 对于资源加载按需加载和异步加载。
2 首次加载的资源不超过 1024KB(1M) 即越小越好。
3 压缩 HTML、CSS、 JavaScript 文件。
4 减少 DOM 节点。
5 避免空 src空 src 在部分浏览器中会导致无效请求。
6 避免 30 、 40 、 50 请求错误。
7 添加 Favicon.ico如果没有设置图标 ico 则默认的图标会导致发送一个404或者500的请求错误。
2、针对CSS如何优化性能
具体优化方法如下
1 正确使用 display 属性 display 属性会影响页面的渲染因此要注意以下几方面。
display:inline 后不应该再使用 width、 height、 margin、 padding和float 。
display:inline-block 后不应该再使用 float。
display:block 后不应该再使用 vertical-align。
display:table-* 后不应该再使用 margin或者float。2 不滥用 float 。
3 不声明过多的 font-size 。
4 当值为0时不需要单位。
5 将样式表放在页面顶部。
6 使用less 、scss 表达式。
7 使用 link 不使用 import 引入样式。
link 是 HTML 方式import 是 CSS 方式link 最大限度支持并行下载import 过多嵌套会导致串行下载会出现 FOUC 文档样式短暂失效浏览器对 link 支持早于 import 可以使用 import 对老浏览器隐藏样式总体来说link 优于 import 且 link 优先级也更高。
8 尽量使用 id 、 class 选择器设置样式避免使用 style 属性设置行内样式。
9 标准化各种浏览器前缀并注意以下几个方面
浏览器无前缀应放在最后。CSS 动画只用 -webkit- 和 无前缀两种即可。其他前缀包括 -webkit-、-moz-、-ms-、无前缀 Opera浏览器改用 blink内核所以-0-被淘汰。
10 避免让选择符看起来像是正则表达式。高级选择器不容易读懂执行时间也长。
11 禁止使用 gif 图片实现 loading 效果尽量使用 CSS3 动画实现降低CPU消耗提升渲染性能。
12 使用 css3 代码代替 js 动画尽可能地避免重绘和回流。
3、哪些方法能提升移动端CSS3动画体验
1 尽可能多地利用硬件能力如使用 3D 变形来开启 GPU加速 例如以下代码。
-webkit-transform: translate3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate3d(0,0,0);
transform: translate3d(0,0,0);一个元素通过 translate3d 右移 500PX 的动画流畅度会明显优于使用 left 属性实现的动画移动原因是CSS 动画属性会触发整个页面重排、重绘、重组。
paint 通常是最耗性能的尽可能避免使用触发 paint 的 CSS 动画属性。
如果动画执行过程中有闪烁通常发生在动画开始的时候可以通过如下方式处理。
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective1000;
-moz-perspective1000;
-ms-perspective1000;
perspective1000;2 尽可能少使用 box- shadows 和 gradients它们往往严重影响页面的性能尤其是在一个元素中同时都使用时。
3 尽可能让动画元素脱离文档流以减少重排如以下代码所示。
position:fixed;
position:absolute;4、针对 JavaScript如何优化性能
1 缓存DOM的选择和计算。
2 尽量使用事件委托模式避免批量绑定事件。
3 使用 touchstart 、touchend 代替 click。
4 合理使用 requestAnimation Frame 动画代替 setTimeOut。
5 适当使用 canvas 动画。
6 尽量避免在高频事件如 TouchMove、 Scroll事件中修改视图这会导致多次渲染。
5、jQuery性能优化如何做
1使用最新版本的 jQuery 类库
JQuery 类库每一个新的版本都会对上一个版本进行Bug修复和一些优化同时也会包含一些创新所以建议使用最新版本的 jQuery 类库提高性能。不过需要注意的是在更换版本之后不要忘记测试代码毕竟有时候不是完全向后兼容的。
2使用合适的选择器
jQuery 提供非常丰富的选择器选择器是开发人员最常使用的功能但是使用不同选择器也会带来性能问题。建议使用以下选择器如 id 选择器、类选择器同时不要将 id 选择器嵌套等。
3以数组方式使用 jQuery 对象
使用 jQuery 选择器获取的结果是一个 jQuery 对象。然而 jQuery 类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面建议使用简单的 for 或者 while 循环来处理而不是 $. each() 这样能使代码更快。
4使用事件委托模式
每一个JavaScript 事件例如 click、 mouseover等都会冒泡到父级节点。当需要给多个元素绑定相同的回调函数时建议使用事件委托模式。
5使用join()来拼接字符串
使用 join() 拼接长字符串而不要使用 “” 拼接字符串这有助于性能优化特别是处理长字符串的时候。
6合理利用HTML5中的data属性
HTML5 中的 data 属性有助于插入数据特别是前、后端的数据交换jQuery 的 data() 方法能够有效地利用 HTML5 的属性来自动获取数据。
️二、网站端、移动端优化
1、谈谈你对重构的理解。
网站重构是指在不改变外部行为的前提下简化结构、添加可读性且在网站前端保持一致的行为。也就是说在不改变 UI 的情况下对网站进行优化在扩展的同时保持一致的 UI 。
对于传统的网站来说重构通常包括以下方面。
把表格 (table) 布局改为 divcss 。使网站前端兼容现代浏览器。对移动平台进行优化。针对搜索引擎进行优化。
深层次的网站重构应该考虑以下方面。
减少代码间的耦合。让代码保持弹性。严格按规范编写代码。设计可扩展的 API 。代替旧的框架、语言如 VB 。增强用户体验。对速度进行优化。压缩 JavaScript、CSS、 image 等前端资源通常由服务器来解决。优化程序的性能如数据读写。采用 CDN 来加速资源加载。优化 JavaScript DOM 。缓存 HTTP 服务器的文件。
2、列举你知道的Web性能优化方法。
具体优化方法如下
压缩源码和图片。 JavaScript 采用混淆压缩CSS 进行普通压缩JPG 图片根据具体质量压缩为 50%~70% 把 PNG 图片从24色压缩成8色以去掉一些 PNG 格式信息等。 选择合适的图片格式颜色数多用 JPG 格式而很少使用 PNG 格式如果能通过服务器端判断浏览器支持WebP 就用WebP 或 SVG 格式。合并静态资源减少 HTTP 请求。把多个 CSS 合并为一个 CSS 把图片组合成雪碧图。 雪碧图是什么有什么优点雪碧图也称为精灵图指将多张图片合并到一张图片中可以减小图片的总大小将多张图片合并到一张图片后只需一次网络请求就可以将所需的资源全部下载减小建立连接的消耗在移动端尤为明显。 开启服务器端的 Gzip 压缩对文本资源非常有效。 Gzip压缩如何压缩文件gzip 对于要压缩的文件首先使用 LZ77 算法的一个变种进行压缩对得到的结果再使用 Huffman 编码的方法。 使用 CDN对公开库共享缓存。 CDN是什么CDN 指的是内容分发网络。其基本思路是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节使内容传输的更快、更稳定。如何使用CDN在云服务商购买 CDN 服务之后使用 CDN 加载静态资源。 延长静态资源缓存时间。把 CSS 放在页面头部把 JavaScript 代码放在页面底部这样避免阻塞页面渲染而使页面出现长时间的空白。
3、移动端性能如何优化
优化方式如下。
尽量使用 CSS3 动画开启硬件加速。适当使用 touch 事件代替 click 事件。避免使用CSS3 渐变阴影效果。可以用 transform:translateZ(0)来开启硬件加速。不滥用 Float , Float 在渲染时计算量比较大尽量少使用。不滥用 Web 字体 Web 字体需要下载、解析、重绘当前页面尽量少使用。合理使用 requestAnimation Frame 动画代替 setTimeout 。合理使用 CSS 中的属性 CSS3 transitions 、 CSS3 3D transforms 、 Opacity 、 Canvas 、 WebGL 、Video 来触发GPU渲染。过度使用会使手机耗电量増加。
4、哪些方法可以提升网站前端性能
精灵图合并减少HTTP请求压缩 HTML、CSS、JavaScript 文件使用 CDN 托管静态文件使用 localstorage 缓存和 mainfest 应用缓存。
5、谈谈性能优化问题。
可以在以下层面优化性能。
缓存利用缓存 Ajax 使用 CDN 、外部 JavaScript 和 CSS 文件缓存添加 Expires 头部在服务器端配置 Etag 减少 DNS 查找等。请求数量合并样式和脚本使用 CSS 图片精灵初始首屏之外的图片资源按需加载静态资源延迟加载。请求带宽压缩文件开启 GZIP 。CSS代码避免使用 CSS 表达式、高级选择器、通配选择器。JavaScript代码用散列表来优化查找少用全局变量用 innerHTML 代替 DOM 操作减少 DOM 操作次数优化 JavaScript 性能用 setTimeout 避免页面失去响应缓存 DOM 节点查找的结果避免使用 with with 会创建自己的作用域增加作用域链的长度多个变量声明合并。HTML代码避免图片和 iFrame 等 src 属性为空。src 属性为空会重新加载当前页面影响速度和效率尽量避免在 HTML 标签中写 Style 属性。
6、如果一个页面上有大量的图片大型电商网站网页加载很慢可以用哪些方法优化这些图片的加载从而提升用户体验
对于图片懒加载可以为页面添加一个滚动条事件判断图片是否在可视区域内或者即将进入可视区域优先加载。如果为幻灯片、相册文件等可以使用图片预加载技术对于当前展示图片的前一张图片和后一张图片优先下载。如果图片为 CSS 图片可以使用 CSS Sprite 、 SVG sprite 、 iconfont 、 Base64 等技术。 什么时候用base64编码当图片足够小且需要多次复用时使用base64编码。注意①大图片使用 base64 编码后可能会使图片增大原图的 1/3 所以 base64 编码并不适用于大图片。②使用 base64 编码图片并不意味着性能优化。 如果图片过大可以使用特殊编码的图片加载时会先加载一张压缩得特别小的缩略图以提高用户体验。如果图片展示区域小于图片的真实大小则应在服务器端根据业务需要先行进行图片压缩图片压缩后图片大小与展示的就一致了。
7、如何对网站的文件进行优化
可以进行文件合并、文件压缩使文件最小化可以使用 CDN 托管文件让用户更快速地访问可以使用多个域名来缓存静态文件。
8、请说出几种缩短页面加载时间的方法。
具体方法如下
1 优化图片。
2 选择图像存储格式比如 GIF 提供的颜色较少可用在一些对颜色要求不高的地方。
3 优化 CSS 压缩、合并 CSS 。
4 在网址后加斜杠。
5 为图片标明高度和宽度如果浏览器没有找到高度和宽度这两个参数它需要一边下载图片一边计算大小。如果图片很多浏览器需要不断地调整页面。这不但影响速度而且影响浏览体验。当浏览器知道高度和宽度参数后即使图片暂时无法显示页面上也会腾出图片的空位然后继续加载后面的内容从而优化加载时间提升浏览体验。
9、你知道哪些优化性能的方法
具体方法如下。
1 减少 HTTP 请求次数控制CSS Sprite、JavaScript 与 CSS 源码、图片的大小使用网页 Gzip 、CDN 托管、data 缓存、图片服务器。
2 通过前端模板 JavaScript 和数据减少由于HTML标签导致的带宽浪费在前端用变量保存Ajax请求结果每次操作本地变量时不用请求减少请求次数。
3 用 innerHTML 代替 DOM 操作减少 DOM 操作次数优化 JavaScript 性能。
4 当需要设置的样式很多时设置 className 而不是直接操作 Style 。
5 少用全局变量缓存 DOM 节点查找的结果减少 I/O 读取操作
6 避免使用 CSS 表达式它又称动态属性。
7 预加载图片将样式表放在顶部将脚本放在底部加上时间戳。
8 避免在页面的主体布局中使用表表要在其中的内容完全下载之后才会显示出来显示的速度比 DIVCSS 布局慢。
10、你知道哪些SEO搜索引擎优化的方法
合理的 title 、description 、keywords 搜索对着三项的权重逐个减小 title 值强调重点即可重要关键词出现不要超过2次而且要靠前不同页面 title 要有所不同description 把页面内容高度概括长度合适不可过分堆砌关键词不同页面 description 有所不同keywords 列举出重要关键词即可。 语义化的 HTML 代码符合 W3C 规范语义化代码让搜索引擎容易理解网页。重要内容 HTML 代码放在最前搜索引擎抓取 HTML 顺序是从上到下有的搜索引擎对抓取长度有限制保证重要内容一定会被抓取。重要内容不要用 js输出爬虫不会执行 js 获取内容。少用 iframe 搜索引擎不会抓取 iframe 中的内容。非装饰性图片必须加 alt。提高网站速度网站速度是搜索引擎排序的一个重要指标。
️三、代码、服务器端优化
1、平时你是如何对代码进行性能优化的
1利用性能分析工具监测性能包括静态 Analyze 工具和运行时的 Profile 工具在 Xcode 工具栏中依次单击 Product→ Profile 项可以启动。
2比如测试程序的运行时间当单击 Time Profiler 项时应用程序开始运行这就能获取到运行整个应用程序所消耗时间的分布和百分比。为了保证数据分析在同一使用场景下的真实性一定要使用真机因为此时模拟器在 Mac 上运行而 Mac 上的 CPU 往往比 iOS 设备要快。
2、如何优化服务器端
具体方法如下
1对组件启用 Gzip 压缩。
2延长资源缓存时间合理设置资源的过期时间对于一些长期不更新的静态资源其过期时间可以设置得长一些。
3减少 cookie 头部信息的大小头部信息越大资源传输速度越慢。
4图片或者 CSS 、JavaScript 文件均可使用 CDN 来加速。
3、如何优化服务器端的接口
具体方法如下
1接口合并如果一个页面需要请求两部分以上的数据接口则建议合并成一个以减少 HTTP 请求数。
2减少数据量去掉接口返回的数据中不需要的数据。
3缓存数据首次加载请求后缓存数据对于非首次请求优先使用上次请求的数据这样可以提升非首次请求的响应速度。
4、如何优化脚本的执行
脚本处理不当会阻塞页面加载、渲染因此在使用时需注意。
1 把 CSS 写在页面头部把 JavaScript 程序写在页面尾部或异步操作中。
2 避免图片和 iFrame 等的空 src 空 src 会重新加载当前页面影响速度和效率。
3 尽量避免重设图片大小。重设图片大小是指在页面、CSS 、JavaScript 文件等中多次重置图片大小多次重设图片大小会引发图片的多次重绘影响性能
4 图片尽量避免使用DataURL 。DataURL 图片没有使用图片的压缩算法文件会变大并且要在解码后再渲染加载慢耗时长。
5、页面渲染有哪些优化方式
具体方法如下
1 通过HTML设置 Viewport 元标签 Viewport 可以加速页面的渲染如以下代码所示。
meta nameviewport contentwidthdevicewidth,initial-scale12 减少 DOM 节点数量DOM 节点太多会影响页面的渲染应尽量减少 DOM 节点数量。
3 尽量使用 CSS3 动画合理使用 requestAnimation Frame 动画代替 setTimeout 适当使用 canvas 动画5个元素以内使用 CSS 动画5个元素以上使用 canvas 动画 iOS 8 中可使用 webGL 。
4 对于高频事件优化 Touchmove , Scroll 事件可导致多次渲染。
使用 requestAnimation Frame 监听帧变化以便在正确的时间进行渲染增加响应变化的时间间隔减少重绘次数。使用节流模式基于操作节流或者基于时间节流减少触发次数。
5 提升 GPU 的速度用 CSS 中的属性 CSS3 transitions 、CSS3 3D transforms 、Opacity 、 Canvas 、 WebGL 、Video 来触发 GPU 渲染。
6、如何设置DNS缓存
在浏览器地址栏中输入 URL 以后浏览器首先要查询域名 hostname 对应服务器的 IP 地址一般需要耗费20~120ms的时间。
DNS 查询完成之前浏览器无法识别服务器 IP 因此不下载任何数据。基于性能考虑ISP 运营商、局域网路由、操作系统、客户端浏览器均会有相应的DNS 缓存机制。
1正 IE 缓存 30min 可以通过注册表中 DnsCacheTimeout 项设置。
2Firefox 混存 1min 通过 network.dnsCacheExpiration 配置。
3在 Chrome 中通过依次单击 “设置”→“选项”→“高级选项” 并勾选 “用预提取DNS提高网页载入速度” 选项来配置缓存时间。
7、什么时候会出现资源访问失败
开发过程中发现很多开发者没有设置图标而服务器端根目录也没有存放默认的 Favicon.ico 从而导致请求404出现。通常在App的 webview 里打开 Favicon.ico 不会加载这个 Favicon.ico但是很多页面能够分享。
如果用户在浏览器中打开 Favicon. ico 就会调取失败一般尽量保证该图标默认存在文件尽可能小并设置一个较长的缓存过期时间。另外应及时清理缓存过期导致岀现请求失败的资源。
8、为什么利用多个域名来存储网站资源会更有效
CDN 缓存更方便突破浏览器并发限制节约 cookie 带宽节约主域名的连接数优化页面响应速度防止不必要的安全问题。
9、有一个页面他必须实时展示最新的数据你有哪些方案
http 轮询使用ajax配合定时器定时请求数据更新websocket 用来处理服务器端推送的长连接协议。
四、性能优化文章补充 详解文章补充 原文关于前端性能优化问题认识网页加载过程和防抖节流链接https://juejin.cn/post/6973062729925918756 五、结束语
随着前端项目不断扩大浏览器渲染的压力变得越来越重因此很多企业专都会专门成立团队去做性能优化。对于性能优化的面试题来说主要考察应试者对网站性能优化是否有一定了解。
因此如何做好性能优化哪些操作会引起性能优化的问题都值得应试者关注。
到这里关于性能优化相关的面试题讲到这里就结束啦希望对大家有帮助~
彩蛋 One More Thing
️参考资料
21道关于性能优化的面试题(附答案)
️pdf内容获取 微信搜索 星期一研究室 并关注回复关键词 性能优化面试pdf 获取相关 pdf 内容~
回复 面试大全pdf 可获取全专栏内容
️番外篇
如果这篇文章对你有用记得留个脚印jio再走哦~以上就是本文的全部内容我们下期见
