本文目录导航：
前端性能优化总结(一)-js、css优化
移动互联网时代，用户关于网页的关上速度要求越来越高。
首屏作为直面用户的第一屏，其关键性显而易见。
优化用户体验更是咱们前端开发十分须要 focus 的物品之一。
从用户的角度而言，当关上一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个环节须要的时期，这个时期越短，用户体验越好。
所以作为网页的开发者，就从输入url到页面渲染出现这个环节中去优化网页的性能。
所以输入URL后出现了什么呢？在阅读器中输入url会教训域名解析、树立TCP衔接、发送http恳求、资源解析等步骤。
http缓存优化是网页性能优化的关键一环，这一局部我会在后续笔记中做一个具体总结，所以本文暂不多做具体整顿。
本文关键从网页渲染环节、网页交互以及Vue运行优化三个角度对性能优化做一个小结。
首先谈谈拿到服务端资源后阅读器渲染的流程： 关键渲染门路是阅读器将 HTML、CSS、Javascript 转换为在屏幕上出现的像素内容所教训的一系列步骤。
也就是咱们刚刚提到的的的阅读器渲染流程。
为尽快成功初次渲染，咱们须要最大限制减小以下三种可变要素: 首先，DOM 和 CSSOM 理论是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。
但是，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的， 所以他必定期待到 CSSOM Tree 构建成功，也就是 CSS 资源加载成功(或许 CSS 资源加载失败)后，能力开局渲染。
因此，CSS 加载会阻塞 Dom 的渲染。
由此可见，关于 CSSOM 增加、紧缩以及缓存雷同关键，咱们可以从这方面思考去优化。
当阅读器遇到 script 标志时，会阻止解析器继续操作，直到 CSSOM 构建终了，Javascript 才会运转并继续成功 DOM 构建环节。
当页面中元素样式的扭转并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），阅读器会将新样式赋予给元素并从新绘制它，这个环节称为重绘。
回流（Reflow） 当 Render Tree 中局部或所有元素的尺寸、结构、或某些属性出现扭转时，阅读重视新渲染局部或所有文档的环节称为回流。
有时即使仅仅回流一个繁多的元素，它的父元素以及任何追随它的元素也会发生回流。
现代阅读器会对频繁的回流或重绘操作启动优化：阅读器会保养一个队列，把一切惹起回流和重绘的操作放入队列中，假设队列中的义务数量或许时时期隔到达一个阈值的，阅读器就会将队列清空，启动一次性批处置，这样可以把屡次回流和重绘变成一次性。
当你访问以下属性或方法时，阅读器会立刻清空队列: 由于队列中或许会有影响到这些属性或方法前往值的操作，即使你宿愿失掉的消息与队列中操作引发的扭转有关，阅读器也会强行清空队列，确保你拿到的值是最准确的。
防止频繁操作样式，最好一次性性重写 style 属性，或许将样式列表定义为 class 并一次性性更改 class 属性。
防止频繁操作 DOM，创立一个 documentFragment，在它上方运行一切 DOM 操作，最后再把它参与到文档中。
也可以先为元素设置 display: none，操作完结后再把它显示进去。
由于在 display 属性为 none 的元素上启动的 DOM 操作不会引发回流和重绘。
防止频繁读取会引发回流/重绘的属性，假设确实须要屡次经常使用，就用一个变量缓存起来。
对具备复杂动画的元素经常使用相对定位，使它脱离文档流，否则会惹起父元素及后续元素频繁回流。
图片懒加载在一些图片密集型的网站中运用比拟多，经过图片懒加载可以让一些无法视的图片不去加载，防止一次性性加载过多的图片造成恳求阻塞（阅读器普通对同一域名下的并发恳求的衔接数有限制），这样就可以提高网站的加载速度，提高用户体验。
将页面中的img标签src指向一张小图片或许src为空，而后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向实在的图片。
src指向一张自动的图片，否则当src为空时也会向主机发送一次性恳求。
可以指向loading的地址。
留意，图片要指定宽高。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，而后监听滚动事情，把用户行将看到的图片加载。
这样便成功了懒加载。
事情委托其实就是应用JS事情冒泡机制把原本须要绑定在子元素的照应事情（click、keydown……）委托给父元素，让父元素担当事情监听的职务。
事情代理的原理是DOM元素的事情冒泡。
好处： 例如有一个列表须要绑定点击事情，每一个列表项的点击都须要前往不同的结果。
传统写法： 传统方法会应用for循环遍历列表为每一个列表元素绑定点击事情，当列表中元素数量十分宏大时，须要绑定少量的点击事情，这种模式就会发生性能疑问。
这种状况下应用事情委托就能很好的处置这个疑问。
改用事情委托： 输入搜查时，可以用防抖debounce等优化模式，增加http恳求； 这里以滚动条事情举例：防抖函数 onscroll 完结时触发一次性，提前口头 节流函数：只准许一个函数在N秒外口头一次性。
滚动条调用接口时，可以用节流throttle等优化模式，增加http恳求； 上方还是一个便捷的滚动条事情节流函数：节流函数 onscroll 时，每隔一段时期触发一次性，像水滴一样 参考链接：
Web前端新手如何做好性能优化
当天小编要跟大家分享的文章是关于Web前端新手如何做好性能优化?影响用户访问的最大局部是前端的页面。
网站的划分普通为二：前端和后盾。
咱们可以了解成后盾是用来成功网站的性能的，比如：成功用户注册，用户能够为文章宣布评论等等。
而前端呢?其实应该是属于性能的体现。
而咱们树立网站的目的是什么呢?不就是为了让指标人群来访问吗?所以咱们可以了解成前端才是真正和用户接触的。
除了后盾须要在性能上做优化外，其实前端的页面更须要在性能优化高低功夫，只要这样能力给咱们的用户带来更好的用户体验。
不只仅如此，假设前端优化得好，他不只可认为企业浪费老本，他还能给用户带来更多的用户，由于增强的用户体验。
说了这么多，那么咱们应该如何对咱们前端的页面启动性能优化呢?前端性能优化的方法?一、content方面1，增加HTTP恳求：兼并文件、CSS精灵、inlineImage2，增加DNS查问：DNS查问成功之前阅读器不能从这个主机下载任何任何文件。
方法：DNS缓存、将资源散布到失当数量的主机名，平衡并行下载和DNS查问3，防止重定向：多余的两边访问4，使Ajax可缓存5，非必定组件提前加载6，未来所需组件预加载7，增加DOM元素数量8，将资源放到不同的域下：阅读器同时从一个域下载资源的数目有限，参与域可以提高并行下载量9，增加iframe数量10，不要404二、Server方面1，经常使用CDN2，参与Expires或许Cache-Control照应头3，对组件经常使用Gzip紧缩4，性能ETag5，FlushBufferEarly6，Ajax经常使用GET启动恳求7，防止空src的img标签三、cookie方面1，减小cookie大小2，引入资源的域名不要蕴含cookie四、CSS方面1，将样式表放到页面顶部2，不经常使用CSS表白式3，经常使用不经常使用@import4，不经常使用IE的Filter五、Javascript方面1，将脚本放到页面底部2，将javascript和css从外部引入3，紧缩javascript和css4，删除不须要的脚本5，增加DOM访问6，正当设计事情监听器、六、图片方面1，优化图片：依据实践色彩须要决定色深、紧缩2，优化css精灵3，不要在HTML中拉伸图片4，保障小并且可缓存七、移动方面1，保障组件小于25k2，PackComponentsintoaMultipartdocument以上就是小编当天为大家分享的关于Web前端新手如何做好性能优化的文章，宿愿本篇文章能够对正在从事web前端上班的小同伴们有所协助。
想要了解更多web前端常识记得关注北大青鸟web培训官方。
最后祝愿小同伴们上班顺利！
如何做好网站前端优化
1、提高页面加载速度。
能用css处置的不用背景图片，背景图片也尽量紧缩大小，可以几个icons放在一个图片上，经常使用background-position找到须要的图片位置。
可以增加HTTP恳求数，提高网页加载速度。
2、 结构、体现和行为的分别。
另外一个关键的拖慢网页加载速度的要素就是将css和JS都沉积在HTML页面上，每次看到有人间接在页面上编写CSS和JS我都很痛心疾首。
经过外链的模式能大大放慢网页加载速度的，css文件可以放在head里，JS文件可以搁置在body的最下方，在不影响阅读的状况下再去加载JS文件。
3、 优化网站分级结构。
在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能独自加个Sitemap页面，将网站结构了如指掌地展如今蜘蛛背地，更无利于蜘蛛抓敞开息。
4、 集中网站权重。
由于蜘蛛调配到每个页面的权重是必定的，这些权重也将平均调配到每个a链接上，那么为了集中网站权重，可以经常使用”rel=nofollow”属性，它通知蜘蛛无需抓取指标页,可以将权重分给其余的链接。
5、 文本强调标签的经常使用。
当着重强调某个关键词须要加粗示意，决定strong标签比经常使用b标签要更有强调作用。
6、 a标签的title属性的经常使用。
在不影响页面性能的状况下，可以尽量给a标签加上title属性，可以更无利于蜘蛛抓敞开息。
7、 图片alt属性的经常使用。
这个属性可以在图片加载不进去的时刻显示在页面上关系的文字消息，作用同上。
8、 H标签的经常使用。
关键是H1标签的经常使用须要特意留意，由于它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最关键的题目上方，如首页的logo上可以加H1标签。
