一代码优化概述 关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知 识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化问题. 所谓代码优化是指对程序代码进行等价(指不改变程序的运行结果)变换.程序代码可以是中间代码,也可以是 目标代码.等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同.优化的含义是最终生成的目标代码 短(运行时间更短.占用空间更小),时空效率优化.原则上,优化可以在编译的各个阶段进行,但…

前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化网站性能. 一.拆分初始化负载 拆分初始化负载——听名字觉得高大上,其实不然,土一点将讲就是将页面加载时需要的一堆JavaScript文件,分成两部分:渲染页面所必需的(页面出来,没他不行)和剩下的.页面初始化时,只加载必须的,其余的等会加载. 其实在现实生产环境中,对于大部分网站:页面加载完毕(w…

对于90%以上的互联网公司来说,前后端分离是必须要做的.目前接手的公司的一个工程,后端是PHP,用的smarty模板,开发效率和之前公司的完全分离相比,确实低不少,一方面需要前端会PHP,另一方面沟通成本也不少,改个PHP的路由还要经过后端的同意,还有系统臃肿,维护成本高等等.但做成前后端完全分离,做成SPA,怎么做SEO呢,公司的这款产品需要大量的SEO和SEM,国内搜索引擎现在对SPA的SEO并不好.看了看其它公司的方案,知乎目前做的前后端分离是前端渲染,那怎么做的SEO呢,暂时没有太多时间…

最近SEO禅在做安卓项目比较忙,大部分入门理论的文章也写了差不多了,有的也写了一个系列,但是感觉还是不够完善,有很多边边角角的地方感觉也没说清楚,所以还是有必要写一些零散文章去补充说明下,就比如关于SEO新手入门的文章,SEO禅已经写了下面这些: SEO入门一篇就够-SEO教程 SEO新手入门系列2021(一):SEO金字塔 SEO新手入门系列2021(二):SEO 101 SEO新手入门系列2021(三):搜索引擎工作原理 SEO新手入门系列2021(四):搜索引擎相关知识 SEO新手入门系列…

关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好.前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊. 1.从资源加载方面来说,浏览器的加载顺序是按源码从上到下加载解析的,遇到link,script等资源都会阻塞页面渲染,所以我们会把script放在</body>前面,我们还可以结合构建工具(webpack,gulp...)压缩js文件,抽离公共js.去掉空格.注释,尽可能地让js文件变小,防止脚本阻塞页面渲染. 2.在写代码的时…

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是: for (var i = 0; i < data.length; i++) { //do someting } 这里每次循环开始前都需要判断i是否小于data.length,JavaScript并不会对data.length进行缓存,而是每次比较都会进行一次取值.如我们所知,JavaScript…

JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素,返回div元素数组 $(".myClass")      选择使用myClass类的css的所有元素 $("*&…

背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读. 分析面板介绍 上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…