前端项目,从结构上进行性能优化

Posted 2020-12-20 caocaiqi

　　性能问题的两方面原因:渲染速度慢、请求时间长、合理的使用标签，可以在一定程度上提升渲染速度以及减少请求时间。

 

---

 

　　script标签：调整加载顺序提升渲染速度

　　渲染引擎在解析html时，若遇到script标签引用文件则会暂停解析过程,同时通知网络线程加载文件,文件加载后会切换至javascript引擎来执行对应代码,代码执行完成之后切换至渲染引擎继续渲染页面

　　script标签的3个属性:

• async--立即请求文件但不阻塞渲染引擎，文件加载完毕后阻塞渲染引擎并立即执行文件内容。
• defer属性--立即请求文件，但不阻塞渲染引擎，等到解析完HTML之后再执行文件内容。
• HTML5标准type属性--对应值为“module”：让浏览器按照ECMA Script6标准将文件当作模块进行解析，默认阻塞效果同defer，也可以配合async在请求完成后立即执行。

　　EX：

　　　　

1 <script>
2 <script defer>
3 <script async>
4 <script type="module">
5 <script type="module" async>

 

　　

　　link标签：通过预处理提升渲染速度

• 　dns-prefetch

　　　当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名预先进行DNS解析并缓存，以下是某宝网的使用

　　　　

• preconnect：让浏览器在一个HTTP请求正式发给服务器前预先执行一些操作，包括DNS解析、TLS协商、TCP握手，通过消除往返延迟来为用户节省时间
• prefetch/preload：两个值都是让浏览器预先下载并缓存某个资源，但不同的是prefetch可能会在浏览器忙时被忽略，而preload则是一定会被预先下载
• prerender：浏览器不仅会加载资源，还会解析执行页面，进行预渲染
  

  ---

  搜索优化

　　　　meta标签：提取关键信息

　　　　

<meta content="博客园，博客，知识分享平台，学习园地" name="keywords">