前端小技巧分享(“前端”)-可关玩日记

很多时候，网站页面的seo优化(前端)都涉及到页面简化。本教程概述了如何精简网页，并提供了相关建议，以加快网站的加载速度，提高网站的性能。

另一方面，如果网页很复杂，打开很慢，会有什么影响？

首先，网页代码复杂，会直接造成网站加载速度慢的效果。鉴于国内网速慢，加重了复杂网页打开加载慢的问题。

其次，移动用户的兴起，使得大量用户通过手机、平板等移动终端接触网站，网站打开率慢的问题更加突出。

再次，网站加载的速度直接影响网站对搜索引擎的友好程度。

最后，从网站管理者或者seo优化人员的角度来说，复杂的网页会造成维护问题。

现实中，优化网站页面(前端)不是技术问题，在页面上减肥也很容易操作。建议是:容易完成的事情需要马上完成。网站页面(前端)优化方法和建议如下:

1:启用GZIP压缩网页。

什么是GZIP压缩？GZIP最早是由Jean-loup Gailly和Mark Adler为UN ⅸ系统中的文件压缩而建立的。我们经常使用带后缀的文件。gz，这只是GZIP模式。如今，它已经成为一种数据压缩模式，或文件模式，在互联网上广泛使用。

GZIP压缩网页有什么用？

HTTP协议上的GZIP编码是一种提高WEB应用程序性能的技术。

高流量的网站通常使用GZIP压缩技术让用户感觉更快。

这通常是指安装在WWW服务器上的一个功能。当有人来接这个服务器里的网站时，服务器里的这个功能就把网页内容压缩，传输到来访的电脑浏览器上显示。通常，纯文本内容可以压缩到原始大小的40%。这个传输很快，效果就是你点开网址后会很快显示出来。当然，这也会增加服务器的负载。

2:网页(前端)支持浏览器缓存，实现速率优化。

浏览器缓存有什么用？浏览器缓存是为了节省网络资源，加快浏览速度。浏览器将最近请求的文档存储在用户的磁盘上。当面试官再次请求这个页面时，浏览器可以显示来自内陆盘的文档，这样可以加快页面的浏览速度。

浏览器缓存在哪里？

可以放入文件，内存(比如session)，缓存(cache)，cookie，session，viewstate，我们经常用到，但是我们可以认为它们是缓存的数据。实际上，缓存与会话具有类似的效果，但是缓存可以在代码中设置过时的时间和依赖关系。所谓的依赖关系(比如微软的类cachedependency sqlcachedependency)当依赖关系发生变化时，系统会通知缓存已经过期失效。缓存可以有服务器缓存和客户端缓存。

比如如何利用浏览器缓存优化网页(前端)。

使用浏览器缓存优化网页(前端)

对于seo优化人员来说，不一定要掌握如何使用浏览器缓存代码，但是要知道相关原理。

3:利用内容分发网络(CDN)优化网站加载率。

内容分发网络(CDN)观点:CDN是建立在网络上的内容分发网络，依托于部署在各地的边缘服务器。通过中心平台的负载均衡、内容分发、调整等功能模块，用户可以就近获取所需内容，减少网络拥塞，提高用户的响应率和命中率。CDN的关键技术主要包括内容存储和分发技术。

内容分发网络(CDN)原理:CDN的基本原理是普遍接受各种缓存服务器，将这些缓存服务器分散到用户见面相对密集的区域或网络。当用户遇到网站时，他们使用全局负载技术将用户的采访定向到最近的缓存服务器，那里一切正常，缓存服务器直接响应用户的请求。

内容分发网络(CDN)的目的是让用户就近获取所需内容，解决互联网网络拥塞，提高用户遇到网站的响应率。

内容分发网络(CDN)的主体是空厂商而不是站长本人。

4:删除冗余代码。

很多时候，一个网站的页面中有很多冗余的代码。例如，在主页中使用的js在列表页面中没有使用。如果全站使用头部盗用，一些不需要相关代码的网页就被莫名其妙的加了很多代码。这些代码的简化有利于前端的打开率。换句话说:网站中的每一页都不需要多余的代码。

5:充分发挥css控件风格。

网站页面(前端)优化方法及建议-css样式

一个前端代码简化的网站，它的css代码和div是分散的，前端的一些代码不需要使用style定义style，一切都可以用css来控制。比如一个网页即使使用了样式定义样式，也使用了css定义样式，这样会重复代码，减缓网站前端加载速度。

6:CSS代码的优化与控制。

如何找回被删除的微信聊天记录，教你一招快速找回聊天记录。

所有针对网站页面(前端)的优化方法和建议，最终目的都是为了加快网站的打开率。这些方法和建议的落地点在于为网页前端简化代码，减轻权重。css代码优化的要点包括但不限于:缩写的css代码；排列css代码；用于相同属性提取的公共css选择器；零散的网页颜色和靠山设置风格(较大的网站需要注意)；组织css代码等。

7:前端js代码优化。

与css代码类似，前端js代码优化方法包括但不限于:

停止全局搜索:在一个函数中，会使用全局工具保存为局部变量以减少全局搜索，因为满足局部变量的速率比满足全局变量的速率快；

定时器:如果是针对不停运行的代码，就不要用setTimeout，而要用setInterval，因为setTimeout每次都会初始化一个定时器，setInterval只会在第一时刻初始化一个定时器；

字符串邻接:如果要邻接多个字符串，应该使用less+=；如果是网络字符串，比如多次对同一个字符串进行+=操作，最好使用缓存，使用JavaScript数组组网，最后使用join方法连接；

停止with语句:与函数类似，with语句会建立自己的作用域，所以会增加在其中执行的代码的作用域链的长度。由于额外的作用域链搜索，with语句中执行的代码肯定会比外部执行的代码慢，所以只要有可能不用就不要用with语句；

将数字转换成字符串:一般情况下，最好用” “+1将数字转换成字符串。虽然看起来很丑，但其实效率最高。

将浮点数转换成整数:很多人喜欢使用parseInt()，但是parseInt()是用来将字符串转换成数字，而不是浮点数和整数之间的转换。我们应该使用Math.floor()或Math。round()；如果世界上说toString()的方法用于类型转换，建议显式挪用toString()，因为内部操作会在测试完所有可能性后，测试实验工具toString()的实验是否可以转换成String，所以直接挪用这个方法会更有效率；

多类型声明:JavaScript中的所有变量都可以用一条var语句声明，这是一条组合语句，以减少整个脚本的执行时间。就像上面的代码一样，上面的代码模式相当规范，一目了然。

插入迭代器:如var name = values[I]；i++；前两条语句可以写成var name = values[i++]；

优化追加；多次使用DocumentFragment

使用innerHTML赋值，而不是构建dom元素；

替换createElement通过模板元素克隆；

使用firstChild和nextSibling而不是childNodes来遍历dom元素；

删除DOM节点；

代理使用；

重复使用的挪用效果提前保存到局部变量；

注:seo优化人员不需要掌握前端js代码优化的详细代码，这是前端人员的事。

8:关于使用统计表的建议。

Tab表结构网页是过时的技术，现在div比较好。tab表的使用建议如下:少用tab表就好，杜绝嵌套条件下使用表。