知识点整理：前端优化类和浏览器的兼容，SEO

最新推荐文章于 2024-03-28 07:00:21 发布

Crazy_GirlLL

最新推荐文章于 2024-03-28 07:00:21 发布

阅读量240

点赞数

分类专栏：前端优化前端性能文章标签：前端

原文链接：https://www.jianshu.com/p/2e69e9891c67

版权

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

前端优化项目的方法

不同浏览器之间的差异，各主浏览器之间的兼容

从输入 URL 到页面加载完成，完整的链路

1.DNS 解析
2.TCP 连接
3.HTTP 请求抛出
4.服务端处理请求，HTTP 响应返回
5.浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户

CSS Sprites（CSS精灵）：减少图片的请求，用CSS的background-image和background-position属性定位来显示其中的一小部分。
如果图标字体文字可以代替图片最好
js文件和css文件合并，最好各为一个
少用location.reload()：使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器。
如果多处使用一个接口，可以请求一次接口，利用缓存把内容保存起来，随用随取，或者放在vuex
减少HTTP请求次数：css sprites，js，css 源码压缩，图片大小控制合适，CDN托管（内容分发网络，请求更快，更稳定），data缓存，图片服务器（第一次请求会相对较慢，后期可以使用缓存，减少本地文件的访问，加快速度）
前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数
如需处理大量节点的操作上，用innerHTML比直接操作DOM来说更快（只是第一次会稍慢，后续就快，如果对于简单的文本操作，操作DOM来完成会更快
当需要设置的样式很多时，设置className而不是直接操作style
避免使用动态属性
图片预加载，把样式表放在顶部，脚本放在底部
避免在页面的主题布局中使用table，table要等其中的内容完全下载之后才会显示出来，速度比div+css要慢

重绘：添加删除dom节点时；元素位置会改变；元素尺寸改变：边距，填充，边框，宽度，高度；就会使得页面的dom树重新渲染
回流：修改某标签的背景颜色，只是影响元素的外观，风格，不会影响布局
所以我们改变样式的时候，不用直接改变每个的属性，多次添加一次写入：dom.style.cssText="color:res;font-size:14px;"；
避免设置过多的行内样式
添加的结构外元素尽量设置他们的位置为fixed或absolute
避免使用表格来布局
所以使用绝对定位和固定定位使其脱离文档流，就不会引起回流
添加class来操作css样式，而不是直接在DOM上设置，也可避回流；或者使用csstext来动态改变样式
使用cloneNode和replaceChild技术，已发一次回流和重绘
使用display:none 之引发两次回流和重绘
少用offset系列属性，scroll系列属性，client系列属性，获取行内样式的方法，会让浏览器强制flush队列（强制刷出缓存池中的数据），*从而引起多次重绘*，

确保下webpack，npm, node 及主要库版本要新，比如：4.x比3.x提升很多。
loader范围缩小到src项目文件！一些不必要的loader能关就关了吧
eslint代码校验其实是一个很费时间的一个步奏。
可以把eslint的范围缩小到src,且只检查*.js 和 *.vue
生产环境不开启eslint，使用pre-commit或者husky在提交前校验

原文链接：https://blog.csdn.net/weixin_41828535/article/details/79707888
路由懒加载

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

　　component：resolve=>(['需要加载的路由的地址'，resolve])

2、es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')
转载：https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html
服务端渲染SSR

SSR解决的两大痛点 1:首屏渲染， 2:seo。

但是ssr实现较为复杂一些,不做展开描述。目前官方文档有支持。另外推荐一个vue服务端渲染的框架:Nuxt.js

防抖：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后如果在200ms之内没有再次触发该事件，那么就执行函数，如果在这200ms内触发了该事件，name当前的计时取消，重新开始计时

节流：短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不在工作，直到过了这段时间才重新生效(使用时间戳，根据差值判断是否执行)

优雅降级，渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。如：border-shadow
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验

前端ESO