（主演达达前端，提升前端技能）要成为一名合格的Web前端工程师，Web前端性能优化是必学知识。那么我们应该如何优化Web前端的性能呢？--达达前端Web前端性能优化原理问题前端性能优化、资源合并与压缩、图片编码与类型选择原理、浏览器渲染机制、懒加载、预加载、浏览器存储、缓存机制、PWA和Vue-SSR等技术栈，Vue.js和Chrome，调试工具性能和层次。那么前端性能优化原理有什么意义，涉及功能和原理，如何结合实际项目场景，理论与实践经验相结合，进行量化分析。前端优化一般从基础优化（图片编码原理等）开始，进阶优化（浏览器渲染机制、浏览器存储优化），结合服务端优化（首屏渲染等）等。前端性能优化方案，最小化HTTP请求，使用内容分发网络，避免空src或href，添加过期或缓存控制头，gzip组件，样式表放在最上面，脚本放在最下面，避免css表达式，减少dns查找，将js和css设置为外部，避免重定向，配置etag，使用ajax缓存，减少dom元素的数量，没有404，减小cookie大小，不要在HTML中缩放图像，避免使用过滤器，使用favicon.icon是小且可缓存。面试官拷问面试官：为什么要做前端优化？图片在前端是怎么解码的？浏览器渲染和加载的过程是如何工作的？懒加载和预加载的原理是什么？懒加载和预加载的应用场景有哪些？PWA和VUE-SSR的原理是什么？面试官深度拷问的时候，每一个性能优化的原理是什么？结合自己做过的项目，性能优化的原理是什么？说说你在项目中使用性能优化后的感受？说说每个性能优化原则最适合的场景流程。面试官想知道你掌握了多少性能优化原理，你在做过的项目中有没有使用过性能优化，分析你做过的项目，找到需要性能优化的点，选择合适的性能优化。图片、样式表、脚本、flash等都会影响前端性能。减少组件数量和所需的HTTP请求数量可以加快页面速度。前端性能优化、资源合并和压缩合并文件是一种通过将所有脚本合并为一个脚本来减少HTTP请求数量的方法，类似于将所有css合并为一个样式表。要实现性能优化，一是减少我们HTTP请求的数量，减少请求的资源大小，二是资源压缩合并的原理是什么。压缩合并前是什么效果，压缩合并后有什么区别。拷问：一个浏览器请求从发送到返回的过程是怎样的？url分解，协议名称，分层url的标记符号，固定，访问资源所需的凭证信息，从哪个服务器获取数据，要连接的端口号，指向资源的分层文件路径，查询字符串，片段id.客户端使用HTTP应用层、tcp传输层、ip网络层、数据链路层。网络层从高到低依次为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走。应用层客户端发送HTTP请求、消息头、空行、消息体、消息头包括请求行、请求头字段、实体头字段等。SYN(SynchronizeSequenceNumbers)同步序号ACK(Acknowledgment)确认字符过程，用户首先在浏览器中输入一个url，浏览器中的核心代码会对输入的url进行拆分解析，然后将域名传给dns服务器而dns服务会根据域名查询相关帖子对应的ip地址，然后将ip地址传递给浏览器。浏览器如果有ip地址，就知道浏览器要去哪里，持有ip地址就知道请求发到哪里去了。只要遵循协议，请求的参数就会被携带在协议中，发送到网络中，然后通过局域网、交换机、路由器、骨干网到达服务器。服务器具有MVC架构。请求首先会进入Controller，在Controller中进行相关逻辑处理，以及请求的分发，调用Model层与数据进行交互。Model层会读取Redis和db。数据。然后通过视图层发送到网络，从服务器到浏览器。浏览器主要做渲染过程。渲染过程是浏览器请求的HTML、css、JavaScript等的渲染过程，会形成相关的dom树，以及对应的css树，在页面上进行相应的样式渲染。拷问一下，从浏览器到服务端的过程中，我们的前端优化可以用到哪些点和流程呢？客户端浏览器通过http协议与服务器通信。http协议属于应用层协议，http属于tcp协议。因此，客户端与服务器主要通过套接字进行通信。TCP属于传输层协议，https需要会话层tls、ssl等协议。浏览器、dns服务器、服务器等，我们可以在dns上缓存优化前端性能，在router级别和url级别缓存数据，这样访问时间会缩短很多。网络请求的过程，带宽，网络选择，涉及到缓存，可以用cdn，cdn是用来请求静态资源的，请求静态资源，那么cookie就没用了，所以希望请求的时候把这个cookie给静态资源staticresources去掉，这里注意cdn的域名不要和主站的域名一致，以免携带cookies。如何降低我们HTTP请求的大小，每个HTTP请求都要经过网络环境才能到达我们的服务器，每个请求都有网络环境的损耗，将多个HTTP请求减少为一个，减少在网络环境中的损耗。也可以从服务端入手，先渲染页面体现出来的效果，然后直接输出到网页。每个请求都有网络环境的损失。我们可以将多个HTTP请求合并为一个，以减少相同的环境损失。带宽，如果一个HTTP请求的大小可以小一些，访问会更快。浏览器端的渲染过程，使用框架，必须从浏览器渲染。框架中的模板将在浏览器中呈现。这种帧内渲染不利于首屏，对首屏有很大的损耗，不利于前端的表现。服务端的渲染是将HTML直接渲染到我们的浏览器页面，而不是在浏览器中渲染。前端性能优化点，通过HTTP请求的过程，我们可以了解到我们可以通过dns进行缓存，减少dns查询的时间，网络请求的过程走到就近的网络环境，同样的静态资源被缓存，reducingHTTPrequestsize，减少HTTP请求，服务端渲染，从业务优化前端点。重点是，如果深入了解HTTP请求流程，就能知道前端性能优化的核心要点。资源合并压缩减少资源体积，gzip压缩，js混淆，css压缩，图片压缩。减少HTTP请求的数量是合并，减少HTTP请求的大小是压缩。可以压缩HTML、压缩css、压缩混淆js、合并文件、启用gzip等。进行HTML压缩首先使用在线网站压缩，使用html-minifier工具进行压缩，后端模板引擎进行渲染压缩。CSS压缩CSSsprites是减少图像请求数量的首选方法，将背景图像组合成单个图像。CSSSprites在国内被很多人称为CSSsprites，是一种处理网页图片的应用方式。它可以让你将一个页面中涉及的所有零星图片都包含到一张大图片中，这样当你访问该页面时，加载的图片就不会像以前那样慢慢地一张一张地显示了起来。对于现在网络流行的速度来说，单张不高于200KB的图片所需的加载时间基本是一样的，不用担心这个问题。第一个是删除无效代码，第二个是合并css语义，使用在线网站压缩，使用html-minifier压缩HTML中的css，使用clean-css压缩css。使用CSSbackground-image和background-position属性来显示需要的图片片段来压缩和迷惑js。第一，删除无效字符，去除注释，减少和优化代码语义，保护代码。在线网站可用于压缩，html-minifier压缩html中的js，使用uglifyjs2压缩js（1）将table改为div布局（2）减少精简div、span、ul、li等系列标签（3)删除多余空格(4)Formtype布局时适当使用table而不是div布局(5)合并网页GZIP压缩文件文件与文件之间插入了一个上行请求，增加了N-1个网络延迟，而且更严重受丢包问题影响。可能会断开连接。合并文件时存在首屏渲染和缓存失效的问题。js文件比较大，请求比较慢。只有在请求返回后才会执行首屏HTML渲染。JS被缓存。如果文件merge中其中一个js文件发生变化，就会导致缓存失效的问题。如果不合并文件，修改其中一个js文件只会使该文件的缓存失效，其他不受影响。文件合并存在严重的缓存失效问题。然后是否合并文件，建议公库单独打包成一个文件，业务单独打包成一个文件。合并不同页面，不同页面的js打包不同，如何合并文件，在线网站合并文件，使用nodejs实现文件合并，实际资源和压缩实际页面开发，网站压缩合并，fis自动压缩合并。压缩前压缩后前端自动化构建实现压缩合并fis3是百度里的一个构建工具，开始->getSource()->是否编译所有文件（单个文件的编译，另一个方向是打包过程的）。fis3的配置文件，fis-conf.js压缩后，优化前后性能对比，还是要好好优化性能，大资源效果明显加载优化，合并CSS，JavaScript，合并小图片、缓存所有可以缓存的资源、使用外部样式引用CSS和JavaScript、压缩HTML、css、JavaScript、启用GZIP、使用首屏加载、按需加载、滚动加载、增加加载进度条、减少cookies、避免重定向，异步加载第三方资源。css优化，css写在头部，javascript写在尾部，避免图片和框架的Src为空，尽量避免重新设置图片大小，图片尽量避免使用DataURL，尽量避免在HTML标签中写style属性,并避免cssExpression,去掉空的css规则,正确使用显示属性,不滥用float,不滥用网页字体,不滥用过多的Font-size,值为0时不需要任何单位,规范各种浏览器前缀，避免让选择器看起来像正则表达式。渲染优化，HTML使用视口，减少dom节点，尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout，适当使用Canvas动画，Touchmove，Scroll事件会导致多次渲染，使用CSS3transitions，CSS33d，transforms,Opacity,Canvas等来触发GPU渲染。脚本优化，减少重绘和回流，缓存dom选择和计算，缓存列表长度，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart、touchend代替click。图片优化，使用css3，svg，iconfont代替images，使用srcset，web优化和jpg，png8优于gif，首次加载不大于1014kb，图片宽度不大于640。注意，当我们修改后端响应时间减半，整体响应事件只能减少5-10%，同时优化前端性能，缩短一半，整体响应可以减少40-45%。前端优化意义HTTP请求流程是优化的核心压缩合并原理图片优化流程图片加载处理、图片预加载、图片懒加载、首屏加载时进度条的显示。优化异步请求，使用普通的json数据格式进行交互，缓存一些常用的数据。图像映射将多个图像组合成一个整体大小大致相同的图像，但减少了HTTP请求的数量以加快页面速度。png8、png24、png32的区别是png8有256种颜色，支持透明；png24是2的24次方，不支持透明；png32是2的24次方，支持透明。jpg有损压缩，压缩率高，不支持透明，png支持透明，浏览器兼容性好，webp压缩比较好，ioswebview有兼容性问题，svg矢量图，代码嵌入，比较小。jpg用于不需要透明图片的场景，png用于需要透明图片的场景，webp用于Android，svg矢量图用于图片风格比较简单的业务。csssprite图片将一些图片整合为一张图片，减少请求次数。问题在于图像的尺寸过大。如果加载不成功，会很慢，会出问题。imageinline，将图片的内容嵌入到HTML中，与HTML一起存在，作为base64格式，可以减少你网站的HTTP请求次数。使用矢量图svg，draw函数，使用iconfont解决icon问题。webp在Android下使用，它有更好的图像数据压缩算法，无损和有损压缩模式，alpha透明度和动画特性。HTML渲染过程：顺序执行（词法分析）、并发加载、是否阻塞、依赖、导入方法。css阻塞，csshead阻塞页面的渲染，css阻塞js的执行，css不阻塞外部脚本的加载。js阻塞，js的引入会阻塞页面的渲染，js不会阻塞资源的加载，js是顺序执行的，会阻塞后续js逻辑的执行。图片压缩与拼接PNG、PNG-8、PNG-24、JPEG格式图片的区别PNG格式适用于需要透明度的场合。PNG-8无法处理复杂色域中的渐变，而PNG-24可以几乎不失真地保留它们。渐变图像压缩方法使用Photoshop内置的图像压缩，文件存储为Web使用的格式。一般情况下，JPEG的输出质量选择70~80%，保证几乎没有视觉差异。优化前后页面体积文件体积压缩率=优化后体积÷优化前体积懒加载原理懒加载的定义是什么？图片的话，图片资源很多。对于商城项目，图片较多，页面很长适用于业务场景，减少无效资源的加载，并发加载过多的资源会阻塞js的加载。当图片进入我们的可见区域时，请求加载资源。延迟加载的效果就是延迟加载的效果。重绘和回流的机制是什么？频繁的重绘和回流会导致ui的频繁渲染，从而拖慢JavaScript。回流，当由于元素大小和布局发生变化，需要重新构建部分渲染树时，会触发回流和重绘。当渲染树中的某些元素需要修改属性时，这些属性不影响元素的外观、样式和布局，称为重绘，比如修改颜色。所以回流肯定会引起重绘，但重绘不一定会引起回流。掌握一些css属性，将频繁重绘和回流的元素隔离为一个独立的层，则该元素的重绘和回流只能影响该层。将一个元素分离成一个独立的层，使用css属性避免触发重绘，重排css属性，重绘和重排很频繁，可以独立。浏览器存储了解什么是localstorage、cookie、sessionstorage、indexdb了解pwa和serviceworker的应用多种浏览器存储方式并存什么是cookie使用cookie将相关信息传递给服务器，让服务器区分当前请求是哪个客户端，cookie在1993年就有了。它的目的是区分HTTP请求。本来，HTTP请求是无状态的，即请求关闭后的连接，cookies用于维护客户端的状态。用于浏览器与服务器的交互，以及客户端自身数据的存储。饼干是有限的。作为浏览器，存储大小约为4kb，需要设置过期时间。cookie的生成方式，http响应头的set-cookie，cookie可以通过document.cookie进行读写，cookie中相关域名下CDN的流量损失，httponly。LocalStorage专门用于浏览器存储，大小约5M，接口封装良好，本地缓存方案可以提高首屏加载速度。SessionStorage会话级浏览器存储，大小约5M，用于客户端，不与服务器端通信，接口封装良好。什么是pwa？它是一种新型的webapp，不是某项尖端技术，而是通过一系列新的web特性来进行渐进式的webapp。Pwa也可以在没有网络的环境下提供基本的页面访问。一个webapp如果没有网络，会接收不到基础页面的显示，但是PWA不会在没有网络的情况下无法显示页面。它速度快，网页渲染和网络数据访问速度快，内置到功能中，可以添加到移动桌面等等。什么是服务人员？它是浏览器独立于当前网页在后台运行的脚本，用来实现一些独立的页面。具有拦截和处理网络请求的特点。缓存策略Caching、DNS缓存、CDN部署与缓存、http缓存了解cache-control、last-modified、etag。Httpheader属性，Cache-control属性，max-age，s-maxage，private，public，no-cache，no-store。浏览器在DNS解析上会消耗一定的时间。对于一些高访问量的流量，需要做好DNS缓存，CDN缓存，CDN作为静态资源文件的分发，做好静态资源的缓存。加快网站加载速度，转向优化，使用缓存，减少重定向，优化首屏，保证首屏加载的数据小于14kb，不滥用网页字体。服务器端性能优化服务器是node.js，所以也可以优化。谷歌PageSpeed团队的测试表明，30~50KB（压缩后）是每个JavaScript文件大小的合适范围：既可以减少小文件带来的网络延迟，又可以保证增量和分层执行。--Web性能权威指南减少HTTP请求，合并js文件，合并css文件，使用csssprite，使用base64表示简单图片。移动端优化，长列表滚动优化，功能防抖和功能节流，使用touchstart，touchend代替click，html视口设置，开启gpu渲染加速。浅谈Web前端优化的本质和方法1.减少过多的HTTP外部请求2.在合适的地方使用CSS3.优化代码参考链接推荐阅读Schema-es7语法结构？async/await【面试必备-Vue全家桶】本文带你玩转Vue前端路由【面试必备】掌握this的原理，在JavaScript中调用，应用。2019的每一天，只等她出现，余生，庆余年|掘金年度征文一家人来袭【达达前端技术社区⑥】觉得这篇文章对你有帮助？请分享给更多人关注“达达前端”，加star提升前端技能。在博客平台上，未来还有很长的路要走。也希望大家多多支持和批评我以后的文章。让我们一起进步。一起走花路吧。非常感谢阅读本文的读者。如果这篇文章写得好，如果你觉得“达达”有什么，如果你觉得我可以坚持学习，如果你觉得这个人可以交到朋友，请点赞关注分享，对暖暖我真的很有用！！！感谢阅读，原创不易，喜欢就??点【在看】或【转发朋友圈】，这是我写作最大的动力。意见反馈如果本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。这是一篇有品质，有态度的公众号关注，祝你好运好文章，我在看??
