前端工程化,前端语义化,web前端性能,SEO,W3C

囧囧图图
269 阅读10分钟

(一), 前端工程化 主要从 模块化/组件化/规范化/自动化 四个方面来说

  • 模块化 ≠ 组件化,模块化只是在文件层面对代码或者资源的拆分,而组件化是在设计层面对UI(用户界面)的拆分

1, 模块化

1-1, 模块化是在文件层面对代码和资源的拆分,就是讲一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载

1-2, 这样一个模块是一个实现特定功能的文件,才有多人协作的可能,我们也可以方便使用别人的代码,需要什么功能就加载什么模块

  • 1, 避免变量污染,命名冲突
  • 2, 提高代码复用率
  • 3, 提高可维护性
  • 4, 依赖关系的管理
  • 5, 按需加载

1-3, js的模块化 css的模块化 资源的模块化

1, js的模块化

  • 1, 用script来引入js模块

    • 加载的时候会停止渲染网页,引入的js文件越多,网页失去响应的时间越长

    • 会污染全局变量

    • js文件之间存在依赖关系,加载是有顺序的,依赖性最大的要放到最后去加载,当项目规模较大时,依赖关系错综复杂

    • 要引入的js文件过多,影响美观并且代码难以管理

  • 2, es6之前没有模块化的概念,如果要进行模块化操作,需要引入第三方类库

    • CommonJS（常用在服务器端，同步的，如nodejs）,通过 exports 或module.exports 来导出需要暴露的接口 特点: 1, 所有代码都运行在模块作用域，不会污染全局作用域 2, 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果 3, 模块加载的顺序，按照其在代码中出现的顺序

    • AMD（常用在浏览器端，异步的，如requirejs）（Asynchronous Module Definition,异步模块定义）

    • CMD（常用在浏览器端，异步的，如seajs） (Common Module Definition, 通用模块定义)

    • UMD（AMD && CommonJS）（Universal Module Definition, 通用模块规范 ）这些模块化规范的核心价值都是让 JavaScript 的模块化开发变得简单和自然

    • 服务器端模块: 在服务器端，所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。不用考虑异步加载的方式，可用CommonJS规范

    • 浏览器端模块: 在浏览器端，所有的模块都放在服务器端，同步加载，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态,因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）

  • 3, es6已经在语言层面归档了模块系统,完全可以取代现有的CommonJS和AMD规范,使用简洁并且有静态加载的特性,ES6的模块化分为导出（export）与导入（import）两个模块

    • 1, export: 用了定义模块,可以导出对象、函数、类、字符串等,在 es6 中每个模块既是一个文件,在文件中定义的变量、对象、函数在外部是无法获取的,如果需要读取模块中的内容,就必须使用export对其进行暴露(输出)
    // 1,我们先来创建一个test.js文件，来对这一个变量进行输出: 
    export let myName="laowang"
// 2,然后可以创建一个index.js文件，以import的形式将这个变量进行引入
    import {myName} from "./test.js";
    console.log(myName);//laowang
// 3,如果要输出多个变量可以将这些变量包装成对象进行模块化输出
    export { myName, myAge,  myfn } // 输出
    import {myfn,myAge,myName} from "./test.js"; // 接收
// 4, 如果你不想暴露模块当中的变量名字，可以通过as来进行操作
    export { myName as name, myAge as age, myfn as fn }
    import {fn,age,name} from "./test.js";
// 5, 也可以直接导入整个模块，将上面的接收代码修改为
    import * as info from "./test.js"; //接收, 通过*来批量接收，as 来指定接收的名字

    • 2, 默认导出（default export）,一个模块只能有一个默认导出

      export和export default的区别就是：前者导出的东西需要在导入的时候加{}，而后者则不需要

    // 1, 一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致
export default function(){
    return "默认导出一个方法"
}
import myFn from "./test.js";// 注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法
// 2, 可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
import myObj from "./test.js";
// 3, 同时也支持混合导出
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
import myFn,{myName} from "./test.js";
    • 3, 重命名export和import:如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法
    export let myName="我来自test1.js";
export let myName="我来自test2.js";
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自test1.js
console.log(name2);//我来自test1.js
    • 4, import
    // 1, import后面的from指定模块文件的位置，可以是相对 路径，也可以是绝对路径.js后缀可以省略
// 2, import命令具有提升效果，会提升到整个模块的头部，首先执行
    foo()
    import {foo} from "./test1.js";
    // 相当于引入之后再调用foo()函数,就是会自动解析成
    import {foo} from "./test1.js";
    foo()
// 3, 由于import是静态执行，所以不能使用表达式和变量
// 4, import命令只执行模块不输入任何值

1, css的模块化, 各厂都制定了自己的CSS命名风格,但是这些都是弱约束

  • 1.BEM风格
  • 2.Bootstrap风格
  • 3.Semantic UI风格

2, 组件化

  • 1, 组件化是在设计层面上，对于UI的拆分,组件化将页面视为一个容器，从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件
  • 2, 页面上各个独立部分,例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去使用相关组件即可组成完整的页面
  • 3, 组件具有独立性，因此组件与组件之间可以自由组合；当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换

3,规范化

  • 目录结构的制定
  • 编码规范
  • 前后端接口规范
  • 文档规范
  • 组件管理
  • 代码包管理（SVN、Git）
  • Commit提交代码备注描述规范
  • 定期codeReview
  • 视觉图标规范...

4, 自动化

  • "简单重复的工作交给机器来做"，自动化也就是有很多自动化工具（glup、webpack）代替我们来完成
  • 例如持续集成、自动化构建、自动化部署、自动化测试等等

(二), 前端语义化

1, 为什么要语义化

  • 1, 为了在没有css的情况下,页面也能呈现出很好的内容结构,代码结构
  • 2, 用户体验,例如title,alt用于解释名词或者解释图片信息的表情
  • 3, 有利于SEO,和搜索引擎建立良好的沟通,有利于爬虫抓取更多的有效信息,爬虫依赖于标签来确定山下文和各个关键字的权重
  • 4, 方便其他设备解析(如屏幕阅读器,盲人阅读器,移动设备)以有意义的方式渲染页面
  • 5, 便于开发和维护,语义化更具有可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化

2, 写html代码的时候需要注意

  • 1, 少写无意义的标签div和span
  • 2, 语义不明时,能用p标签尽量用p标签,p标签有默认上下间距,对兼容有好处
  • 3, 不要使用纯样式标签,如b, font等,用css进行设置
  • 4, 需要强调的文本，可以包含在strong或em标签中, strong默认样式是加粗（不要用b）, em是斜体（不要用i）
  • 5, 每个input标签对应的说明文本都需要使用label标签
  • 6, 给元素写css类名时，也要遵循语义化原则

(三), web前端性能

1, 浏览器访问优化(网站优化,不改变UI的情况下，对网站进行优化)

  • 1, 减少http请求,主要有CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存
  • 2, 合理设置http缓存,静态资源文件缓存在浏览器,原则上是能缓存的 越多越久 越好,用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法
  • 3, 减少DOM操作次数，优化javascript性能
  • 4, Cookie方面,减小cookie大小,引入资源的域名不要包含cookie
  • 5, 节流: 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
  • 6, 防抖: 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

2, 页面从输入 URL 到页面加载显示完成的过程

  • 1, 浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
  • 2, 调用浏览器内核中的对应方法,通过DNS解析获取网址的IP地址,进行HTTP协议会话，客户端发送报头(请求报头)
  • 3, 进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器
  • 4, 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理
  • 5, 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）
  • 6, 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）
  • 7, 载入解析到的资源文件，渲染页面，完成

四, SEO

  • 1, 设置有吸引力切合实际的标题，标题中要包含所做的关键词

  • 2, 合理的title、description、keywords：搜索对这三项的权重逐个减小,title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同,keywords列举出重要关键词即可

  • 3, 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

  • 4, 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下

  • 5, 重要内容不要用js输出：爬虫不会执行js获取内容

  • 6, 非装饰性图片必须加alt

  • 7, 将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录

  • 8, 采用web标准进行网站重构,目录和内容结构最好不要超过3层,目录命名的规范做法是使用英文而不是拼音字母

五, W3C(World Wide Web Consortium ,万维网联盟 )

1, 标准

  • 1, 结构化标准主要包括XHTML和XML
  • 2, 表现标准语言主要包括CSS
  • 3, 行为标准主要包括（如W3C DOM）

2, 规范

  • 1, 需要声明（DOCTYPE）(文档类型)
  • 2, 需要定义语言编码
  • 3, js/css定义
  • 4, 使用注释
  • 5, 所有标签的元素和属性名字都必须使用小写
  • 6, 所有属性值必须用引号括起来,所有属性必须有属性值
  • 7, 所有的标记都必须有相应的结束标记,标签合理嵌套
  • 8, 图片添加有意义的alt属性
  • 9, 在form表单中增加label，以增加用户友好度
  • 10, 样式尽量少用行间样式表，使结构与表现分离
avatar
文章
阅读
粉丝