前端优化

1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，采用css精灵(css sprite)，使用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属性

一、什么是SEO？ 搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。 二、为什么需要SEO？ 做SEO是为了提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善用户体验，促进销售的作用。 三、从前端角度，哪些注意事项有助于SEO？ 3.1 提高页面加载速度 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，采用css精灵(css sprite)，使用background-position找到需要的图片位置。减少HTTP请求数，提高网页加载速度。 3.2结构、表现和行为的分离。 不要把css和js放在同一个页面，采用外链的方式能大大加快网页加载速度。 3.3 优化网站分级结构 在每个内页加面包屑导航 3.4集中网站权重 由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。 3.5文本强调标签的使用 使用strong标签加粗文字 3.6

这场知乎live主要拿了一份现实工作中的业务代码进行一步步地优化分析。每个人的收获都是不一样的。我就以我的水平去总结一下这场live，也说说我的收获。 原来的代码一共300行不到的js，用jquery写的。整个代码结构，就是前面定义少许变量，然后一堆函数，一堆事件的绑定，中间夹杂着几个函数的调用，算是初始化的功能吧。对这份代码的整体感受，代码格式整洁，有些注释，太多DOM操作，太多样式的计算看得有点眼花缭乱。 对于我这种小白水平的来说，如果要我去优化。我会做的不多，最多就是把那些函数的调用放在一块，省得找来找去的。可能会调换一下代码的顺序，更好读一些。一个函数如果业务太多，拆分成多个子函数来实现。提取一些复用的函数和变量。 然后，我们看下大神是怎么做的。 第一次优化 这一次在结构上是比较大的修改，算是一次大重构。首先用经典的立即执行函数写法把所有代码包起来( 主要作用应该是避免污染全局变量 )，一般jquery的插件都可以看到。而原始代码用的仅仅是 $(function(){ //some code }) ，主要是为了保证在dom加载完毕之后才执行代码。 然后在代码结构上，将代码写成模块的形式。定义了一个构造函数（来模拟类）， 函数内部做了一些初始化操作的事情，然后在把那些方法定义在它的原型对象(prototype)上，顺便把这个类暴露给全局变量，然后在dom加载完毕之后进行实例化

前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。 我和一些同学接触的过程中，发现作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。 一、html文档结构标签语义化 1、首先什么是语义化呢？ 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。 2、语义化的好处或者说存在的意义 ① 有利于搜索引擎抓取 ② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护

性能优化： 广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。 一、html文档结构标签语义化 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。 语义化的好处或者说存在的意义 ① 有利于搜索引擎抓取 ② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护、提高开发效率、快速达成共识、利于二次开发。 ③ 有利于盲人屏幕阅读器 二、css、js文件数量及大小 优化一般对于css、js是建议使用外联式来进行导入。我们可以对css、js做相应的规划也可以减少css、js的个数以减少http请求。同时也要注重减少重复代码，注重代码重复利用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候，可以对css、js文件进行压缩，文件的减小可以加速文件的链接导入，以便加速网页的加载渲染。 可通过使用webpack，gulp等工具对Js文件进行合并。

方法一 ：遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组 function removeDuplicatedItem(ar) { var ret = []; for (var i = 0, j = ar.length; i < j; i++) { if (ret.indexOf(ar[i]) === -1) { ret.push(ar[i]); } } return ret; } 方法二 ：遍历数组，利用object对象保存数组值，判断数组值是否已经保存在object中，未保存则push到新数组并用object[arrayItem]=1的方式记录保存 function removeDuplicatedItem2(ar) { var tmp = {}, ret = []; for (var i = 0, j = ar.length; i < j; i++) { // 这里是加入数组元素数据类型的判断 var key = ar[i] + typeof ar[i] if (!tmp[key]) { tmp[key] = 1 ret.push(ar[i]); } } return ret; } 方法三 ：数组下标判断法, 遍历数组，利用indexOf判断元素的值是否与当前索引相等，如相等则加入。相等说明数组中只有一个

一、加载速度优化 　　精灵图 　　base64 　　iconfont替代图片 　　代码压缩 　　图片、视频压缩 　　cdn缓存 　　 路由懒加载 原理：将每个组件都打成一个包，首页的大文件可以进行分批引入 实现：main.js中将所有的同步引入组件的方式改为异步引入组件，即： import Home from "pages/Home"改为const Home=()=>import("pages/Home") 　　 二、运行效率优化 　　 减少http请求----<keep-alive></keep-alive> 　　使用： 　　　　<keep-alive> 　　　　<router-view></router-view> 　　　　</keep-alive> 　　原理：使用keep-alive包裹的组件在创建之后不会经历销毁，给不用频繁请求数据的组件包裹 　　属性：include：包括，表示需要缓存的组件----include="a,b"　　include="/a|b/"　　include="["a","b"]" 　　　　　exclude：除了，表示不需要缓存的组件，不能和include一起使用 　　　　　max：最多可以缓存多少个组件 　　增加两个生命周期： 　　　　activated：进入该组件时触发，可以用来做数据的请求 　　　　deactivated：离开该组件时触发 　　

提到前段性能优化，不可避免的都会想到如下的解决方案： （1）减少HTTP请求（合并css、js，雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。） （2）压缩（css、js、图片等前端资源皆可压缩，通常是由服务器来解决） （3）图片预加载，将样式表放头部，脚本放底部加上时间戳 （4）使用CDN，采用CDN来加速资源加载（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好） （5）缓存…… （6）程序的性能优化（如：数据读写） （7）对于JS DOM的优化（用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。） （8）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （9）HTTP的服务器的文件优化 （10）当需要设置的样式很多时设置className而不是直接操作style。 （11）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢 来源： https://www.cnblogs.com/syw20170419/p/11937713.html

github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询，如果这一步做了智能 DNS 解析的话，会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手，应用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了 TCP 握手结束后会进行 TLS 握手，然后就开始正式的传输数据（如果使用HTTPS） 数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件 首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错 浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件 文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS

原文地址 背景 在当前网站图片资源占比越来越重，特别是电商这类网站引入了大量的图片资源增加了网站加载的负担。大量的图片资源请求，会导致网站的加载变慢，变卡，导致首屏时间变长，甚至崩溃，影用户体验。针对同一网页中有许多图片的场景，有图片懒加载的优化方案。 原理 在一个网站中，网页的长度会远远大于浏览器的高度。而我们所能看到只能是浏览器可视区域部分的网页，在可视区域之外的部分我们如果不滑动网页是看不到的，见下图所以在网站首次加载的时候，我们可以只对浏览器可视区域部分的资源进行加载，在可视区域部分之外的当页面滑动到相应位置时再进行加载，这样会极大了减少了首屏加载的负担，提高用户体验。 实现 在 img 标签上新增 data-src 属性，该属性指向图片的真实地址， img 本身的 src 不设置或者设置为缩略图和默认图片（缩略图和默认图片尺寸较小），通过js监听滑动事件，同过 getBoundingClientRect() 方法获取到图片是否处于可视区域内，如果处于则将 img 的 src 值设为 data-src 的值。 代码 HTML //引用图片资源来自网络，侵权立删 <div class="lazy-load-wrap"> <img class="lazy-img" data-src="http://img3.duitang.com/uploads/blog/201601/24